@Supports reegli kasutamine CSS-is

Kas olete kunagi kasutanud mõnda CSS-funktsioonide tuvastamise vormi, näiteks Modernizr oma CSS-i käitumise eristamiseks selle järgi, kas funktsiooni toetatakse? Vean kihla, et enamikul teist on. Kuigi CSS-i kaskaadne olemus võimaldab meil pakkuda paljude CSS-i funktsioonide varukoopiaid, lihtsalt kirjutades mitu deklaratsiooni, vajame mõnikord täpsemat kontrolli selle üle, mida rakendatakse, kui mõnda meie tipptasemel blingi pole.

Mõelge piir-pilt . Kui seda ei toetata, tahame tavaliselt pakkuda varuvarianti taust ja teistsugune piir , mida ei tohiks kohaldada, kui piir-pilt kehtib. Teine levinud juhtum on uued paigutusmoodulid (Flexbox, Grid Layout ja Regions); kui need pole saadaval, peame kodeerima alternatiivse paigutuse, kasutades omadusi, mis võivad nende tehnoloogiatega vastuolus olla, mis tähendab, et need ei saa eksisteerida koos.

Õnneks kujundas CSS WG juba mõnda aega tagasi elegantse ja puhta CSS-i lahenduse @support reegel . Selle reegli korral kirjutatakse piiri kujutise näide järgmiselt:

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

Seda nimetatakse funktsioonipäringuks, mis sarnaneb meediumipäringuga. Praktikas soovite kontrollida ka eesliidetud versioone:

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

Pealegi või , ja ja mitte , on saadaval operaatorid, mis võimaldavad igasugust keerukat boolean loogikat. Neid reegleid saab pesastada, mis lihtsustab teie koodi paljude keerukate funktsioonipäringute kasutamisel oluliselt.

Seal on saak. Seda pole mõistlik kasutada @support funktsioonide jaoks, mida brauserid enne toetamist toetasid @support ise. Seetõttu ei saa me seda veel paljude asjade jaoks kasutada. Kuid seda toetavad juba Firefox 22+, Chrome 28+ ja Opera 12.1+. Kui ka IE 11 ja Safari 7 seda toetavad, saame hakata neid kasutama funktsioonide jaoks, mis on sisse viidud nendes versioonides või pärast neid.

CSS töörühm mõistis ka, et eesliidete kasutamine @support lüüaks omamoodi eesmärgi (kuna autorid peaksid mitu reeglit mitu korda kirjutama). Seega, iga brauser, mis toetab @support teeb seda ilma eesliiteta. Sellist asja nagu pole @ -webkit-toetab . Kui brauserid polnud oma juurutamise osas kindlad, peitsid nad selle lipu taha, nagu Firefox tegi versioonides 17–27.

Võib-olla mõtlete, et see sobib CSS-i jaoks suurepäraselt, kuid see ei aita teil JavaScripti kaudu CSS-i funktsioone tuvastada, mida mõnikord on vaja. Õnneks on sellel ka oma elegantne JavaScripti API: CSS toetab () . Seda kasutatakse nii:

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

Seda funktsiooni on ka lihtne polüfillida, nii et selle saab teha kättesaadavaks brauserites, mis pole järele jõudnud. Loodetavasti suudame tulevikus tuvastada tuge teistele CSS-i funktsioonidele, näiteks @reeglid ja valijad, mitte ainult omadused ja väärtused.

Sõnad: Lea Verou

Lea Verou varem töötanud W3C arendaja advokaadina ning veedab praegu päevi oma esimese raamatu pealkirjaga CSS Secrets, mis peaks ilmuma koos O'Reillyga 2014. aastal

See artikkel ilmus algselt netiajakiri väljaanne 248.

Meeldis see? Loe neid!