× {{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!
Oscar
Oscar
5.0
Friendly, patient coach for Ruby, Rails, Golang with 4+ experience. Microservices enthusiast with 2yrs experience using Docker, Kubernetes, Kafka, GRPC
Ask me anything :) I'll do my best guiding you in areas of back end development using Rails, Golang, Version Control System (Git), and tiny hacks...
Hire this Expert
Solomon Kingsley John
Solomon Kingsley John
5.0
Software Engineer - Fullstack
I'm an experienced software engineer, with years of experience working with HTML5/CSS3/PHP/JS. I've built scalable applications that support...
Hire this Expert
comments powered by Disqus