Ce sunt prefixele CSS pentru furnizor sau browser?

Prefixe de furnizor CSS, cunoscute uneori sub numele sau CSS prefixele browserului sunt o modalitate prin care producătorii de browsere pot adăuga suport noi caracteristici CSS înainte ca aceste funcții să fie pe deplin acceptate în toate browserele. Acest lucru se poate face în timpul unei perioade de testare și experimentare în care producătorul browserului stabilește exact modul în care vor fi implementate aceste noi caracteristici CSS. Aceste prefixe au devenit foarte populare odată cu apariția CSS3 acum cativa ani.

Originea prefixelor vânzătorului

Când a fost introdus pentru prima dată CCS3, o serie de proprietăți entuziasmate au început să lovească diferite browsere în momente diferite. De exemplu, browserele bazate pe Webkit (Safari și Chrome) au fost primele care au introdus unele dintre proprietățile în stil animație, cum ar fi transformarea și tranziția. Prin utilizarea prefixului furnizorului proprietăți, designerii de web au reușit să utilizeze aceste funcții noi în munca lor și să le vadă pe browsere care le-a sprijinit imediat, în loc să trebuiască să aștepte ca orice alt producător de browser să prindă sus!

Prefixe comune

Deci, din perspectiva unui dezvoltator web front-end, prefixele browserului sunt folosite pentru a adăuga noi caracteristici CSS pe un site, având în același timp confortul știind că browserele vor susține aceste stiluri. Acest lucru poate fi util mai ales atunci când diferiți producători de browsere implementează proprietăți în moduri ușor diferite sau cu o sintaxă diferită.

Prefixele browserului CSS pe care le puteți utiliza (fiecare dintre acestea este specific unui browser diferit) sunt:

• Android:

  -webkit-

• Crom:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -Domnișoară-

• iOS:

  -webkit-

• Operă:

  -o-

• Safari:

  -webkit-

Adăugarea unui prefix

În majoritatea cazurilor, pentru a utiliza o nouă proprietate în stil CSS, luați proprietatea CSS standard și adăugați prefixul pentru fiecare browser. Versiunile prefixate vor fi întotdeauna pe primul loc (în orice ordine preferați), în timp ce proprietatea normală CSS va ajunge ultima. De exemplu, dacă doriți să adăugați o tranziție CSS3 la documentul dvs., veți utiliza proprietatea de tranziție așa cum se arată mai jos:

-webkit-tranziție: toate 4s ușurință;
-moz-tranzitie: toate 4s usurinta;
-ms-tranzitie: toate 4s usurinta;
-o-tranziție: toate 4s ușurința;
tranziție: toate 4s ușurează; 

Amintiți-vă, unele browsere au o sintaxă diferită pentru anumite proprietăți decât au altele, deci nu presupuneți că versiunea prefixată de browser a unei proprietăți este exact aceeași cu proprietatea standard. De exemplu, pentru a crea un gradient CSS, utilizați proprietatea gradient liniar. Firefox, Opera și versiunile moderne ale Chrome și Safari folosesc acea proprietate cu prefixul adecvat, în timp ce versiunile anterioare ale Chrome și Safari folosesc proprietatea prefixată -webkit-gradient.

De asemenea, Firefox folosește valori diferite decât cele standard.

Motivul pentru care încheiați întotdeauna declarația cu versiunea normală, neprefixată a proprietății CSS este astfel încât atunci când un browser acceptă regula, acesta o va folosi pe aceea. Amintiți-vă cum este citit CSS. Regulile ulterioare au prioritate față de cele anterioare, dacă specificitatea este aceeași, astfel încât un browser ar citi versiunea furnizorului unui reglează și folosește asta dacă nu acceptă cea normală, dar odată ce o va face, va suprascrie versiunea furnizorului cu CSS-ul real. regulă.

Prefixele furnizorilor nu sunt un hack

Când au fost introduse pentru prima dată prefixele furnizorilor, mulți profesioniști din web s-au întrebat dacă sunt un hack sau un treceți înapoi la zilele întunecate în care ați codificat un site web pentru a sprijini diferite browsere (amintiți-vă că "Acest site este cel mai bine vizualizat în IE„mesaj). Cu toate acestea, prefixele furnizorilor de CSS nu sunt hackuri și nu ar trebui să aveți nicio rezervă cu privire la utilizarea acestora în munca dvs.

Un hack CSS exploatează defecte în implementarea unui alt element sau proprietate pentru a face ca o altă proprietate să funcționeze corect. De exemplu, hack-ul modelului de casetă a exploatat defectele în analiza familiei vocale sau în modul în care browserele analizează barele inverse \. Dar aceste hacks au fost folosite pentru a remedia problema diferenței dintre modul în care Internet Explorer 5.5 a gestionat modelul cutiei și cum Netscape a interpretat-o ​​și nu au nimic de-a face cu stilul familiei vocii. Din fericire, aceste două browsere depășite sunt cele cu care nu trebuie să ne preocupăm în aceste zile.

Un prefix de furnizor nu este un hack, deoarece permite ca specificația să stabilească reguli pentru modul în care ar putea fi implementată o proprietate, permițând în același timp producătorilor de browsere să implementeze o proprietate într-un mod diferit, fără a sparge totul altceva. În plus, aceste prefixe funcționează cu proprietăți CSS care va fi în cele din urmă o parte a caietului de sarcini. Pur și simplu adăugăm un anumit cod pentru a avea acces la proprietate mai devreme. Acesta este un alt motiv pentru care încheiați regula CSS cu proprietatea normală, neprefixată. În acest fel, puteți renunța la versiunile prefixate odată ce suportul complet al browserului este obținut.

Prefixele furnizorilor sunt enervante, dar temporare

Da, s-ar putea să vă enerveze și să vă repetați dacă trebuie să scrieți proprietățile de 2-5 ori pentru a funcționa în toate browserele, dar este o situație temporară. De exemplu, acum doar câțiva ani, pentru a seta un colț rotunjit pe o cutie, trebuia să scrieți:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5 px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-jos-stânga-rază: 5 px;
raza chenarului: 10px 5px; 

Dar acum, când browserele au acceptat pe deplin această caracteristică, aveți nevoie doar de versiunea standardizată:

raza chenarului: 10px 5px; 

Chrome a acceptat proprietatea CSS3 de la versiunea 5.0, Firefox a adăugat-o în versiunea 4.0, Safari a adăugat-o în 5.0, Opera în 10.5, iOS în 4.0 și Android în 2.1. Chiar și Internet Explorer 9 îl acceptă fără prefix (iar IE 8 și versiunile inferioare nu l-au acceptat cu sau fără prefixe).

Amintiți-vă că browserele vor fi mereu în schimbare și că vor fi necesare abordări creative pentru acceptarea browserelor mai vechi, cu excepția cazului în care intenționați construirea de pagini web care sunt cu ani în spatele celor mai moderne metode. În cele din urmă, scrierea prefixelor browserului este mult mai ușoară decât găsirea și exploatarea erorilor care cel mai probabil vor fi remediate într-o versiune viitoare, necesitând găsirea unei alte erori de exploatat și așa mai departe.