Kas ir CSS piegādātāja vai pārlūkprogrammas prefiksi?

CSS pārdevēja prefiksi, kurus dažreiz dēvē arī par vai CSS pārlūkprogrammas prefiksi ir veids, kā pārlūkprogrammu veidotāji var pievienot atbalstu jaunas CSS funkcijas pirms šīs funkcijas tiek pilnībā atbalstītas visās pārlūkprogrammās. To var izdarīt sava veida testēšanas un eksperimentēšanas laikā, kad pārlūkprogrammas ražotājs precīzi nosaka, kā šīs jaunās CSS funkcijas tiks ieviestas. Šie priedēkļi kļuva ļoti populāri, pieaugot CSS3 Pirms dažiem gadiem.

Pārdevēja prefiksu izcelsme

Kad CCS3 pirmo reizi tika ieviests, vairāki satraukti īpašumi dažādos laikos sāka skart dažādas pārlūkprogrammas. Piemēram, pārlūkprogrammas, kuras nodrošina Webkit (Safari un Chrome), bija pirmās, kas ieviesa dažus animācijas stila rekvizītus, piemēram, pārveidošanu un pāreju. Izmantojot piegādātāja prefiksu īpašības, tīmekļa dizaineri varēja izmantot šīs jaunās funkcijas savā darbā un tos redzēt pārlūkprogrammās kas viņus atbalstīja uzreiz, tā vietā, lai gaidītu, kamēr visi pārējie pārlūkprogrammu ražotāji to noķer uz augšu!

Parastie prefiksi

Tātad no front-end tīmekļa izstrādātāja viedokļa pārlūka prefiksi tiek izmantoti, lai vietnei pievienotu jaunas CSS funkcijas, vienlaikus nodrošinot komfortu, zinot, 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 īpašumus ievieš nedaudz atšķirīgā veidā vai ar citu sintaksi.

CSS pārlūkprogrammas prefiksi, kurus varat izmantot (katrs no tiem ir raksturīgs citam pārlūkam), ir šādi:

• Android:

  -webkit-

• Chrome:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -jaunkundze-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Prefiksa pievienošana

Vairumā gadījumu, lai izmantotu pavisam jaunu CSS stila rekvizītu, jums jāieņem standarta CSS rekvizīts un katram pārlūkam jāpievieno prefikss. Prefiksētās versijas vienmēr būs pirmās (jebkurā vēlamajā secībā), kamēr parastais CSS rekvizīts būs pēdējais. Piemēram, ja vēlaties dokumentam pievienot CSS3 pāreju, izmantojiet pārejas rekvizītu, kā parādīts zemāk:

-webkit-pāreja: visi četri vieglāk;
-moz-pāreja: visi 4 ir viegli;
-ms-pāreja: visi četri vieglāk;
-o-pāreja: visi četri vieglāk;
pāreja: visi 4 vieglāk; 

Atcerieties, ka dažās pārlūkprogrammās dažām īpašībām ir atšķirīga sintakse nekā citām, tāpēc neuzskatiet, ka pārlūkprogrammas prefiksā esošā īpašuma versija ir tieši tāda pati kā standarta īpašība. Piemēram, lai izveidotu CSS gradientu, izmantojiet lineārā gradienta rekvizītu. Firefox, Opera, kā arī mūsdienu Chrome un Safari versijas izmanto šo īpašumu ar atbilstošu prefiksu, savukārt Chrome un Safari agrīnās versijās tiek izmantots prefikss property -webkit-gradient.

Arī Firefox izmanto atšķirīgas vērtības nekā standarta.

Iemesls tam, ka deklarācija vienmēr tiek pārtraukta ar parasto CSS rekvizīta prefiksu, ir tāds, ka, pārlūkprogrammai atbalstot kārtulu, tā to izmantos. Atcerieties, kā tiek lasīta CSS. Vēlākās kārtulas ir prioritāras salīdzinājumā ar iepriekšējām, ja specifika ir vienāda, tāpēc pārlūkprogramma nolasīs pārdevēja versijas noteikums un izmantojiet, ka, ja tas neatbalsta parasto, bet, tiklīdz tas būs, tas pārspēs pārdevēja versiju ar faktisko CSS likums.

Pārdevēja prefiksi nav kapāt

Kad pirmo reizi tika ieviesti pārdevēju prefiksi, daudziem tīmekļa profesionāļiem radās jautājums, vai tie ir kapātāji vai pārejiet atpakaļ uz tumšajām dienām, kad tīmekļa vietne tika izveidota, lai atbalstītu dažādas pārlūkprogrammas (atcerieties to "Šo vietni vislabāk var apskatīt IE"ziņojums". CSS pārdevēju prefiksi tomēr nav kapātāji, un jums nevajadzētu būt iebildumiem par to izmantošanu savā darbā.

CSS uzlaušana izmanto cita elementa vai īpašuma ieviešanas trūkumus, lai panāktu, ka cits īpašums darbojas pareizi. Piemēram, lodziņa modeļa uzlaušana izmantoja trūkumus balss saimes parsēšanā vai pārlūkprogrammu parsēšanas pretējā slīpsvītrā \. Bet šie kapātāji tika izmantoti, lai novērstu atšķirību starp to, kā Internet Explorer 5.5 rīkojās ar kastes modeli un kā Netscape interpretēja to, un tam nav nekāda sakara ar balss ģimenes stilu. Par laimi, šīs divas novecojušās pārlūkprogrammas mūsdienās nav jāuztraucas.

Pārdevēja prefikss nav uzlaušana, jo tas ļauj specifikācijai izveidot kārtulas, kā īpašumu varētu ieviest, tajā pašā laikā ļaujot pārlūkprogrammu veidotājiem īpašumu ieviest citādi, visu nesalaužot cits. Turklāt šie prefiksi darbojas ar CSS rekvizītiem galu galā būs daļa no specifikācijas. Mēs vienkārši pievienojam kodu, lai agri piekļūtu īpašumam. Tas ir vēl viens iemesls, kāpēc CSS kārtulu pārtraucat ar parasto rekvizītu, kas nav prefikss. Tādā veidā jūs varat nomest prefiksu versijas, tiklīdz būs sasniegts pilnīgs pārlūka atbalsts.

Pārdevēja prefiksi ir kaitinoši, bet īslaicīgi

Jā, var šķist kaitinoši un atkārtoti, ja 2–5 reizes ir jāraksta rekvizīti, lai tas darbotos visās pārlūkprogrammās, taču tā ir īslaicīga situācija. Piemēram, tikai pirms dažiem gadiem, lai kastē uzstādītu noapaļotu stūri, jums bija jāuzraksta:

-moz-pierobežas rādiuss: 10 pikseļi 5 pikseļi;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-rādiuss: 5px;
-webkit-border-bottom-right-rādiuss: 10px;
-webkit-border-bottom-left-radius: 5px;
apmales rādiuss: 10 pikseļi 5 pikseļi; 

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

apmales rādiuss: 10 pikseļi 5 pikseļi; 

Chrome ir atbalstījis CSS3 īpašumu kopš 5.0 versijas, Firefox to pievienoja 4.0 versijā, Safari pievienoja 5.0, Opera 10.5, iOS 4.0 un Android 2.1. Pat Internet Explorer 9 to atbalsta bez prefiksa (un IE 8 un zemākas versijas to neatbalstīja ar vai bez prefiksi).

Atcerieties, ka pārlūkprogrammas vienmēr mainīsies un būs nepieciešama radoša pieeja vecāku pārlūkprogrammu atbalstam, ja vien jūs to neplānojat tīmekļa lapu veidošana gadi atpaliek no modernākajām metodēm. Galu galā pārlūkprogrammas prefiksu rakstīšana ir daudz vienkāršāka nekā tādu kļūdu atrašana un izmantošana, kuras, visticamāk, tiks novērstas nākamajā versijā, pieprasot atrast citu izmantojamu kļūdu utt.