CSS piegādātāja prefiksi

Kādi ir tie un kāpēc tos vajadzētu izmantot

CSS pārdevēju prefiksi, arī zināmi kā CSS pārlūka prefiksi, ir veids, kā pārlūku veidotājiem pievienot atbalstu jaunām CSS funkcijām, pirms šīs funkcijas tiek pilnībā atbalstītas visās pārlūkprogrammās. To var izdarīt tāda veida pārbaudes un eksperimentēšanas periodā, kad pārlūka ražotājs nosaka, kā tieši šīs jaunās CSS funkcijas tiks ieviestas. Šie priedēkļi kļuva ļoti populāri pirms dažiem gadiem cēloņā ar CSS3 .

Kad CCS3 pirmo reizi tika ieviests, vairākas satrauktas īpašības sāka dažādos pārlūkos skart dažādos laikos. Piemēram, Webkit pārlūkprogrammas (Safari un Chrome) bija pirmie, kas ieviesa dažas animācijas stila rekvizītus, piemēram, pārveidošanu un pāreju. Izmantojot piegādātāju prefiksu īpašības, tīmekļa izstrādātāji varēja izmantot šīs jaunās funkcijas savā darbā un tos uzreiz redzēt pārlūkprogrammās, kas tos atbalstīja, nevis gaidīt, kamēr katrs pārējais pārlūka ražotājs pietrūkst!

Tātad, no priekšpuses web izstrādātāja perspektīvas, pārlūka prefiksi tiek izmantoti, lai vietnē pievienotu jaunas CSS funkcijas, vienlaikus ņemot komfortu, apzinoties, ka pārlūkprogrammas atbalstīs šos stilus. Tas var būt īpaši noderīgi, ja dažādi pārlūku ražotāji ievieš īpašības nedaudz savādāk vai ar citu sintaksi.

CSS pārlūka prefiksi, kurus jūs varat izmantot (katrs no tiem ir raksturīgs citam pārlūkam), ir:

Vairumā gadījumu, lai izmantotu pavisam jaunu CSS stila īpašumu, jūs izmantojat standarta CSS īpašumu un pievienojiet prefiksu katram pārlūkam. Prefiksu versijas vienmēr būtu vispirms (jebkurā vēlamā secībā), kamēr parastais CSS īpašums būs pēdējais. Piemēram, ja vēlaties pievienot CSS3 pāreju uz savu dokumentu, izmantojiet pārejas īpašību, kā parādīts tālāk:

-webkit- pāreja: visi 4s vieglums;
-moz- pāreja: visi 4s vieglums;
-ms- pāreja: visi 4s vieglums;
-pārnese : visi 4s vieglums;
pāreja: visi 4s vieglums;

Piezīme. Atcerieties, ka dažām pārlūkprogrammām ir atšķirīgs sintakse ar dažām reālām īpašībām nekā citi, tādēļ neuztveri, ka pārlūkprogrammas prefiksu īpašums ir tieši tāds pats kā standarta īpašums. Piemēram, lai izveidotu CSS gradientu , jūs izmantojat lineāro gradienta īpašību. Firefox, Opera un mūsdienu Chrome un Safari versijas šo īpašumu lieto ar atbilstošu prefiksu, savukārt agrīnās Chrome un Safari versijās tiek izmantots prefiksa īpašums -webkit-gradients. Arī Firefox izmanto dažādas vērtības nekā standarta.

Iemesls tam, ka jūs vienmēr beidzat savu deklarāciju ar parasto CSS īpašumu bez iepriekšējas versijas, ir tāds, ka tad, kad pārlūkprogramma atbalsta šo noteikumu, tā to izmantos. Atcerieties, kā CSS tiek lasīts. Jaunākiem noteikumiem ir prioritāte salīdzinājumā ar iepriekšējiem, ja specifiskums ir vienāds, tādēļ pārlūks nolasīs noteikumu pārdevēja versiju un izmantos to, ja tas neatbalsta parasto, bet pēc tam tas ignorē pārdevēja versiju ar faktiskais CSS noteikums.

Pārdevējs prefiksi nav Hack

Kad pirmo reizi tika ieviesti pārdevēja prefiksi, daudzi tīmekļa speciālisti domāja, vai tie ir satricinājuši vai novirzīti atpakaļ uz tumšajām dienām, kad vietnes kods tika pārveidots, lai atbalstītu dažādas pārlūkprogrammas (atcerieties, ka ziņojumi " Šī vietne vislabāk tiek apskatīta IE "). Tomēr CSS pārdevēju prefiksi nav hacks, un jums nav jābūt atrunām par to izmantošanu savā darbā.

CSS hack izmanto citu elementu vai īpašumu ieviešanas trūkumus, lai iegūtu citu īpašumu, kas pareizi darbotos. Piemēram, kastīšu modelis kaprīze izmanto trūkumus balss ģimenes īpašuma analizēšanā vai pārlūkprogrammu parsēšanai, izmantojot parastu slīpsvītru (\). Bet šīs hacks tika izmantotas, lai novērstu problēmu, kāda ir atšķirība starp to, kā pārlūkprogramma Internet Explorer 5.5 apstrādāja kastīšu modeli un kā tas interpretēts Netscape, un tam nav nekāda sakara ar balss ģimenes stilu. Par laimi šie divi novecojuši pārlūkprogrammas ir tādas, kurām šajās dienās mums nav bažas.

Pārdevējs prefikss nav kaprīze, jo tas ļauj specifikācijai noteikt noteikumus par to, kā īpašums var tikt ieviests, vienlaikus ļaujot pārlūkprogrammas veidotājiem ieviest īpašumu citādā veidā, pārtraucot visu pārējo. Turklāt šie prefiksi strādā ar CSS īpašībām, kas galu galā būs daļa no specifikācijas . Mēs vienkārši pievienojam kādu kodu, lai agri piekļūtu īpašumam. Šis ir vēl viens iemesls, kāpēc jūs pārtraucat CSS kārtulu ar parastu, bezprefiksu īpašumu. Tādā veidā jūs varat nomest prefiksu versijas, kad tiek sasniegts pilnīgs pārlūka atbalsts.

Vai vēlaties uzzināt, kāda pārlūkprogramma atbalsta noteiktu funkciju? Mājas lapa CanIUse.com ir brīnišķīgs resurss, lai apkopotu šo informāciju un ļautu jums zināt, kuras pārlūkprogrammas un šo pārlūkprogrammu versijas šobrīd atbalsta šo funkciju.

Vendor prefiksi ir kaitinošas, bet pagaidu

Jā, tas var justies kaitinošam un atkārtotam, jo ​​rakstīšanai vajag 2-5 reižu rakstīt, lai tas darbotos visās pārlūkprogrammās, taču tā ir pagaidu situācija. Piemēram, tikai pirms dažiem gadiem, lai ierakstītu lodziņā noapaļoto stūri:

-moz-robežas rādiuss: 10px 5px;
-webkit-robeža-top-left-rādiuss: 10px;
-webkit-robeža-augšējā labā rādiuss: 5px;
-webkit-robeža-apakšējais-labais rādiuss: 10 pikseļi;
-webkit-robeža-apakšējais-kreisais rādiuss: 5px;
robežas rādiuss: 10px 5px;

Bet tagad, kad pārlūkprogrammas ir pilnībā izmantojušas šo funkciju, jums patiešām nepieciešama tikai standartizēta versija:

robežas rādiuss: 10px 5px;

Chrome ir atbalstījis CSS3 īpašumu kopš versijas 5.0, Firefox pievienoja to 4,0 versijai, Safari to pievienoja 5,0, Opera 10,5, iOS uz 4,0 un Android 2.1. Pat Internet Explorer 9 to atbalsta bez prefiksa (un IE 8 un zemāk to neatbalstīja ar vai bez priedēkļiem).

Atcerieties, ka pārlūkprogrammas vienmēr mainīsies un būs nepieciešama radoša pieeja, lai atbalstītu vecākās pārlūkprogrammas, ja vien jūs neplānojat veidot tīmekļa lapas, kas ir gadi, kas atrodas pēc vismodernākajām metodēm. Galu galā rakstot pārlūkprogrammas prefiksus ir daudz vienkāršāk nekā atrast un izmantot kļūdas, kuras, visticamāk, tiks noteiktas nākamajā versijā, pieprasot, lai jūs atrastu citu kļūdu, kas ļautu to izmantot utt.