Cales son e por que deberías usalos
Os prefixos do vendedor de CSS, tamén coñecidos como prefixo de navegadores CSS , son un xeito de que os fabricantes de navegador adicionen soporte para as novas funcionalidades de CSS antes de que as funcións estean totalmente compatibles en todos os navegadores. Isto pode facerse durante un período de probas e experimentación onde o fabricante do navegador determina exactamente como se implementarán estas novas funcións de CSS. Estes prefixos fixéronse moi populares co aumento do CSS3 fai uns anos.
Cando o CCS3 foi introducido por primeira vez, un número de propiedades excitadas comezaron a chocar con diferentes navegadores en diferentes momentos. Por exemplo, os navegadores con webkit (Safari e Chrome) foron os primeiros en introducir algunhas das propiedades do estilo de animación como transformar e transición. Ao usar as propiedades prefijadas do vendedor, os diseñadores web puideron utilizar esas novas funcións no seu traballo e facelas ver nos navegadores que o apoiaban de inmediato, en lugar de ter que esperar a que o fabricante do navegador se poña ao día.
Polo tanto, desde a perspectiva dun desarrollador web de interface, os prefijos do navegador úsanse para engadir novas funcionalidades CSS a un sitio e ter comodidades sabendo que os navegadores soportarán eses estilos. Isto pode ser especialmente útil cando os fabricantes de navegador diferentes implemente propiedades de formas ligeramente distintas ou cunha sintaxe diferente.
Os prefixos do navegador CSS que pode usar (cada un deles é específico para un navegador diferente) son:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Ópera: -o-
- Safari: -webkit-
Na maioría dos casos, para usar unha nova propiedade de estilo CSS, tomará a propiedade CSS estándar e engadirá o prefixo de cada navegador. As versións prefixadas sempre chegarían primeiro (en calquera orde que prefire) mentres que a propiedade CSS normal virá por última vez. Por exemplo, se quere engadir unha transición CSS3 ao documento, utilizará a propiedade de transición como se mostra a continuación:
-webkit- transition: all 4s easiness ;
-moz- transition: all 4s facilidade;
-ms- transición: todos facilmente 4;
-o transición: todos facilmente 4;
transición: todos facilidade 4;
Nota: Lembra que algúns navegadores teñen unha sintaxe diferente para determinadas propiedades que outras, así que non asume que a versión prefixada do navegador dunha propiedade é exactamente a mesma que a propiedade estándar. Por exemplo, para crear un gradiente CSS , usa a propiedade de gradiente lineal. Firefox, Opera e versións modernas de Chrome e Safari usan esa propiedade co prefixo axeitado mentres que as primeiras versións de Chrome e Safari usan a propiedade prefixada -webkit-gradient. Ademais, Firefox usa diferentes valores que os estándar.
A razón pola que sempre acaba coa súa declaración coa versión normal e non prefixada da propiedade CSS é así que cando un navegador admite a regra, usará aquela. Lembre que se le a CSS. As regras posteriores teñen prioridade sobre as anteriores se a especificidade é a mesma, polo que un navegador lería a versión de provedor dunha regra e usaría iso se non soporta o normal, pero unha vez que o fai, substituirá a versión do vendedor a regra CSS real.
Os prefixo do vendedor non son un truco
Cando os prefacios do vendedor foron introducidos por primeira vez, moitos profesionais da web preguntáronse se eran un hack ou un cambio de volta aos días escuros de facer o código dun sitio web para soportar diferentes navegadores (lembre as mensaxes " Este sitio está mellor visto en IE "). Os prefixos de vendedores CSS non son hacks, sen embargo, e non deberías ter ningunha reserva sobre utilizalos no teu traballo.
Un pirateo CSS explota fallas na implementación doutro elemento ou propiedade para que outra propiedade funcione correctamente. Por exemplo, o hack do modelo de caixa explotou os fallos na análise da propiedade da familia de voz ou na forma en que os navegadores analizan barras inversas (\). Pero estes hacks foron usados para solucionar o problema da diferenza entre como o Internet Explorer 5.5 manexou o modelo de caixa e como Netscape interpretouno e non ten nada que ver co estilo da familia de voz. Afortunadamente, estes dous navegadores desactualizados son os que non nos preocupa con estes días.
Un prefixo do vendedor non é un hack porque permite que a especificación configure regras sobre como se pode implementar unha propiedade, á vez que permite aos fabricantes de navegadores implementar unha propiedade dun xeito diferente sen romper o resto. Ademais, estes prefixos están a traballar con propiedades CSS que eventualmente formarán parte da especificación . Simplemente estamos engadindo un código para poder acceder á propiedade cedo. Esta é outra razón pola que termina coa regra CSS coa propiedade normal e non prefixada. Deste xeito, pode soltar as versións prefixadas unha vez que se consegue o soporte completo do navegador.
Quere saber o que é o soporte do navegador para unha función determinada? O sitio web CanIUse.com é un recurso marabilloso para reunir esta información e avisarche cales navegadores e as versións destes navegadores actualmente admiten unha función.
Os prefixos do vendedor son molestos pero temporal
Si, pode sentirse irritante e repetitivo ter que escribir as propiedades 2-5 veces para que funcione en todos os navegadores, pero é unha situación temporal. Por exemplo, hai só uns anos, para establecer un recuncho redondeado nunha caixa que tiña que escribir:
-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;
radio fronteirizo: 10px 5px;
Pero agora que os navegadores chegaron a soportar completamente esta función, realmente só necesitas a versión estandarizada:
radio fronteirizo: 10px 5px;
Chrome apoiou a propiedade CSS3 desde a versión 5.0, o Firefox engadiuno na versión 4.0, Safari engadiuno en 5.0, Opera en 10.5, iOS en 4.0 e Android en 2.1. Incluso Internet Explorer 9 o soporta sen un prefixo (e IE 8 e inferior non o soportaron con ou sen prefixos).
Lembre que os navegadores sempre estarán cambiando e se requirirán enfoques creativos para o apoio aos navegadores máis antigos, a menos que estea planeando construír páxinas web que están atrás dos métodos máis modernos. Ao final, escribir prefixos do navegador é moito máis fácil do que atopar e explotar os erros que probablemente se solucionarán nunha futura versión, esixe que atopas outro erro para explotar e así por diante.