Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Modernizr: the feature detection library for HTML5/CSS3 modernizr is an open-source javascript library that helps you build the next generation of html5 and css3-powered websites.
1) If I'm already using Modernizr, will I then even need HTML5 Shiv to enable HTML5 tag support for IE?
2) Is HTML5 Shiv only for IE, or for all browser who don't have native HTML 5 support? Like older versions of Firefox, Safari, Chrome, etc?
Source: (StackOverflow)
I'm looking to build my first HTML5 site and have been looking at working with IE.
There is html5shiv, Dean Edwards ie7-js and then Modernizr. Are these all largely the same? I'm confused about which route to go.
Source: (StackOverflow)
I notice that in a lot of template engines, in the HTML5 Boilerplate, in various frameworks and in plain php sites there is the no-js class added onto the <HTML> tag.
Why is this done? Is there some sort of default browser behavior that reacts to this class? Why include it always? Does that not render the class itself obsolete, if there is no no-"no-js" case and html can be addressed directly?
Here is an example from the HTML5 Boilerplate index.html:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
As you can see, the <html> element will always have this class.
Can someone explain why this is done so often?
Source: (StackOverflow)
I used to rely on
var supportsTouch = 'ontouchstart' in document;
to test for touch support in mobile and desktop browsers. Based on that test I bind eventListeners to click- or touch-events. This works fine in ALL current browser versions but the latest update to Chrome Canary (24.0.1275.0 canary) and of course the DEV version fail this test.
I checked on the current modernizr test but that returns a false positive as well, meaning it states that chrome supports touch even though the feature is disabled.
My current workaround is to test for any kind of mobile browser first and only if that returns positive uses the above test to check for touch. Downside of this is that you cannot use the handy "emulate touch events" option in chrome's dev-tools. Ideas?
Source: (StackOverflow)
Usually I use modernizr to find out the browser abilities. Same time, I use LESS CSS to make my css more readable and maintainable. Common style using LESS nested rules looks like this:
#header {
color: black;
.logo {
width: 300px;
color: rgba(255,255,255,.6);
&:hover { text-decoration: none }
}
}
Then, if I use modernizr style fall-back, I add this text for previous block:
.no-js #header,
.no-rgba #header {
.logo {
color: white;
}
}
So, it looks like I have two branches of code, and every time I need to check another compatability aspect the number of braches will grow. This code is less maintainable, because you have to find all the styles applied to every element, and the benefit we get using nested classes disappears.
The question: is there a way in LESS syntax to include such fall-backs and not starting a new code-branch for .no-js and other .no-smth classes?
Source: (StackOverflow)
I'm using RequireJs for structuring my JavaScript code. Also, I'm using a lot of CSS3 and I use "Modernizr w/ YepNope" + x number of css3 polyfills.
I understand "Modernizr w/ YepNope" and RequireJs are both Resource Loaders. Since they are both resource loaders is it a bad idea to use both of them in the same project?
So, basically I'm asking, is it a bad idea to use:
- Require.js
- Modernizr.js w/ YepNope.js
In the same page?
Source: (StackOverflow)
Is there a way to detect browser support for background-attachment: fixed?
Edit: Although this feature is widely supported on desktop browsers it is poorly supported on portable devices which I why I would like to be able to detect the feature.
Source: (StackOverflow)
I want to check if the browser who's running my page
is capable of handling the 'html 5 placeholder'
I know I can add the following javascript check:
!Modernizr.input.placeholder
but is it worth to import a library just for one check ?
also how does modernizr do that for me (i mean how is it implemented under the cover) ?
Source: (StackOverflow)
I'm aware that I can create a custom build build of Modernizr to detect the features I care about. But is there a way to use Modernizr installed with Bower to detect a specific feature or set of features (such as SVG support) without including the entire library?
Basically when I do
bower install modernizr
I will get the entire library which is more than I need.
Source: (StackOverflow)
I want a single site that uses the same HTML but "widgetizes" it in the best way for the platform it's served to.
Is there a standard practice for feature detecting mobile devices / hardware keyboards on the client and deciding whether to load jQuery Mobile along with the site's mobile JavaScript or jQuery UI and a script for a desktop experience?
The following seems like a reasonable way to do it but I wonder if Modernizr.touch is the best way to detect this? e.g.: Forcing touch might not be the best solution for Surface. Is there any way to detect if there's also a hardware keyboard?
Modernizr.load({
test: Modernizr.touch,
yep : ['jquery-mobile.js','mobile.js']
nope: ['jquery-ui.js','desktop.js']
});
Edit:
Found some relevant Modernizr bugs:
I guess what I really need is a way to detect both whether the device is capable of touch and if it has a hardware keyboard. I could use David Mulder's answer for detecting device width in physical units (inches) as a proxy for that and assume anything > 11 inches has a keyboard, but I bet there's a massive tablet out there (or Google will release a nexus 12 tablet :) where that would make a wrong assumption.
Source: (StackOverflow)
I have a problem with RequireJS and Modernizr.
I want the Modernizr resource to be on the head. And everything else in the body. The reason is that Modernizr need to do some stuffs before DOMContentLoad. I want to be able to load the Modernizr module into other modules using RequireJS. How can I accomplish that both in dev and production environment? I use requirejs that pulls all dependencies and minifies all the resources. And the yeoman build replaces <script data-main="scripts/main" src="scripts/vendor/require.js"></script>with the minified version.
under the body tag:
<!-- build:js ikl.app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
<script>
requirejs.config({
paths: {
'jquery' : 'vendor/jquery',
'handlebars' : 'vendor/handlebars',
'ember' : 'vendor/ember',
'ember-data' : 'vendor/ember-data',
'modernizr' : 'vendor/modernizr' // This should be removed
},
baseUrl: 'scripts',
shim: {
'jquery' : {
exports : 'jQuery'
},
'ember': {
deps: ['jquery', 'handlebars'],
exports: 'Ember'
},
'ember-data': {
deps: ['ember'],
exports: 'DS'
},
'handlebars': {
exports: 'Handlebars'
},
'modernizr': {
exports: 'Modernizr'
}
}
});
require([
'modules/system/controllers/system.controller',
'jquery',
'ember',
'ember-data',
'handlebars',
'modernizr'
],
function( systemController ) {
systemController.renderView();
}
);
</script>
Source: (StackOverflow)
i've been struggling for a while trying to have the rotate(xdeg) feature on IE 8 , 7 and 6 , for this i google for a while and found cssSandpaper but since i have to load 4 diferents scripts i want to do it only if its necessary for this im using modernizr im trying something like this:
<head>
<link rel="stylesheet" rel='nofollow' href="stilos/estilo.css" />
<script src="scripts/modernizr.custom.19387.js"></script>
<script src="scripts/jquery-1.8.1.js"></script>
<script src="scripts/misfallbacks.js"></script>
</head>
<body>
<div id="acerca"><a rel='nofollow' href="#">Acerca de mi</a></div>
</body>
my css file(estilo.css):
#acerca{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
-sand-transform:rotate(90deg);
position: relative;
top: -233px;
left: 462px;
width: 123px;
height: 23px;
z-index:100;
}
my js file(misfallbacks.js)
Modernizr.load({
test:Modernizr.csstransforms,
nope:['transformie/EventHelpers.js/','transformie/cssQuery-p.js','transformie/sylvester.js','transformie/cssSandpaper.js']
);//Fin de monernizr on load
It works great on safari, chrome, opera, Firefox and IE9 but when i try on IE8 or IE7 i get the following error on the console
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
I added a console.log to try and find out what was going on and went to that line here it is(EvenHelpers.js):
me.addEvent = function(obj, evType, fn){
console.log(obj);//I've added this to try to figure out what is going on
if (obj.addEventListener) {........//here is the error
on the next run i checked the console again a saw this LOG: null , i'm no expert on javascript so im not sure what is going on but i try something diferrent and added the cssSandPaper using the script tag like this:
<head>
<link rel="stylesheet" rel='nofollow' href="stilos/estilo.css" />
<script src="scripts/modernizr.custom.19387.js"></script>
<script src="scripts/jquery-1.8.1.js"></script>
<!--<script src="scripts/misfallbacks.js"></script>-->
<script src="transformie/EventHelpers.js"></script>
<script src="transformie/cssQuery-p.js"></script>
<script src="transformie/sylvester.js"></script>
<script src="transformie/cssSandpaper.js"></script>
</head>
to my surprise worked like a charm, and like this i have the rotate feature even in IE7 and IE8 and the console say this now LOG: [object HTMLScriptElement] but im aware that using this way i will be always loading these 4 scripts even when they are not necessary and that is not mi goal but since im starting with modernizr and javacript to be hones i have no idea of what is going on D: and why when i load the scripts using nope:[''] from modernizr doesnt work. anyone knows a way to solve this? ...im sorry for my english not my first languague
edit: i did a little research on this object HTMLScriptElement and its suppose to refere to a script tag i suppose that when i load the js file with nope: from modernizr something change and this object become null since is no longer loaded inside a script tag...but im still in the same problem... how do i solve this? :/
jsFiddle Test Modernizr
jsFiddle Test without Modernizr
Answer:
i ended up using if lt IE 9 to load the sand paper scripts it got the job done
Source: (StackOverflow)
Some @font-face fonts don't play nice with non-cleartype settings (gets really choppy on the edges)
Is there a way to detect this via javascript so that I can do a modernizr-style class addition to the body if cleartype is off so I can use this in my CSS
Source: (StackOverflow)
Preface
Let's pretend that a div is animated from opacity:0; to opacity:1; and i want to keep opacity:1; after the animation ends.
That's what animation-fill-mode:forwards; does.
@keyframes myAnimation {
from { opacity:0; }
to { opacity:1; }
}
div {
opacity:0;
animation-name:myAnimation;
animation-delay:1s;
animation-duration:2s;
animation-fill-mode:forwards;
}
<div>just a test</div>
Run it on jsFiddle
- Note 1: i didn't include the vendor prefixes here to simplify
- Note 2: that's just an example, please don't reply with "just use jQuery fadeIn function" etc.
Some things to know
In this answer i read that animation-fill-mode is supported by Chrome 16+, Safari 4+, Firefox 5+.
But animation alone is supported by Chrome 1+ and Opera too. So a general test with Modernizr may return positive even if fill-mode is not supported.
To target animation-fill-mode i added a new test on Modernizr:
Modernizr.addTest('animation-fill-mode',function(){
return Modernizr.testAllProps('animationFillMode');
});
Now i've a .no-animation-fill-mode class for CSS and Modernizr.animationFillMode for JavaScript.
I also read from CSS3 animations specs that:
an animation specified in the document style sheet will begin at the
document load
Finally, the question(s)
Is it ok to run a simple jQuery function at the exact number of seconds the animation ends
$(document).ready(function(){
if(!Modernizr.animation){
$('div').delay(1000).fadeIn(2000);
}else if(!Modernizr.animationFillMode){
$('div').delay(3000).show();
}
});
And in CSS:
.no-animation-fill-mode div {
animation-iteration-count:1;
}
/* or just animation:myAnimation 2s 1s 1; for everyone */
Or is there any known polyfill specific for animation-fill-mode ?
Also, what happens if i use the shorthand syntax
animation:myAnimation 2s 1s forwards;
on browsers supporting animation but not animation-fill-mode ?
Thanks a lot!
Source: (StackOverflow)
I am attempting to use the new Content Security Policy (CSP) HTTP headers on a test site. When I use CSP in conjunction with Modernizr I get CSP violation errors. This is the CSP policy I am using:
Content-Security-Policy: default-src 'self'; script-src 'self'
ajax.googleapis.com ajax.aspnetcdn.com; style-src 'self'; img-src
'self'; font-src 'self'; report-uri /WebResource.axd?cspReport=true
These are the errors from the Chrome browser console:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".
Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
window.Modernizr.injectElementWithStyles - modernizr-2.7.2.js:134
window.Modernizr.tests.touch - modernizr-2.7.2.js:457(anonymous function)
modernizr-2.7.2.js:949(anonymous function) - modernizr-2.7.2.js:1406
I discovered the following workaround on the Github Modernizr site. However, the workaround was first put forward in March and doing a little Google-Fu I can find no fixes or workarounds to this issue.
I know that I can include the unsafe-inline directive which can get around this error but this also enables unsafe code to run and negates the use of CSP in the first place. Does anyone have any solutions.
Update - What is CSP
CSP is a fairly new HTTP header and only now are major browsers (including the next version of IE) supporting it fully. Essentially its a white list of content the browser is allowed to use to render the page. Read this and this documentation from Mozilla for more information about it.
Update - Help Highlight CSP
CSP is now available on all browsers except IE (It seems the next version of IE will support it, yay!) and its a gigantic leap forward in web security. For those interested in getting more third party support for CSP, please upvote or comment the following posts:
- Modernizr support for CSP
- Visual Studio support for CSP. Note that browser link does not work if you have CSP enabled as it uses inline JavaScript.
- Visual Studio Web Essentials Extension support for CSP. Web Essentials is a Visual Studio addin, whose features often end up in the next version of Visual Studio.
Update - Microsoft Edge now supports CSP 1.0
Every major browser now supports CSP. Even more reason to get this fixed.
Source: (StackOverflow)