Què són i per què hauria d'utilitzar-los
Els prefixos del proveïdor de CSS, també coneguts com a prefixos del cercador CSS , són una manera de fer que els fabricants d'exploradors admetin compatibilitat amb les noves característiques de CSS abans que aquestes funcions estiguin plenament compatibles en tots els navegadors. Això es pot fer durant un període de proves i experimentació on el fabricant del navegador determina exactament com es implementaran aquestes noves característiques de CSS. Aquests prefixos es van fer molt populars amb l'augment de CSS3 fa uns anys.
Quan es va començar a introduir el CCS3, diverses propietats emocionades van començar a colpejar diferents navegadors en diferents moments. Per exemple, els navegadors basats en webkit (Safari i Chrome) van ser els primers a introduir algunes de les propietats d'estil d'animació com transformar i transició. Mitjançant l'ús de propietats prefixades per a proveïdors, els dissenyadors web van poder utilitzar aquestes noves funcions en el seu treball i fer-les veure als navegadors que els recolzaven immediatament, en comptes d'haver d'esperar que tots els fabricants del navegador tornin a posar-se al dia!
Així, des del punt de vista d'un desenvolupador web de front-end, els prefixos del navegador s'utilitzen per afegir noves característiques de CSS a un lloc i tenir confort sabent que els navegadors donaran suport a aquests estils. Això pot ser especialment útil quan els fabricants de cercadors diferents implementen propietats d'una manera lleugerament diferent o amb una sintaxi diferent.
Els prefixos del navegador CSS que podeu utilitzar (cadascun dels quals és específic d'un navegador diferent) són:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Òpera: -o-
- Safari: -webkit-
En la majoria dels casos, per utilitzar una propietat d'estil CSS nova, agafeu la propietat CSS estàndard i afegiu el prefix per a cada navegador. Les versions prefixades sempre vindran primer (en qualsevol ordre que preferiu) mentre que la propietat CSS normal arribarà per última vegada. Per exemple, si voleu afegir una transició CSS3 al document, utilitzeu la propietat de transició tal com es mostra a continuació:
-webkit- transition: all 4s easiness ;
-moz- transition: all 4s easiness;
-ms- transition: all 4s easiness;
-o transició: totes 4s facilitat;
transició: totes 4s facilitat;
Nota: Recordeu, alguns navegadors tenen una sintaxi diferent per a determinades propietats que altres, així que no suposi que la versió prefixada d'un propietari sigui exactament igual a la propietat estàndard. Per exemple, per crear un degradat CSS , s'utilitza la propietat de gradient lineal. Firefox, Opera i versions modernes de Chrome i Safari utilitzen aquesta propietat amb el prefix adequat, mentre que les primeres versions de Chrome i Safari utilitzen la propietat prefixada -webkit-gradient. A més, Firefox utilitza diferents valors que els estàndards.
La raó per la qual sempre acabeu la vostra declaració amb la versió normal i no prefixada de la propietat CSS és perquè quan un navegador admeti la regla, usarà aquella. Recordeu com es llegeix CSS. Les regles posteriors prevalen sobre les anteriors si l'especificitat és la mateixa, de manera que un navegador llegeix la versió del proveïdor d'una regla i l'utilitza si no és compatible amb la normal, però una vegada que ho fa, anul·larà la versió del proveïdor amb la regla CSS real.
Els prefixos del venedor no són un hack
Quan els primers prefixos del proveïdor es van introduir per primera vegada, molts professionals de la web es van preguntar si eren un hack o un canvi de tornada als foscos dies de forking del codi d'un lloc web per donar suport a diferents navegadors (recordeu els missatges " Aquest lloc és millor vist a IE "). Els prefixos de proveïdors de CSS no són hacks, però, no hauríeu de tenir cap reserva per utilitzar-los al vostre treball.
Un pirateig CSS explica defectes en la implementació d'un altre element o propietat per tal que una altra propietat funcioni correctament. Per exemple, el model de caixa hack explotar defectes en l'anàlisi de la propietat de veu familiar o en com els navegadors analitzen barres inverses (\). Però aquests hacks es van utilitzar per solucionar el problema de la diferència entre com Internet Explorer 5.5 va manejar el model de caixa i com Netscape ho va interpretar i no tenia res a veure amb l'estil de la família de veu. Afortunadament, aquests dos navegadors obsolets són els que no ens preocupen aquests dies.
Un prefix de proveïdor no és un hack perquè permet que l'especificació estableixi regles sobre com es pot implementar una propietat, alhora que permet als fabricants d'exploradors implementar una propietat d'una manera diferent sense trencar la resta. A més, aquests prefixos funcionen amb propietats CSS que eventualment formaran part de l'especificació . Simplement afegim un codi per obtenir accés a la propietat abans d'hora. Aquesta és una altra raó per la qual finalitzeu la norma CSS amb la propietat normal i no prefixada. D'aquesta manera, podeu deixar anar les versions prefixades un cop s'aconsegueix un suport complet del navegador.
Vols saber què és el suport del navegador per a una determinada funció? El lloc web CanIUse.com és un meravellós recurs per recollir aquesta informació i fer-vos saber quins navegadors i quines versions d'aquests navegadors actualment admeten una funció.
Els prefixos del venedor són molestos però temporals
Sí, podria ser molest i repetitiu haver d'escriure les propietats 2-5 vegades per aconseguir que funcioni en tots els navegadors, però és una situació temporal. Per exemple, fa uns pocs anys, per establir una cantonada arrodonida en una caixa, heu d'escriure:
-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;
límit de radi: 10px 5px;
Però ara que els navegadors han respost completament amb aquesta funció, realment només necessiteu la versió estandarditzada:
límit de radi: 10px 5px;
Chrome ha donat suport a la propietat CSS3 des de la versió 5.0, el Firefox l'ha afegit a la versió 4.0, Safari l'ha afegit a 5.0, Opera a 10.5, a iOS a 4.0 i a Android 2.1. Fins i tot Internet Explorer 9 ho admet sense un prefix (i IE 8 i inferior no ho admeten amb o sense prefixos).
Recordeu que els navegadors sempre estaran canviant i es requeriran enfocaments creatius per a la compatibilitat amb navegadors antics, tret que estigueu planejant crear pàgines web que estan darrere dels mètodes més moderns. Al final, escriure prefixos del navegador és molt més senzill que trobar i explotar errors que, probablement, es solucionaran en una versió futura, i requereixen que trobeu un altre error per explotar, etc.