Ką jie yra ir kodėl turėtumėte juos naudoti
CSS tiekėjų prefiksai, taip pat kažkada vadinami arba CSS naršyklės prefiksai, yra būdas naršyklių kūrėjams pridėti naujų CSS funkcijų palaikymą, kol tos funkcijos visiškai palaikomos visose naršyklėse. Tai gali būti atliekama atliekant tam tikrą bandymų ir eksperimentavimo laikotarpį, kai naršyklės gamintojas tiksliai nustato, kaip bus įgyvendintos šios naujos CSS funkcijos. Šie prefiksai tapo labai populiarūs prieš kelerius metus kilusį CSS3 .
Kai CCS3 pirmą kartą buvo įvestas, keletą kartų išsiplėtė įvairūs sužadinimo savybės. Pavyzdžiui, "webkit" naršyklės ("Safari" ir "Chrome") buvo pirmosios, kurios pristatė kai kurias animacijos stiliaus savybes, tokias kaip transformavimas ir perėjimas. Naudodamiesi tiekėjo išankstinėmis savybėmis, interneto dizaineriai galėjo naudotis šiomis naujomis funkcijomis savo darbe ir matyti jas naršyklėse, kurios juos palaikė, o ne laukti, kol kiekvienas kitas naršyklės gamintojas pasivytų.
Taigi, atsižvelgiant į priekinio interneto kūrėjo perspektyvą, naršyklės prefiksai naudojami tam, kad į svetainę pridėti naujų CSS savybių, žinant, kad naršyklės palaikys šiuos stilius. Tai gali būti ypač naudinga, kai skirtingi naršyklės gamintojai įgyvendina savybes šiek tiek skirtingais būdais arba skirtingomis sintaksėmis.
CSS naršyklės prefiksai, kuriuos galite naudoti (kiekvienas iš kurių yra specifinis kitai naršyklei) yra:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Daugeliu atvejų, norint naudoti visiškai naują CSS stiliaus nuosavybę, jūs naudojate standartinę CSS nuosavybę ir pridedate prefiksą kiekvienai naršyklei. Prefiksinės versijos visada būna pirmosios (bet kokia tvarka, kurią norite), o įprasta CSS nuosavybė ateis paskiausiai. Pavyzdžiui, jei norite pridėti CSS3 perėjimą prie savo dokumento, naudokite perėjimo nuosavybę, kaip parodyta žemiau:
-webkit- transition: visi 4s lengvai;
-moz- perėjimas: visi 4s lengvumas;
-ms- perėjimas: visi 4s lengvai;
-o perėjimas: visi 4s lengvumas;
perėjimas: visi 4s lengvai;
Pastaba: nepamirškite, kad kai kuriose naršyklėse yra skirtingų sintaksių tam tikrų savybių atžvilgiu, o ne kiti, todėl negalima manyti, kad naršyklės prefiksinė nuosavybės versija yra tokia pati kaip standartinė savybė. Pavyzdžiui, norėdami sukurti CSS gradientą , naudojate linijinio gradiento nuosavybę. "Firefox", "Opera" ir šiuolaikiškos "Chrome" ir "Safari" versijos naudoja tą nuosavybę su atitinkamu prefiksu, o ankstyvo "Chrome" ir "Safari" versijose naudojamas iš anksto pateiktas nuosavybės -webkit-gradientas. Be to, "Firefox" naudoja skirtingas vertes nei standartinės.
Priežastis, kodėl visada užbaigiate savo deklaraciją su įprasta, be iš anksto pateiktos CSS versijos, yra ta, kad kai naršyklė palaiko taisyklę, ji naudos tą patį. Prisiminti, kaip skaitoma CSS. Vėliau pateiktos taisyklės turi pirmenybę prieš ankstesnes, jei specifiškumas yra tas pats, todėl naršyklė turėtų skaityti taisyklę tiekėjo versijoje ir ją naudoti, jei ji nepalaiko įprastos, tačiau jei ji bus, ji pakeis gamintojo versiją su faktinė CSS taisyklė.
Tiekėjo prefiksai nėra hackas
Kai pirmą kartą pristatė gamintojo prefiksus, daugelis interneto specialistų sužinojo, ar jie buvo nulaužti ar grįžti į tamsias dienas, kai svetainės kodas buvo sugadintas, kad būtų palaikomos skirtingos naršyklės (nepamirškite tų pranešimų " Ši svetainė geriausiai matoma" IE ). Tačiau CSS tiekėjų prefiksai nėra hacks, todėl neturėtumėte jokių abejonių dėl jų naudojimo jūsų darbe.
"CSS" įsilaužimui naudojami kito elemento ar nuosavybės įgyvendinimo trūkumai, siekiant gauti kitą nuosavybę tinkamai dirbti. Pvz., "Hack" modelio "Hack" išnaudojo balso šeimos nuosavybės analizės trūkumus arba tai, kaip naršyklės analizuoja grįžtamąsias brūkšnius (\). Tačiau šie hacks buvo naudojami siekiant išspręsti skirtumą tarp to, kaip "Internet Explorer 5.5" tvarkė dėžės modelį ir kaip "Netscape" jį interpretavo, ir neturi nieko bendra su balso šeimos stiliumi. Laimei, šios dvi pasenusios naršyklės yra tokios, dėl kurių šiomis dienomis nesimatome.
Tiekėjo prefiksas nėra sugadintas, nes jis leidžia specifikacijoje nustatyti taisykles, kaip gali būti įdiegtas turtas, tuo pačiu metu leidžiant naršyklės kūrėjams įvesti nuosavybę kitaip, be kitų trūkumų. Be to, šie prefiksai dirba su CSS savybėmis, kurios galiausiai bus specifikacijos dalis . Mes tiesiog pridedame tam tikrą kodą, kad galėtume anksti pasiekti nuosavybę. Tai yra dar viena priežastis, kodėl baigiate CSS taisyklę su įprasta, nefiksuota nuosavybe. Tokiu būdu galite ištrinti iš anksto pateiktas versijas, kai pasiekiama pilnos naršyklės palaikymas.
Norite sužinoti, kaip naršyklė palaiko tam tikrą funkciją? Interneto svetainė CanIUse.com yra puikus šaltinis, skirtas rinkti šią informaciją ir leisti jums sužinoti, kurios naršyklės ir kokios šių naršyklių versijos šiuo metu palaiko šią funkciją.
Tiekėjo prefiksai yra erzina, bet laikina
Taip, jis gali jaustis erzina ir pasikartojantis, kad turėtumėte parašyti savybes 2-5 kartus, kad jis veiktų visose naršyklėse, bet tai laikina situacija. Pvz., Tik prieš kelerius metus norėtumėte parašyti apvalią kampą dėžutėje:
-moz-sienos spindulys: 10px 5px;
-webkit-border-top-left-spindulys: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-spindulys: 5px;
sienos spindulys: 10 px 5 px;
Tačiau dabar, kai naršyklės visapusiškai palaiko šią funkciją, tikrai reikia tik standartinės versijos:
sienos spindulys: 10 px 5 px;
"Chrome" palaikė CSS3 nuosavybę nuo 5.0 versijos, "Firefox" pridėjo ją 4.0 versijoje, "Safari" įtraukė į 5.0 versiją, "Opera" - 10,5, "iOS" - 4.0 ir 2.1 "Android". Netgi "Internet Explorer 9" palaiko jį be prefikso (ir "IE 8" ir "žemiau" nepalaikė jo su priešdėliu ar be jo).
Nepamirškite, kad naršyklės visada bus keičiasi, o kūrybiški požiūris į senesnių naršyklių palaikymą reikės, nebent planuojate kurti tinklalapius, kurie yra seniausi iš naujausių metodų. Galų gale rašant naršyklės prefiksus yra daug lengviau, nei rasti ir išnaudoti klaidas, kurias greičiausiai bus galima nustatyti būsimoje versijoje, reikalaujant rasti kitą klaidą ir pan.