Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Conditionally Apply Styles Using Feature Queries

3:00 CSS lesson by

While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature queries without JavaScript.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature queries without JavaScript.

Avatar
Barbu

so what about IE that doesn't support @supports? lol

In reply to egghead.io
Avatar
Damon Bauer

@Barbu - If a browser doesn't have support for @supports, the block of styles outside of @supports would apply.

In reply to Barbu
Avatar
Chris Kihneman

Seeing how @supports is not supported by any IE, wouldn't it be best to go with a progressive enhancement approach? Basically, leaving it how you built it out first. I get the thoughts on a few less lines of code for how it ended up, but seems like we wouldn't want to intentionally alienate IE users.

Still, great tutorials btw, just would suggest spending 20 seconds at the end of a video to discuss browser support. Many of us still live in a word where we support IE8/9.

In reply to Damon Bauer
Avatar
Damon Bauer

@Chris Kihneman -

Most definitely! My intention was to show was feature queries are, not necessarily explain every caveat or unsupported browsers.

If you (or anyone) needs to support IE, I'd absolutely suggest sticking with a progressive enhancement approach and not worry about just a couple of extra lines.

In reply to Chris Kihneman
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?