× {{alert.msg}} Never ask again
Receive New Tutorials
GET IT FREE

Using Modernizr to Detect HTML5 & CSS3 Features in Browser

– {{showDate(postTime)}}

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

Jason Pamental, O’Reilly book author

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:


Jason Pamental

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

or join us as an expert mentor!



Author
Jason Pamental
Jason Pamental
5.0
Web Strategist, Designer & Technologist w/20 yrs experience on the web
I've been designing & developing for the web since Mosaic & Netscape 1, with a background in Graphic Design. I've spent more years building technology solutions (in Witango, PHP, .NET) than I care...
Hire the Author

Questions about this tutorial?  Get Live 1:1 help from Design experts!
Victor H
Victor H
5.0
Software Engineer
🎄 🎁 ⛄ 🔔 CHRISMAST PROMO $35/15 MIN 🔔 ⛄ 🎁 🎄
Hire this Expert
Jessamyn Smith
Jessamyn Smith
5.0
Experienced Full-Stack Web Developer
I am an experienced full-stack software developer with over a decade in the field, primarily in back-end development for web applications. My...
Hire this Expert


Live 1:1 help from expert developers

Codementor is your live 1:1 expert mentor helping you in real time.

comments powered by Disqus