Using Modernizr to Detect HTML5 & CSS3 Features in Browser

During Codementor design office hours, Jason Pamental explained how Modernizr is an invaluable tool for figuring out what is supported in the browser.

How to know what is and isn’t supported

I really use Modernizr all the time, as part of how I build up the page. Modernizr has a great javascript library that does a bunch of detections and lets you know what’s supported in the browser by injecting classes.   What that will do for you is it will inject all those classes in there and it will tell you all the things that are supported.

So, when I have this running my site, it tells me that Flexbox is supported, Canvas is supported, WebGL, Geolocation, Index DVB, Hashchange, History, Drag and Drop, all these different HTML 5 things.  It also indicates that Fontface is supported.  So, if you look for the presence of that class, then you know that Fontface is supported and it’s safe to load that.  So, it is possible.

Now, you have to bear in mind that if javascript isn’t supported, then you don’t get any of these things.  The absence of javascript does not necessarily mean the absence of Fontface support.  So, you have to weigh that, and decide how you want to proceed.  When do you don’t know if it’s supported, do you want to still try?

Other posts in this series with Jason Pamental:

• Introduction to Fonts for Developers
• Choosing & Pairing Typefaces
• Pros & Cons for Icon Fonts Like Font Awesome – Design Tips for Developers
• Additional Resources About Responsive Typography

Need more design mentor help? Book an 1-on-1 session!

View Jason’s Profile

or join us as an expert mentor!