DEV Community

Cover image for CSS Quickies: @supports

CSS Quickies: @supports

Michael "lampe" Lazarski on September 29, 2019

What is CSS Quickes? I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?" In "CSS Quickies"...
Collapse
 
joel profile image
Joel Krause

Thanks for explaining this!

I’ve never gotten into using @supports for the simple fact I’d have to style the component twice with two different properties (and no if/else). I always just end up using Flexbox.

I dream for a day where I don’t have to worry about IE support 😅

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah, I hope that day will come soon!

But right now Safari is the bigger problem more often then IE is.

Collapse
 
joel profile image
Joel Krause

Yeah I’d agree with that!

I’ll just keep dreaming of the day where all browsers are equal 🙃

Collapse
 
mintuz profile image
Adam Bulmer

Very nice, I did not know about CSS.supports("xxx: xxx")

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Nice that you learned something :)

but please check

window.CSS && window.CSS.supprts

if your browser supports this.

Collapse
 
mohamedelidrissi_98 profile image
Mohamed ELIDRISSI

IE users must be happy knowing they cause this much pain to front-end developers

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

More often then not the users of IE can not update their browser because the IT at their company will not update their machines because of company politics.

Collapse
 
alais29dev profile image
Alfonsina Lizardo

Thanks for the post! I didn't know about this property

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Glad to teach something new :)
Thank you!