Mis on CSS-i pakkuja või brauseri prefiksid?

CSS-i tarnijate eesliited, mõnikord tuntud ka kui või CSS brauseri prefiksid on viis, kuidas brauseritootjad saavad tuge lisada uued CSS-funktsioonid enne, kui neid funktsioone kõigis brauserites täielikult toetatakse. Seda võidakse teha omamoodi testimise ja katsetamise perioodil, kus brauseri tootja määrab täpselt, kuidas neid uusi CSS-i funktsioone rakendatakse. Need eesliited said väga populaarseks CSS3 Paar aastat tagasi.

Hankija eesliidete päritolu

Kui CCS3 esmakordselt kasutusele võeti, hakkasid paljud brauserid erinevatel aegadel tabama mitut põnevil olevat omadust. Näiteks võtsid veebikomplekti toega brauserid (Safari ja Chrome) esimestena kasutusele mõned animatsioonistiilis atribuudid, nagu teisendamine ja üleminek. Kasutades müüja eesliiteid omadused, said veebidisainerid neid uusi funktsioone oma töös kasutada ja brauserites näha mis neid kohe toetas, selle asemel, et oodata, kuni kõik teised brauseritootjad tabavad üles!

Levinud eesliited

Nii et esiotsa veebiarendaja vaatepunktist kasutatakse brauseri eesliiteid uute CSS-funktsioonide lisamiseks saidile, tundes samal ajal mugavust, teades, et brauserid toetavad neid stiile. 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 (millest igaüks on omane eri brauserile), on järgmised:

• Android:

  -veebikomplekt

• Chrome:

  -veebikomplekt

• Firefox:

  -moz-

• Internet Explorer:

  -Prl-

• iOS:

  -veebikomplekt

• Ooper:

  -o-

• Safari:

  -veebikomplekt

Prefiksi lisamine

Enamasti võtate uhiuue CSS-stiilis atribuudi kasutamiseks CSS-i standardvara ja lisate iga brauseri jaoks eesliite. Eesliidetud versioonid oleksid alati esimesed (soovitud järjekorras), samas kui tavaline CSS-omadus jääb viimaseks. Näiteks kui soovite oma dokumendile lisada CSS3 ülemineku, kasutaksite ülemineku omadust, nagu allpool näidatud:

-webkit-üleminek: kõik neljakesi hõlbustavad;
-moz-üleminek: kõik 4-d lihtsustavad;
-ms-üleminek: kõik 4-sed kergendavad;
-o-üleminek: kõik 4-sed kergendavad;
üleminek: kõik 4-sed kergendavad; 

Pidage meeles, et mõnel brauseril on teatud omaduste jaoks erinev süntaks kui teistel, seega ärge arvake, et atribuudi brauseri eesliidetud versioon on täpselt sama mis tavaline atribuut. Näiteks CSS-i gradiendi loomiseks kasutage atribuuti linear-gradient. Firefox, Opera ning Chrome'i ja Safari tänapäevased versioonid kasutavad seda atribuuti koos sobiva eesliitega, Chrome'i ja Safari varasemad versioonid aga eesliidet atribuut -webkit-gradient.

Samuti kasutab Firefox tavapärasest erinevaid väärtusi.

Põhjus, miks lõpetate deklaratsiooni alati CSS-i atribuudi tavalise, eesliiteta versiooniga, on nii, et kui brauser reeglit toetab, kasutab ta seda ka. Pidage meeles, kuidas CSS-i loetakse. Hilisemad reeglid on varasemate reeglite ees ülimuslikud, kui spetsiifilisus on sama, nii et brauser loeks reegel ja kasutage, et kui see ei toeta tavalist, kuid kui see on nii, siis alistab see hankija versiooni tegeliku CSS-iga reegel.

Pakkuja eesliited pole häkkimine

Kui müüja eesliited esmakordselt kasutusele võeti, mõtlesid paljud veebiprofid, kas need on häkkimine või a liikuge tagasi pimedatele aegadele, kui erinevad brauserid toetavad veebisaidi koodi hargnemist (pidage seda meeles "Seda saiti saab kõige paremini vaadata IE-s"sõnum". CSS-i müüjate eesliited ei ole siiski häkkimised ja nende kasutamisel oma töös ei tohiks teil olla mingeid reservatsioone.

CSS-i häkkimine kasutab teise elemendi või atribuudi rakendamisel esinevaid vigu, et saada teine ​​vara õigesti töötama. Näiteks kasutas kasti mudeli häkk puudusi häälperekonna sõelumisel või selles, kuidas brauserid tagasilööke sõeluvad \. Kuid nende häkkide abil lahendati erinevus selle vahel, kuidas Internet Explorer 5.5 kasti mudelit käsitles Netscape tõlgendasid seda ja neil pole hääle perekonnastiiliga midagi pistmist. Õnneks on need kaks aegunud brauserit need, kellega me tänapäeval ei pea muretsema.

Pakkuja eesliide ei ole häkkimine, sest see võimaldab spetsifikatsioonil seadistada reegleid selle kohta, kuidas vara saab rakendada, võimaldades samal ajal brauseri valmistajatel atribuuti teistmoodi rakendada, ilma et kõik lõhuks muud. Lisaks töötavad need eesliited CSS-i omadustega lõpuks osa spetsifikatsioonist. Lisame varale varakult juurdepääsu saamiseks lihtsalt mõne koodi. See on veel üks põhjus, miks lõpetate CSS-reegli tavalise, eesliiteta atribuudiga. Nii saate eeltäidetud versioonid loobuda, kui brauseri täielik tugi on saavutatud.

Müüja eesliited on tüütud, kuid ajutised

Jah, võib tunduda tüütu ja korduv, kui peate kõikides brauserites töötamiseks atribuudid 2–5 korda kirjutama, kuid see on ajutine olukord. Näiteks vaid paar aastat tagasi tuli kastile ümardatud nurga seadmiseks kirjutada:

-moz-piiri-raadius: 10px 5px;
-veebikomplekt-piir-ülemine-vasak-raadius: 10px;
-veebikomplekt-piir-ülemine-parem-raadius: 5px;
-veebikomplekt-ääris-paremal-raadius: 10px;
-veebikomplekt-piir-all-vasak-raadius: 5px;
piiri raadius: 10 pikslit 5 pikslit; 

Kuid nüüd, kui brauserid on seda funktsiooni täielikult toetanud, vajate tegelikult ainult standardiseeritud versiooni:

piiri raadius: 10 pikslit 5 pikslit; 

Chrome toetab atribuuti CSS3 alates versioonist 5.0, Firefox lisas versiooni 4.0, Safari 5.0, Opera 10.5, iOS sisse 4.0 ja Android versioonis 2.1. Isegi Internet Explorer 9 toetab seda ilma eesliiteta (ja IE 8 ja vanemad versioonid ei toetanud seda koos ega ilma eesliited).

Pidage meeles, et brauserid muutuvad alati ja vanemate brauserite toetamiseks on vaja loovat lähenemist, kui te ei kavatse seda teha veebilehtede ehitamine mis jäävad aastate taha kõige moodsamatest meetoditest. Lõppkokkuvõttes on brauseri eesliidete kirjutamine palju lihtsam kui tulevases versioonis tõenäoliselt fikseeritavate vigade leidmine ja kasutamine, eeldades, et leiate veel ühe vea, mida kasutada.