Últimamente estoy viendo reglas CSS que comienzan con –webkit, -moz, etc.
¿Qué son estas reglas? ¿Son parte del estándar? ¿Cuándo se aplican?
Bueno, espero poder responder a todas estas preguntas en este post.
Cualquier navegador es libre de implementar extensiones propias a CSS y que sólo funcionarán en su navegador (es decir, son propietarias y no son parte del estándar). El principal motivo por el que los navegadores hacen esto es para probar nuevas características de un estándar en estado de recomendación (me refiero a un estándar de la w3c), es decir, estas propiedades están siendo testeadas en su navegador antes de que se vuelvan parte de un estándar. Esta es la parte romántica del porqué de estas extensiones. Otra parte que también tiene su peso es la de intentar lograr mejoras y más características que los navegadores de la competencia y así atar al usuario final a una experiencia definitiva en su navegador. Por el momento y como somos muy cándidos nos vamos a quedar con la primera aproximación y respecto a la segunda vamos a pensar que en realidad “los navegadores están proponiendo a la w3c algunas mejoras que podrían considerar porque las han pasado por alto”. De hecho esto último pasa, pero la línea entre proponer e imponer es tan fina…
Las extensiones específicas tienen que tener un formato concreto que la w3c ha impuesto a través de la especificación CSS 2.1. La w3c las llama Vendor-specific extensions. Como puedes ver, la w3c intenta poner un poco de rigor en este asunto en la medida en que puede.
El formato de una extensión específica de vendedor (en español suena mal, hay que reconocerlo) es la siguiente:
-identificador-propiedad
Así por ejemplo, podemos encontrar
-moz-border-radius: 10px;
-webkit-border-radius: 10px
Donde –moz y –webkit son los identificadores específicos del vendedor y border-radius el nombre la de la propiedad.
La razón por la que empiezan con un guión (-) es que las propiedades CSS no pueden empezar con un guión y así, si un navegador no reconoce su propio identificar de vendedor, simplemente no procesará esas reglas.
En cuanto a los identificadores, tiene que saber que la relación no es uno a uno con cada navegador. Por ejemplo, Microsoft tiene –ms, los navegadores basados en WebKit (un motor de explorador web open-source en el que se muchos otros navegadores se basan, por ejemplo Safari y Chrome) tiene –webkit, etc. A continuación te dejo una lista de algunos de estos prefijos:
· -ms Microsoft
· -moz Firefox
· -o Opera
· -webkit (Safari y Chrome)
Como hemos dicho antes, estas extensiones específicas pretenden ser una prueba real de lo que hoy es un borrador o propuesta y mañana será especificación. Abusar de este tipo de reglas CSS pueden, en cualquier caso, conllevar algunos problemas:
· Nadie asegura que lo que hoy es propuesta mañana sea estándar. Es decir, podría caerse por el camino una propiedad y no llegar a ser parte del estándar. De este modo, nunca daríamos el salto desde la extensión hacía la propiedad estándar.
· Nadie asegura que por cada propiedad propuesta cada vendedor implemente una extensión propia. De este modo, el tan ansiado cross-browser no va a ser posible.
· Nadie asegura que una extensión que se ha convertido en propiedad estándar se siga soportando en futuras versiones del navegador. Es decir, cuando –moz-opacity pasa a ser opacity, -moz-opacity podría no funcionar (de hecho, ya no tendría sentido).
Otra buena recomendación es “ir preparando el camino” y sólo utilizar extensiones que están ligadas a futuras propiedades del estándar. Es decir, -moz-opacity en realidad será mañana la propiedad CSS estándar opacity, pero –moz-tuprima es una extensión que ya sabes de antemano no va a ser parte del estándar y que además sólo va a funcionar en Firefox, así que es mejor no utilizarla (en mi opinión).
Alguna de las referencias sobre estas extensiones la puedes encontrar en los siguientes enlaces (la verdad es que este tema no está muy bien documentado porque imagino que al ser experimental tampoco hay una responsabilidad de documentarlas en exceso):
https://developer.mozilla.org/en/css_reference/mozilla_extensions
http://qooxdoo.org/documentation/general/webkit_css_styles
http://peter.sh/experiments/vendor-prefixed-css-property-overview/
http://www.blooberry.com/indexdot/css/properties/extensions/operaextensions.htm
Bueno, ahora ya sabemos que es –webkit y –moz pero ¿Vamos a usarlo? Yo por ahora no, pero ahí está.
Un saludo!.
No hay comentarios:
Publicar un comentario