Mis need on ja miks peaksite neid kasutama
CSS-i müüja eesliited, mis on ka mõnikord tuntud või CSS- brauseri eesliited, on brauserite jaoks võimalus uutele CSS-funktsioonidele tugiteenuste lisamiseks, enne kui need funktsioonid on kõikides brauserites täielikult toetatud. Seda võib teha teatud tüüpi testimise ja katsetamise perioodil, kui brauseri tootja määrab täpselt, kuidas need uued CSS-i funktsioonid rakendatakse. Need eesliited sai paar aastat tagasi väga populaarseks CSS3 tõusu.
Kui CCS3 esmakordselt kasutusele võeti, hakkasid erinevad brauserid erinevatel aegadel tabama mitmeid põnevaid omadusi. Näiteks olid Webkit-powered brauserid (Safari ja Chrome) esimesed, kes tutvustasid mõned animatsioon-stiili omadused, nagu näiteks teisendamine ja üleminek. Kasutades tarnija eelmääratud omadusi, võisid veebidisainerid oma töös neid uusi funktsioone kasutada ja neid nägid brauserites, mis neid kohe toetasid, selle asemel, et oodata, kui iga teine brauser tootja järele jõuab!
Nii et esiotsa veebiarendaja perspektiivist kasutatakse brauseri eesliiteid, et lisada CSS-i uusi funktsioone saidile, olles samal ajal rahul, teades, et brauserid neid stiile toetavad. See võib olla eriti kasulik, kui erinevad brauseritootjad rakendavad omadusi veidi erineval viisil või erineva süntaksiga.
CSS-i brauseri eesliited, mida saate kasutada (igaüks neist on spetsiifiline mõne muu brauseri jaoks), on järgmised:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Enamikul juhtudel võite kasutada täiesti uue CSS-stiili vara, võtke standardse CSS-i vara ja lisage iga brauseri jaoks eesliide. Esialgne versioon oleks alati esimene (igal soovitud järjekorras), samas kui tavaline CSS-i vara saabub viimati. Näiteks kui soovite oma dokumendile lisada CSS3 ülemineku, kasutage üleminekuomadust järgmiselt:
-webkit- üleminek: kõik 4- sed lihtsust;
-moz- üleminek: kõik 4s kerge;
-ms- üleminek: kõik 4s kerge;
-o- üleminek: kõik 4-kordsed;
üleminek: kõik 4s kerge;
Märkus. Pidage meeles, et mõnel brauseril on teatud omaduste puhul erinev süntaks, kui teised seda teevad, seega ei usu, et vara brauseri eelmääratud versioon on täpselt sama standardvarustusega. Näiteks CSS-i gradiendi loomiseks kasutate lineaarset gradiendivaradust. Chrome, Safari ja Firefox, Opera ja nüüdisaegsed versioonid kasutavad seda omadust koos sobiva eesliitega, samas kui Chrome'i ja Safari varasemad versioonid kasutavad eelmääratud omadusi -webkit-gradient. Samuti kasutab Firefox erinevaid väärtusi kui standardsed.
Põhjus, et alati oma deklaratsiooni lõpetate CSS-i vara tavapärase mitte-eelseadistatud versiooniga, nii et kui brauser toetab reeglit, kasutab see seda. Pea meeles, kuidas CSS-i lugeda. Hilisemad reeglid eelistavad varasemaid, kui spetsiifilisus on sama, nii et brauser loeb reegli tarnija versiooni ja kasutab seda, kui see ei toeta tavalist, kuid kui see on nii, siis ignoreerib see müüja versiooni tegelik CSS reegel.
Vendori eelvormid pole hack
Kui esmakordselt kasutusele võeti müüja eesliite, mõistsid paljud veebiteenuste spetsialistid, kas nad on häkkinud või pöörduvad tagasi erinevate veebibrauserite toetamiseks veebisaidi koodi levitamise pimedatele päevadele (pidage meeles neid, mida " seda saiti kõige paremini IE-i sõnumites vaadatakse "). Kuid CSS-i müüjate eesliited ei ole hacks, ja teil ei tohiks oma töös kasutada reservatsioone.
CSS-i häkkimine kasutab teise elemendi või vara rakendamisel puudusi, et teise vara korralikult töötada. Näiteks häkitas kasti mudel häkkinud hääleperekonna vara parsimisel või brauseri parsimisel tagasilöögilõigud (\). Kuid neid happeid kasutati probleemi lahendamiseks, kuidas Internet Explorer 5.5 käsitses kasti mudelit ja kuidas Netscape seda tõlgendas, ja neil pole häältüüpide stiiliga midagi pistmist. Õnneks on need kaks vananenud brauserit need, kellel ei ole tänapäeval probleeme.
Müüja eesliide ei ole häkkimine, sest see võimaldab spetsifikatsioonil kehtestada reegleid selle kohta, kuidas vara rakendada, võimaldades samal ajal brauseritootjatel vara rakendada muul viisil, muul viisil purustamata. Lisaks sellele töötavad need eesliited CSS-i omadustega, mis lõpuks on osa spetsifikatsioonist . Me lihtsalt lisame mõne koodi vara juurdepääsu saamiseks varale. See on veel üks põhjus, miks te lõpetate CSS-i reegli tavapärase mitte-eelseadistatud varaga. Sel viisil saate eelinstallitud versioonid katkestada, kui täispaketi tugi on saavutatud.
Kas soovite teada, mis brauser teatud funktsiooni toetab? Veebisait CanIUse.com on suurepärane ressurss selle teabe kogumiseks ja annab teile teada, millised brauserid ja millised brauserite versioonid praegu funktsiooni toetavad.
Vendori eesliited on tüütu, kuid ajutised
Jah, võib tunduda tüütu ja korduv, et kirjutada omadused 2-5 korda, et see töötab kõigis brauserites, kuid see on ajutine olukord. Näiteks just paar aastat tagasi, et panna ümmargune nurk karpi, millele pidi kirjutama:
-moz-piiri raadius: 10px 5px;
-webkit-piir-top-left-raadius: 10px;
-webkit-piir-top-right-raadius: 5px;
-webkit-piir-alt-parem-raadius: 10px;
-webkit-piir-alt-vasak-raadius: 5px;
piiriraadius: 10px 5px;
Kuid nüüd, kui brauserid on selle funktsiooni täielikult toetanud, on teil vaja ainult standardset versiooni:
piiriraadius: 10px 5px;
Chrome on toetanud CSS3-omadust alates versioonist 5.0, Firefox lisas selle versioonile 4.0, Safari lisas selle 5,0-le, operaatorile 10,5-ni, iOS-i versus 4.0 ja Android-le 2.1-ni. Isegi Internet Explorer 9 toetab seda ilma eesliiduta (ja IE 8 ja madalam ei toeta seda koos eesliidetega või ilma).
Pidage meeles, et brauserid muutuvad alati muutuvaks ja vanemad brauserid toetavad loomingulisi lähenemisviise, kui te ei kavatse ehitada veebisaite, mis on aastaid järgima kõige kaasaegsemaid meetodeid. Lõpuks on brauseri prefikside kirjutamine palju lihtsam kui tulevaste versioonide puhul kõige tõenäolisemalt fikseeritavate vigade otsimine ja kasutamine, nõudes, et leiate mõne muu viga ja nii edasi.