@Supports-säännön käyttäminen CSS: ssä

Oletko koskaan käyttänyt jonkinlaista CSS-ominaisuuden tunnistusta, kuten Modernizr erottaa CSS: n käyttäytyminen sen perusteella, tuetaanko ominaisuutta? Lyön vetoa, että useimmilla teistä on. Vaikka CSS: n kaskadinen luonne antaa meille mahdollisuuden tarjota varmuuskopioita monille CSS-ominaisuuksille vain kirjoittamalla useita ilmoituksia, tarvitsemme joskus tarkempaa valvontaa sovellusten suhteen, kun joitain huippuluokan blingimme ei ole olemassa.

Harkitse reunakuva . Kun sitä ei tueta, haluamme yleensä tarjota varalla tausta ja erilainen rajalla , jota ei pitäisi soveltaa, kun reunakuva sovelletaan. Toinen yleinen tapaus on uudet asettelumoduulit (Flexbox, Grid Layout ja Regions); kun niitä ei ole saatavilla, meidän on koodattava vaihtoehtoinen asettelu ominaisuuksilla, jotka saattavat olla ristiriidassa näiden tekniikoiden kanssa, mikä tarkoittaa, että niitä ei voi olla rinnakkain.



Onneksi CSS WG suunnitteli tyylikkään ja puhtaan CSS-ratkaisun jonkin aikaa sitten @supports -sääntö . Tämän säännön mukaan reunakuvan esimerkki kirjoitettaisiin seuraavasti:



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

Tätä kutsutaan ominaisuuskyselyksi, joka on samanlainen kuin mediakysely. Käytännössä sinun kannattaa tarkistaa myös etuliiteversiot:

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

sitä paitsi tai , ja ja ei , operaattorit ovat käytettävissä, mikä sallii kaikenlaisen monimutkaisen loogisen logiikan. Nämä säännöt voidaan sisäkkäin, mikä yksinkertaistaa koodiasi huomattavasti käytettäessä monia monimutkaisia ​​ominaisuuskyselyjä.



Siellä on saalis. Se on viisasta käyttää @support ominaisuuksille, joita selaimet tukivat ennen tukemista @support itse. Siksi emme voi vielä käyttää sitä moniin asioihin. Firefox 22+, Chrome 28+ ja Opera 12.1+ tukevat sitä kuitenkin jo. Jos myös IE 11 ja Safari 7 tukevat sitä, voimme alkaa käyttää sitä ominaisuuksiin, jotka on otettu käyttöön näissä versioissa tai niiden jälkeen.

CSS WG huomasi myös, että etuliitteiden käyttö @support tavallaan voittaisi tarkoituksen (koska kirjoittajien olisi kirjoitettava useita sääntöjä useita kertoja). Siksi jokainen selain, joka tukee @support tekee niin ilman etuliitettä. Ei ole olemassa sellaista asiaa kuin @ -webkit-tukee . Kun selaimet eivät olleet varmoja toteutuksistaan, he piilottivat sen lipun taakse, kuten Firefox teki versioissa 17–27.

Saatat ajatella, että tämä on hienoa CSS: lle, mutta se ei auta sinua tunnistamaan CSS-ominaisuuksia JavaScriptin kautta, jota joskus tarvitaan. Onneksi siinä on myös oma tyylikäs JavaScript-sovellusliittymä: CSS.-tuki () . Sitä käytetään niin:



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

Tämä toiminto on myös helppo täyttää, joten se voidaan asettaa saataville selaimissa, jotka eivät ole kiinni. Toivottavasti voimme tulevaisuudessa havaita tuen muille CSS-ominaisuuksille, kuten @säännöt ja valitsimet pikemminkin kuin ominaisuudet ja arvot.

Sanat: Lea Verou

Lea Verou Aikaisemmin työskennellyt kehittäjäasianajajana W3C: ssä ja viettää nykyään päivät kirjoittaessaan ja suunnitellessaan ensimmäistä kirjaansa nimeltä CSS Secrets, joka on tarkoitus julkaista O'Reillyn kanssa vuonna 2014

Tämä artikkeli ilmestyi alun perin nettilehti numero 248.

Piditkö tästä? Lue nämä!