Detecting CSS features with @supports

if('registerElement' in document){ … }
CSS feature detection support in caniuse
@supports (scroll-snap-type:mandatory){
.scroll {
scroll-snap-type: mandatory;
...
}
}
@supports (-webkit-scroll-snap-type: mandatory) or
(-ms-scroll-snap-type: mandatory) or
(scroll-snap-type: mandatory) {
.scroll {
-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
...
}
}
@supports not ((-webkit-scroll-snap-type: mandatory) or
(-ms-scroll-snap-type: mandatory) or
(scroll-snap-type: mandatory)) {
.scroll {
/* define a fallback */
...
}
}
if(!CSS.supports("scroll-snap-type", "mandatory"){
// load polyfill
}
if(!CSS.supports("(-webkit-scroll-snap-type: mandatory) or
(-ms-scroll-snap-type: mandatory) or
(scroll-snap-type: mandatory)"){
// load polyfill
}

--

--

The tech staff of OneBitAhead GmbH, putting the web stack to work. Here to discuss daily bits & bytes. #javascript #nodejs #webcomponents #rdbms #php

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
OneBitAhead

OneBitAhead

The tech staff of OneBitAhead GmbH, putting the web stack to work. Here to discuss daily bits & bytes. #javascript #nodejs #webcomponents #rdbms #php