Sådan bruges @supports-reglen i din CSS

Har du nogensinde brugt en eller anden form for detektering af CSS-funktioner som f.eks Modernizr for at differentiere din CSS's adfærd baseret på, om en funktion understøttes? Jeg vedder på, at de fleste af jer har det. Selvom CSS's kaskaderende karakter lader os give tilbagefald til mange CSS-funktioner bare ved at skrive flere erklæringer, har vi nogle gange brug for mere detaljeret kontrol over, hvad der anvendes, når nogle af vores banebrydende bling ikke er der.

Overveje grænsebillede . Når det ikke understøttes, vil vi normalt give et tilbagefald baggrund og en anden grænse , som ikke skal gælde når grænsebillede gælder. En anden almindelig sag er nye layoutmoduler (Flexbox, Grid Layout og Regions); når de ikke er tilgængelige, skal vi kode et alternativt layout ved hjælp af egenskaber, der kan være i konflikt med disse teknologier, hvilket betyder, at de ikke kan eksistere samtidig.



Heldigvis designet CSS WG en elegant og ren CSS-løsning for et stykke tid tilbage kaldet @supports regel . Med denne regel ville grænsebilledeksemplet blive skrevet som:



.foo { border: 15px solid transparent; border-image: url(fancyborders.png) 33%; } @supports not (border-image: url(foo.png) 33%) { .foo { border: 3px solid rgba(0,0,0,.3); background: url(alternative-bg.png) beige; } }

Dette kaldes en 'funktionsforespørgsel', der svarer til en medieforespørgsel. I praksis vil du også tjekke for præfikserede versioner:

@supports not (border-image: url(foo.png) 33%) or (-moz-border-image: url(foo.png) 33%) or (-webkit-border-image: url(foo.png) 33%) { ...

Udover eller , og og ikke , operatører er tilgængelige, hvilket giver mulighed for enhver form for kompleks boolsk logik. Disse regler kan indlejres, hvilket i høj grad forenkler din kode, når du bruger mange komplekse funktionsforespørgsler.



Der er en fangst. Det er uklogt at bruge @bakker op til funktioner, som browsere understøtter, før de understøtter @bakker op sig selv. Derfor kan vi ikke bruge det til mange ting endnu. Det understøttes dog allerede af Firefox 22+, Chrome 28+ og Opera 12.1+. Hvis IE 11 og Safari 7 også understøtter det, kan vi begynde at bruge det til funktioner, der er introduceret i eller efter disse versioner.

CSS WG indså også, at brug af præfikser til @bakker op ville form for at besejre formålet (da forfattere skulle skrive flere regler flere gange). Derfor hver browser, der understøtter @bakker op gør det uden noget præfiks. Der er ikke sådan noget som @ -webkit-understøtter . Da browsere var usikre på deres implementeringer, skjulte de det bag et flag, som Firefox gjorde i version 17-27.

Du tænker muligvis, at dette er fantastisk til CSS, men det hjælper dig ikke med at opdage CSS-funktioner via JavaScript, som det undertiden er nødvendigt. Heldigvis kommer den også med sin egen elegante JavaScript API: CSS.supports () . Det bruges som sådan:



if (CSS.supports('border-image', 'url(foo.png) 33%')) { ... }

Denne funktion er også let at polyfylde, så den kan gøres tilgængelig i browsere, der ikke har fanget op. Forhåbentlig kan vi i fremtiden opdage understøttelse af andre CSS-funktioner, såsom @ regler og vælgere, snarere end blot egenskaber og værdier.

Ord: Lea Verou

Lea Verou har tidligere arbejdet som udvikleradvokat på W3C og bruger i øjeblikket sine dage på at skrive og designe sin første bog med titlen CSS Secrets, som skal udgives med O'Reilly i 2014

Denne artikel opstod oprindeligt i netmagasin udgave 248.

Kan du lide dette? Læs disse!