¿Qué son los prefijos CSS o propiedades experimentales?

Webkit, etiquetas de propiedad del navegador o vendor prefixes

CSS3 ha incorporado una novedad con la que muchos ya estaréis familiarizados. Se trata de los prefijos CSS de navegador.

Tienen una estética tal que así:

.degradado {
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */	
}

Y se aplican a algunas propiedades CSS que todavía no están aprobadas por el W3C. Las llamadas propiedades experimentales.

Desde Loopeando.com vamos a contarte el porqué de estos prefijos, cuándo y a qué propiedades se aplican, qué son las salvaguardas y cómo hacer que estas extensiones se generen automáticamente.

¿Por qué son necesarios los vendor prefixes?

Es posible que algunos recordéis los hack de IE o comentarios condicionales.

Estas pequeñas lineas de código se utilizaban (y utilizan) cuando se quería hacer que Internet Explorer/Outlook mostrasen una alternativa al código que estábamos creando.

<!--[if IE]>
  El código aquí situado será leído únicamente por los navegadores Internet Explorer
<![endif]-->

<!--[if (IE 7) | (IE 8)]>
  Y el situado aquí,  sólo por Internet Explorer 7 o Internet Explorer 8
<![endif]-->

¿Por qué? Porque Internet Explorer empleaba un motor gráfico que generaba muchas incompatibilidades con los estándares del W3C.

Esto se debe a que cada navegador tiene su propio motor gráfico es decir, un sistema de renderizado que les permite transformar el código HTML, PHP, etc en algo visual para el usuario siguiendo las reglas de CSS dadas:

• Internet Explorer usa el motor Trident
• Los productos Mozilla, como Firefox, usan Gecko
• Opera usa el motor Presto
• Chrome (Google) y Safari (Apple) el motor WebKit

Además de ello, resulta que [subraya_rosa]HTML es un lenguaje declarativo, que únicamente indica lo que se debe representar y no el cómo se debe representar[/subraya_rosa]. Existe por ello cierta libertad, por parte de los motores de renderizado, para mostrar un elemento de una u otra forma.

Así que con todo lo anterior, no es de extrañar que, dado que cada uno hace la guerra por su lado, la aplicación de las nuevas propiedades de CSS sean un poco caóticas, hasta que el organismo estandarizador termina de fijarlas.

Por lo tanto, [subraya_verde]cuando vayamos a escribir una propiedad que todavía esté en fase experimental, debemos agregar un prefijo por cada navegador mayoritario que haya en el mercado[/subraya_verde].

¿Cuáles son los prefijos CSS?

Prefijo	Navegadores que los aplican
-webkit-	Chrome, Safari, Android, iOs
-moz-	Firefox
-o-	Opera
-ms-	Microsoft Internet Explorer, Edge

Por lo tanto, la propiedad experimental [codigo]border-image[/codigo] debería expresarse de la siguiente forma, para ser vista correctamente en todos los navegadores:

-webkit-border-image: url(border.png) 50 round;
-moz-border-image: url(border.png) 50 round;
-o-border-image: url(border.png) 50 round;

/* Internet Explorer 11 y Edge ya lo utilizan sin prefijo. Así que no sería:
 -ms-border-image: url(border.png) 50 round; sino  
 border-image: url(border.png) 50 round; */

¿Qué propiedades experimentales hay?

Dado que es una lista en constante cambio, cada navegador tiene las suyas propias, y va dando soporte a las de los demás poco a poco, lo ideal es centrarse en una familia de navegadores y acudir a sus fuentes oficiales de soporte.

Por ejemplo, nos vamos a centrar en Firefox y os listamos el soporte que dan ahora mismo a las sus propias propiedades experimentales y las de terceros:

• Soporte desde Mozilla Firefox para las propiedades de Internet Explorer (-ms-)
• Soporte desde Mozilla Firefox para las propiedades de Chorme y Safari (-webkit-)
• Soporte desde Mozilla Firefox para la suyas propias (-moz-)

Recordad que no es conveniente emplear estas propiedades en desarrollos reales, puesto que pueden generar muchas incompatibilidades.

¿Cómo ponerlas automáticamente?

Cuando abandonamos las propiedades habituales, puede resultar engorroso recordar cuáles son experimentales y poner todos los prefijos.

Por ello existen algunos buscadores especializados que pueden ayudarnos, como:

• Should I Prefix?
• Can I Use?

Sin embargo, existe otra vía: Hacerlo automático.

Para ello podemos usar Prefix-Free, una librería de JavaScript que hace este trabajo por nosotros.

Podéis descargarlo aquí, y su funcionamiento es sencillo: Escribimos la propiedad sin prefijos y la librería los añadirá si son necesarios.

Actúa en hojas de estilo, CSS-inline, navegadores de escritorio y móviles. Y sólo tenemos que descargarlo y llamarlo desde el [codigo]<head>[/codigo].

¿Y los navegadores antiguos? Salvaguardas

Las salvaguardas con propiedades CSS clásicas (de las primeras versiones de CSS) que se utilizan como respaldo a las propiedades más novedosas o experimentales.

La idea es que la web se visualice correctamente incluso en aquellos navegadores que lleven muchos años sin actualizarse.

Por ejemplo, en mi carrera profesional, he llegado a encontrarme con ordenadores de clientes que no eran capaces de interpretar las transparencias de los PNG. La causa era que navegaban con versiones anteriores a Internet Explorer 7. Es decir, cuando me encontré la incompatibilidad, esas personas estaban empleando navegadores con más de 10 años de antigüedad.

Sin meternos en la locura que es navegar en esas condiciones, debemos saber que son muchas las administraciones que trabajan con tecnología muy obsoleta. Las causas son varias, pero las dejaremos para otro post.

Más allá de estos casos extremos, debemos saber no todo el mundo actualiza ni puede actualizar su software a la velocidad que avanzan las tecnologías en la red, así que es conveniente usar salvaguardas.

Un ejemplo de salvaguarda sería el código con el que abríamos este post, completándolo de la siguiente forma:

.degradado {
 background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
 background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ 
 background: -prefix-linear-gradient(left, blue, white); /*Salvaguarda 2 */
 background-color: #7db9e8; /*Salvaguarda 3*/
}

En él se pretende poner un color de fondo con un gradiente, y para ello se usan los prefijos de los diferentes navegadores.

Sin embargo, también se pone la versión oficial, sin prefijos, a sabiendas de que esta propiedad ya está estandarizada y algunos navegadores modernos la buscarán en lugar de los prefijos.

Por lo tanto, los prefijos podrían considerarse la salvaguarda 1: La interpretación para los navegadores en sus penúltimas o antepenúltimas versiones.

La salvaguarda 2 es:

background: -prefix-linear-gradient(left, blue, white);

Es decir, la forma antigua de escribir esta propiedad CSS en los motores renderizados de WebKit y Opera. Nos servirá para las versiones anteriores a: Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1

Y la salvaguarda 3 es:

 background-color: #7db9e8; /*Salvaguarda 3*/

O lo que es lo mismo, prescindimos del gradiente y ponemos un color plano. Esta salvaguarda sería más o menos compatible para navegadores anteriores a:
Firefox 1.5, Opera 8.5, Safari 2, Internet Explorer 6*
* Unos 10 años aproximadamente.

Y, de hecho, podríamos retroceder aún más con otra salvaguarda:

background: #7db9e8;

Compatible con navegadores de 1997 :
Internet Explorer 4, Firefox 1, Opera 3.5

Osea, antes de que existiese Google. Pero tampoco hace falta pasarse, ¿no?

Esperamos que esta entrada te haya sido de utilidad y, recuerda que si tienes dudas, desde Loopeando.com estaremos encantados de ayudarte en los comentarios.