Ce sunt și de ce ar trebui să le folosiți
Prefixele furnizorilor CSS, cunoscute și ca prefixe de browser CSS , reprezintă o modalitate prin care producătorii de browsere pot adăuga suport pentru noile caracteristici CSS înainte ca aceste caracteristici să fie pe deplin acceptate în toate browserele. Acest lucru se poate face într-un fel de perioadă de testare și experimentare în care producătorul browser-ului determină exact modul în care vor fi implementate aceste noi funcții CSS. Aceste prefixe au devenit foarte populare odată cu creșterea CSS3 acum câțiva ani.
Atunci când CCS3 a fost introdus pentru prima oară, o serie de proprietăți emoționate au început să atingă browsere diferite în momente diferite. De exemplu, browserele bazate pe webkit (Safari și Chrome) au fost primele care introduc unele dintre proprietățile în stil animație, cum ar fi transformarea și tranziția. Prin utilizarea proprietăților prefixate de furnizori, designerii web au reușit să utilizeze aceste noi caracteristici în activitatea lor și să le vadă pe browserele care le-au suportat imediat, în loc să fie nevoiți să așteptați ca ceilalți producători de browsere să se prindă!
Deci, din perspectiva unui dezvoltator de web front-end, prefixele de browser sunt folosite pentru a adăuga noi caracteristici CSS pe un site în timp ce au confort, știind că browserele vor sprijini acele stiluri. Acest lucru poate fi util în special atunci când diferiți producători de browsere implementează proprietăți în moduri puțin diferite sau cu o sintaxă diferită.
Prefixele browserului CSS pe care le puteți utiliza (fiecare dintre acestea fiind specifice unui alt browser) sunt:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
În majoritatea cazurilor, pentru a utiliza o proprietate de stil CSS, luați proprietatea CSS standard și adăugați prefixul pentru fiecare browser. Versiunile prefixate vor fi întotdeauna întâi (în orice ordine preferați), în timp ce proprietatea CSS normală va fi ultima. De exemplu, dacă doriți să adăugați o tranziție CSS3 la documentul dvs., ați folosi proprietatea de tranziție după cum se arată mai jos:
-webkit- tranziție: ușurința tuturor 4s;
-moz- tranziție: ușurința tuturor 4s;
-ms- tranziție: toate 4s ușurință;
-o- tranziție: toate 4s ușurință;
tranziție: toate 4s ușurință;
Notă: rețineți că unele browsere au o sintaxă diferită pentru anumite proprietăți decât altele, deci nu presupuneți că versiunea prestabilită de browser a unei proprietăți este exact aceeași cu cea a proprietății standard. De exemplu, pentru a crea un gradient CSS , utilizați proprietatea gradientului liniar. Firefox, Opera și versiunile moderne ale Chrome și Safari utilizează acea proprietate cu prefixul corespunzător, în timp ce versiunile anterioare ale Chrome și Safari utilizează proprietatea prefixată -webkit-gradient. De asemenea, Firefox folosește valori diferite de cele standard.
Motivul pentru care întotdeauna încheiați declarația dvs. cu versiunea normală, non-prefixată a proprietății CSS este că atunci când un browser suportă regula, va folosi acea. Amintiți-vă cum este citit CSS. Regulile ulterioare au prioritate față de cele anterioare, în cazul în care specificul este același, astfel încât un browser să citească versiunea furnizorului unei reguli și să o folosească dacă nu suportă cea normală, dar odată ce o va face, va suprascrie versiunea furnizorului cu regula reală a CSS.
Prefixele furnizorilor nu sunt o hack
Atunci când au fost introduse prefixele vânzătorilor, mulți profesioniști din domeniu se întrebau dacă sunt un hack sau o întoarcere înapoi în zilele întunecate de incriptare a codului site-ului web pentru a suporta diferite browsere (amintiți-i pe acele mesaje " Acest site este cel mai bine văzut în IE "). Prefixele furnizorilor CSS nu sunt totuși hackeri și nu ar trebui să aveți nicio rezervă cu privire la utilizarea acestora în munca dvs.
Un hack CSS exploatează deficiențe în implementarea altui element sau proprietate pentru a obține o altă proprietate să funcționeze corect. De exemplu, modelul de hack a exploatat defectele în parsarea proprietății familiei voce sau în modul în care browserele analizează backslash-urile (\). Dar aceste hack-uri au fost folosite pentru a rezolva problema diferenței dintre modul în care Internet Explorer 5.5 a manipulat modelul cutiei și modul în care Netscape a interpretat-o și nu are nimic de-a face cu stilul familiei voce. Din fericire, aceste două browsere învechite sunt cele pe care nu le avem de-a face cu aceste zile.
Un prefix de furnizor nu este un hack, deoarece permite ca caietul de sarcini 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 orice altceva. Mai mult, aceste prefixe lucrează cu proprietăți CSS care vor fi ulterior parte din specificație . Pur și simplu adăugăm un cod pentru a avea acces rapid la proprietate. Acesta este un alt motiv pentru care încheiați regula CSS cu proprietatea normală, nefixată. În acest fel, puteți renunța la versiunile prefixate odată ce se realizează suportul browserului complet.
Doriți să aflați ce este suportul browserului pentru o anumită caracteristică? Site-ul CanIUse.com este o resursă minunată pentru colectarea acestor informații și pentru a vă informa care browsere și ce versiuni ale acelor browsere acceptă în prezent o caracteristică.
Prefixele furnizorilor sunt enervante, dar temporare
Da, s-ar putea simți enervant și repetat că trebuie să scrie proprietățile de 2-5 ori pentru a ajunge să funcționeze în toate browserele, dar este o situație temporară. De exemplu, acum câțiva ani, pentru a stabili un colț rotunjit pe o cutie, a trebuit să scrie:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
raza de graniță: 10px 5px;
Dar acum că browserele au ajuns să sprijine pe deplin această caracteristică, aveți nevoie de versiunea standardizată:
raza de graniță: 10px 5px;
Chrome a susținut 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 o acceptă fără un prefix (iar IE 8 și inferior nu o suportă cu sau fără prefixe).
Amintiți-vă că browserele vor fi mereu în schimbare și că vor fi necesare abordări creative de sprijinire a browserelor mai vechi, cu excepția cazului în care intenționați să construiți pagini web care sunt î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 vor fi cel mai probabil rezolvate într-o versiune viitoare, necesitând o altă eroare de exploatare și așa mai departe.