Although HTML5 and CSS3 are great but many of the new features they have, as we already know by now, are not much applicable in old browsers. At the Modernizr official website, we will find two options to download the file, Development and Production version. The Development version is a full and uncompressed version consisting of all the primary feature tests; while in the Production version, we can select the feature tests that we only need.
As you can see, there are a lot of options for feature tests in the download page. In this example, we will select all the primary feature tests. Generate and grab the codes. If it does, Modernizr will replace this class with just js. For instance, if the browser does not support CSS3 Animations , then Modernizr will generate the no-cssanimations class. But when it does, it will remove the no- prefix and simply become cssanimations. The code above is taken from Internet Explorer 7 and as we can see from the generated classes, this browser clearly lacks in so many good new features, such as no support for CSS3 border-radius.
Modernizr doesn't detect browsers as such, it detects which feature and capability are present and this is the whole jist of what it's trying to do. You could try hooking in a simple detection script like this and then using it to make your choice.
I've included Version Detection as well just in case that's needed. If you only want to check of any version of IE you could just look for the navigator.
For reference, here's a link to the SMIL compatibility chart at caniuse. Modernizr can detect CSS 3D transforms , yeah. The truthiness of Modernizr. The above link lets you select which tests to include in a Modernizr build, and the option you're looking for is available there.
Alternatively , as user answered, you can use conditional comments if you're searching for IE and IE alone. If you need to check which IE version you're in so you can conditionally load either jQuery 1. IE conditional comments are only supported up to IE9 inclusive.
From IE10 onwards, Microsoft encourages using feature detection rather than browser detection. If you're looking for a JS version using a combination of feature detection and UA sniffing of what html5 boilerplate used to do:.
The code then adds the User Agent string to the html tag with the attribute 'data-useragent', so IE 11 can be targeted specifically I agree we should test for capabilities, but it's hard to find a simple answer to "what capabilities are supported by 'modern browsers' but not 'old browsers'?
So I fired up a bunch of browsers and inspected Modernizer directly. I added a few capabilities I definitely require, and then I added "inputtypes. This is what I use - you can edit the list of things to test for your particular case.
Returns false if any of the capabilities are missing. I found that using es6number with Modernizr did exactly what I wanted. A bit ugly but has worked well for me. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more.
Correct way to use Modernizr to detect IE? Ask Question. Asked 8 years, 11 months ago. Active 1 year, 1 month ago. Viewed k times. Or is there another way to do this? If you like playing with new features which might not be available in all browsers, you have surely already tried Modernizr. This library allows to test whether the features you want are available or not. As Modernizr adds some CSS classes on the html element to indicate if a given feature is available, you might be tempted to directly include it in the head tag to know as soon as possible if the features you want are available or not.
This approach was what the developers of Modernizr themselves recommended at the beginning. These thoughts inspired this article. In it we will talk about why we should adopt a responsible approach when we want to use Modernizr.
Then, we will see some ways to put this approach into practice when possible. The usefulness of a responsible approach can be resumed in one question: do you like waiting for several seconds to access a web page? Surely not, and your visitors hate that too. We all love fancy features, but not if they slow down our website too much.
The good news is that you can still keep your fancy features, even with a responsible approach. In a lot of cases, we wait for the page to be loaded before executing the script. The problem is that if your script is included in the head , the browser will load it before the page itself. This means that if your script is big in size, your visitors have to wait until the script is loaded before they can see the page. Modernizr has been developed to determine if you can use some recent features, such as CSS transitions or transformations, in a web page.
Modernizr is no exception. Embracing a responsible approach means that you have to think about it each time you want to include a JavaScript file or other potentially big resources. However, if you optimize how you include all your resources, the difference can be huge. Defining your needs is the first thing you should do before including Modernizr.
If you visit this page you will see that Modernizr gives us a way to build our own customized version of the library with just the tests needed.
Generating a new build every time you add a feature is not a very attractive option.
0コメント