A @supports szabály használata a CSS-ben

Használt-e már valamilyen CSS-funkció-észlelőt, mint pl Modernizr megkülönböztetni a CSS viselkedését az alapján, hogy támogatott-e egy funkciót? Fogadok, hogy a legtöbbeteknek van. Noha a CSS lépcsőzetes jellege lehetővé teszi számunkra, hogy számos deklaráció megírásával számos CSS-funkcióval rendelkezzenünk, néha részletesebb ellenőrzésre van szükségünk arra vonatkozóan, hogy mit alkalmazunk, ha néhány élvonalbeli blingünk nincs meg.

Fontolgat határ-kép . Ha nem támogatott, akkor általában tartalékot akarunk nyújtani háttér és egy más határ , amelyet nem szabad alkalmazni határ-kép vonatkozik. Egy másik gyakori eset az új elrendezési modulok (Flexbox, Grid Layout és Regions); amikor nem állnak rendelkezésre, alternatív elrendezést kell kódolnunk olyan tulajdonságok használatával, amelyek ütközhetnek ezekkel a technológiákkal, ami azt jelenti, hogy nem létezhetnek együtt.

Szerencsére a CSS WG egy elegáns és tiszta CSS megoldást tervezett egy ideje, a @supports szabály . Ennél a szabálynál a border-image példa a következőképpen íródik:



.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; } }

Ezt úgy hívják, hogy „szolgáltatás lekérdezés”, amely hasonló a média lekérdezéshez. A gyakorlatban ellenőriznie kell az előtagú verziókat is:

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

kívül vagy , és és nem , operátorok állnak rendelkezésre, lehetővé téve bármilyen komplex logikai logikát. Ezek a szabályok beágyazhatók, ami nagyban leegyszerűsíti a kódot, amikor sok összetett szolgáltatáskérdést használ.

Van egy fogás. Nem okos használni @supports a böngészők által támogatott funkciókhoz @supports maga. Ezért még nem használhatjuk sok mindenre. Ezt azonban már támogatja a Firefox 22+, a Chrome 28+ és az Opera 12.1+. Ha az IE 11 és a Safari 7 is támogatja, akkor elkezdhetjük használni az ezen verzióknál vagy azok után bevezetett funkciókhoz.

A CSS WG arra is rájött, hogy a @supports valahogy legyőzné a célt (mivel a szerzőknek többször is több szabályt kellene írniuk). Ezért minden böngésző, amely támogatja @supports előtag nélkül teszi. Nincs olyan, hogy @ -webkit-support . Amikor a böngészők nem voltak biztosak a megvalósításukban, egy zászló mögé rejtették, mint a Firefox a 17–27.

Lehet, hogy arra gondolsz, hogy ez nagyszerű a CSS-hez, de nem segít a CSS-funkciók észlelésében a JavaScript segítségével, amire néha szükség van. Szerencsére saját elegáns JavaScript API-val is rendelkezik: CSS-támogatás () . Így használják:

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

Ezt a funkciót is könnyen kitöltheti, így olyan böngészőkben is elérhetővé tehető, amelyek még nem értek utol. Remélhetőleg a jövőben képesek leszünk felfedezni más CSS-szolgáltatások támogatását, mint pl @rules és szelektorok, nem csak tulajdonságok és értékek.

Szavak: Lea Verou

Lea Verou korábban a W3C fejlesztői szószólójaként dolgozott, és napjait azzal tölti, hogy megírja és megtervezi első könyvét, a CSS titkai címmel, amelyet 2014-ben fognak megjelenni az O'Reilly-nél.

Ez a cikk eredetileg itt jelent meg net magazin 248. szám

Tetszett ez? Olvassa el ezeket!