Usando PostCSS para la compatibilidad entre navegadores

() translation by (you can also view the original English article)

En el último tutorial finalizamos nuestra sección "Guía rápida" de esta serie y ya estamos preparados para pasar a utilizar PostCSS con el objetivo de generar hojas de estilo, empleando diferentes tipos de complementos para varios propósitos.

En este tutorial vamos a usar PostCSS para crear una hoja de estilos diseñada para ser compatible con múltiples navegadores. Lograremos:

Tener prefijos de proveedor añadidos automáticamente
Incluir una serie de suplencias de código ('fallbacks') para las versiones 8, 9 y 10 de Internet Explorer
Añadir suplencias para la propiedad will-change, aún no soportada ampliamente

¡Comencemos!

Configurar tu Proyecto

Lo primero que necesitarás será preparar tu proyecto para utilizar Gulp o Grunt, dependiendo de tu preferencia. Si aún no tienes preferencia por alguno de ellos, recomiendo usar Gulp dado que necesitarás menos código para lograr el mismo fin.

Puedes leer sobre cómo preparar proyectos Gulp o Grunt para PostCSS en los anteriores tutoriales

respectivamente.

Aunque si no quieres preparar tu proyecto manualmente desde cero, puedes descargar los archivos fuente adjuntos a este tutorial y extraer, bien el proyecto de inicio con Gulp o con Grunt, en una carpeta vacía.

Después, situándote en la carpeta con un terminal o símbolo de sistema, ejecuta el comando npm install.

Instalar Complementos

Ahora que tienes tu Gulp o Grunt vacío + tu proyecto PostCSS listo, necesitamos instalar los complementos que utilizarás en este tutorial.

Vamos a instalar unos cuantos complementos, así que en vez de instalarlos uno a uno, como hicimos en las "Guías de inicio rápido" para Gulp y Grunt, los instalaremos simultáneamente con un solo comando.

Estés usando Gulp o Grunt, ejecuta el siguiente comando dentro de tu carpeta de proyecto para instalar los complementos que vamos a emplear:

1	npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

Ya hemos instalado los complementos. Ahora continuemos y carguémoslos en tu proyecto.

Cargar Complementos vía Gulp

Si estás usando Gulp, añade estas variables bajo las que ya existen en el fichero:

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

Ahora añade cada uno de esos nuevos nombres de variable a tu array processors:

    var processors = [
  	will_change,
		autoprefixer,
		color_rgba_fallback,
		opacity,
		pseudoelements,
		vmin,
		pixrem
	];

Comprueba rápidamente que todo está funcionando, ejecutando el comando gulp css y después verifica que un nuevo archivo "style.css" ha aparecido en la carpeta "dest" de tu proyecto.

Cargar Complementos vía Grunt

Si estás usando Grunt, actualiza el objeto processors, que está anidado bajo el objeto options, a lo siguiente:

        processors: [
          require('postcss-will-change')(),
          require('autoprefixer')(),
          require('postcss-color-rgba-fallback')(),
          require('postcss-opacity')(),
          require('postcss-pseudoelements')(),
          require('postcss-vmin')(),
          require('pixrem')()
        ]

Realiza una rápida compilación de prueba, ejecutando el comando grunt postcss y verificando después que la carpeta "dest" de tu proyecto contiene ahora un nuevo archivo "style.css" .

Ahora tienes instalados todos los complementos necesarios para este tutorial y estás preparado para ver cómo usarlos con el objetivo de mejorar la compatibilidad entre navegadores de tus hojas de estilo.

Añadir Automáticamente Prefijos de Proveedor

Algunas de las medidas que abordaremos para la compatibilidad entre navegadores sólo serán necesarias para determinados casos de uso. El prefijado de proveedores automatizado, por otro lado, es algo que sugeriría hacer en cada proyecto, mediante el complemento Autoprefixer creado por Andrey Sitnik.

Puede ser difícil vigilar qué propiedades requieren los prefijos de proveedor en cualquier momento y usando Autoprefixer no tendrás que hacerlo. Usa Autoprefixer como parte de cada proyecto y comprobará tu código respecto a los datos de CanIUse.com. Después añadirá los prefijos de proveedor necesarios sin que tú tengas que pensar en ello.

Hagamos una pequeña prueba para ver Autoprefixer en acción. Añade la siguiente animación y código flexbox al archivo "src/style.css" de tu proyecto :

@keyframes animationExample {
    from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.animateThis {
	animation: animationExample 2s;
	display: flex;
}

Ejecuta gulp css o grunt postcss para compilar tu archivo y tu “dest/style.css” deberá ahora contener este código con prefijos de proveedor:

@-webkit-keyframes animationExample {
    from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes animationExample {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.animateThis {
	-webkit-animation: animationExample 2s;
	        animation: animationExample 2s;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

Como puedes ver, los prefijos de proveedor se han añadido automáticamente en la animación y el código flexbox, según el dictado de los datos proporcionados por CanIUse.com.

Especificando Niveles de Soporte de Navegadores

Autoprefixer usa Browserlist para determinar para qué versiones de navegador añadirá soporte. En la configuración predeterminada aplicará los prefijos de proveedor requeridos para:

> 1%: navegadores usados globalmente por más del uno por ciento de la gente
últimas 2 versiones: las dos últimas versiones de cada navegador seguidas por CanIUse.com
Firefox ESR: la última versión de Firefox
Opera 12.1: la versión 12.1 de Opera

El ejemplo que ejecutamos anteriormente fue compilado bajo la configuración predeterminada de Autoprefixer. Esto significa que se incluyó soporte para IE10 y Safari 8, por lo que los prefijos -ms- y -webkit-, que requieren para la animación y flexbox, se insertaron automáticamente.

Sin embargo, IE11 y Safari 9 no requieren estos prefijos, por lo que si hubieses establecido tu configuración de browserlist para sólo soportar IE11+ y Safari 9+, estos prefijos no habrían sido añadidos.

Pruébalo pasando el ajuste browsers a través de Autoprefixer, en tu Gulpfile o Gruntfile, de la siguiente forma:

// In the Gulpfile 'processors' array:
autoprefixer({browsers:'safari >= 9, ie >= 11'}),

// In the Gruntfile 'processors' array:
require('autoprefixer')({ browsers: ['safari >= 9, ie >= 11'] }),

Ahora, si recompilas tu CSS, verás que no hay diferencia entre tu código original y el compilado. Esto se debe a que, al no requerirse soporte para Safari 8 o IE10, no se han añadido prefijos de proveedor para ajustarse a ellos.

Enlaces Relacionados:

Autoprefixer: https://github.com/postcss/autoprefixer
Browserlist: https://github.com/ai/browserslist

Añadir Respaldo para la Propiedad "will-change"

La propiedad will-change se utiliza para permitir a un navegador saber de antemano que ciertos elementos de tu diseño van a ser animados. Esto permite al navegador optimizar el proceso de presentación (renderizado) y prevenir retardos y parpadeos. Sin embargo, actualmente esta propiedad no es soportada por IE / Edge, Safari y Opera Mini.

El complemento postcss-will-change, también creado por Andrey Sitnik, añade un respaldo que ayudará a estos navegadores a hacer un mejor trabajo de presentación, aunque no con la eficiencia que tendrían si soportaran will-change. Lo consigue añadiendo la propiedad backface-visibility, que desencadena la creación de una capa de compositor que será gestionada por la GPU.

Por ejemplo, añade este código a tu archivo "src/style.css" :

1	.thisWillChange {
2	will-change: transform;
3	}

Compila tu hoja de estilos y deberías ver el código de respaldo aparecer en tu archivo "dest/style.css" :

1	.thisWillChange {
2	backface-visibility: hidden;
3	will-change: transform;
4	}

Nota: este complemento debe ser cargado antes de Autoprefixer en tu Gulpfile/Gruntfile. Esto es para permitir a Autoprefixer añadir prefijos de proveedor a la propiedad backface-visibility, como en:

/* Fallback with vendor prefixes */
.thisWillChange {
    -webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	will-change: transform;
}

Enlaces Relacionados

complemento postcss-will-change: https://github.com/postcss/postcss-will-change
Todo lo que Necesitas Saber Sobre la Propiedad CSS will-change
información en CanIUse: http://caniuse.com/#feat=will-change

Añadir Respaldo para Viejos Problemas de IE

Gracias a las mejoradas versiones del navegador de Microsoft y a grandes grupos liderando el camino para abandonar el soporte de viejos IE, nos acercamos gradualmente a no tener que considerar constantemente el uso de códigos de respaldo y soluciones alternativas para problemáticos navegadores legados. La propia Microsoft abandonará el soporte para IE8 en 2016. Bootstrap 4 alpha fue recientemente lanzada y también ha abandonado el soporte de IE8. Google detuvo el soporte de IE8 en 2012 y el de IE9 en 2013.

Dicho esto, al final del día cada proyecto debe ser evaluado caso por caso y si te diriges a un grupo demográfico que tiene altas tasas de uso de navegadores viejos, puede que no tengas otra opción que hacer todo lo posible para darles soporte. Si ese es el caso, los siguientes complementos pueden ayudarte a hacer ese proceso un poco menos doloroso.

Crear Código de Respaldo para Colores `rgba()`

IE8 no soporta colores rgba(), así que el complemento postcss-color-rgba-fallback de Guillaume Demesy añade un color hexadecimal plano como código de respaldo.

Por ejemplo, añade este código a tu archivo "src/style.css" :

1	.rgbaFallback {
2	background: rgba(0,0,0,0.5);
3	}

Compila y deberías ver el respaldo de código hexadecimal añadido a tu archivo "dest/style.css" :

1	.rgbaFallback {
2	background: #000000;
3	background: rgba(0,0,0,0.5);
4	}

Enlaces Relacionados

complemento postcss-color-rgba-fallback: https://github.com/postcss/postcss-color-rgba-fallback
información en CanIUse: http://caniuse.com/#feat=css3-colors

Crear Respaldos de `opacity`

IE8 no puede gestionar la propiedad opacity, así que el complemento postcss-opacity de Vincent De Oliveira añade un filtro específico de IE para conseguir el mismo efecto.

Añade este código a tu hoja de estilos original:

1	.opacityFallback {
2	opacity: 0.5;
3	}

Tras la compilación, deberías ver añadido el apropiado código de respaldo -ms-filter:

1	.opacityFallback {
2	opacity: 0.5;
3	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
4	}

Enlaces Relacionados

complemento postcss-opacity: https://github.com/iamvdo/postcss-opacity
información en CanIUse: http://caniuse.com/#feat=css-opacity

Convertir `::` en `:` en los Pseudo-elementos

Usar una notación de dobles dos puntos :: se considera una buena práctica al generar pseudo-elementos como .element::before. Esto ayuda a distinguirlos de las pseudo-clases como .element:hover que deberían usar una notación de dos puntos únicos :.

Sin embargo, IE8 no soporta la notación de dos puntos dobles :: para crear pseudo-elementos. Sólo soporta la de dos puntos únicos :. Utilizando el complemento postcss-pseudoelements de Sven Tschui, puedes hacer código acorde a las buenas prácticas y que la notación cambie automáticamente.

Añade el siguiente código :: de notación doble:

1	.pseudo-element::before {
2	content: '';
3	}

Compila tu archivo y deberías ver que ha sido reducido a la notación : simple:

1	.pseudo-element:before {
2	content: '';
3	}

Haciendo código de acuerdo a buenas prácticas y usando este complemento, una vez IE8 sea completamente retirado, puedes simplemente reprocesar tu CSS sin el complemento y mantener la sintaxis adecuada en su sitio.

Enlaces Relacionados

complemento postcss-pseudoelements: https://github.com/axa-ch/postcss-pseudoelements
información en CanIUse: http://caniuse.com/#feat=css-gencontent

Añadir el Respaldo `vm` para `vmin`

En IE9 no está soportada la unidad relativa vmin para la ventana de visualización, pero en cambio usa la equivalente vm. Si estás trabajando para IE9, el complemento postcss-vmin de Vincent De Oliveira añadirá unidades vm como respaldo.

Añade este código a tu archivo "src/style.css" :

1	.vmFallback {
2	width: 50vmin;
3	}

Recompila y el código resultante deberá tener añadido el respaldo de la unidad vm.

1	.vmFallback {
2	width: 50vm;
3	width: 50vmin;
4	}

Enlaces Relacionados

complemento postcss-vmin: https://github.com/iamvdo/postcss-vmin
información en CanIUse: http://caniuse.com/#feat=viewport-units

Añadir el Respaldo `px` para Unidades `rem`

IE8 no soporta en absoluto unidades rem y tanto en IE9 como en IE10, tampoco son soportadas en pseudo-elementos y en declaraciones abreviadas de font. Con el complemento node-pixrem de Vincent De Oliveira y Rob Wierzbowski, puedes tener px añadidos automáticamente donde hayas utilizado unidades rem.

Añade este código a tu hoja de estilos original:

.remFallback {
    height: 10rem;
	font: 2rem Arial;
}

.remFallback::before {
	content: '';
	line-height: 1rem;
}

Recompila y deberías ver añadidos todos los apropiados respaldos de px:

.remFallback {
    height: 160px;
    height: 10rem;
	font: 32px Arial;
	font: 2rem Arial;
}

.remFallback:before {
	content: '';
	line-height: 16px;
	line-height: 1rem;
}

Enlaces Relacionados

complemento node-pixrem: https://github.com/robwierzbowski/node-pixrem
información en CanIUse: http://caniuse.com/#feat=rem

Recapitulemos

Para resumir lo que hemos tratado anteriormente:

Autoprefixer es una herramienta de uso obligatorio para cada proyecto
Autoprefixer puede configurarse para añadir prefijos de proveedor, dependiendo de los navegadores a los que necesites dar soporte
Si usas animación en tu proyecto, considera utilizar el complemento postcss-will-change
Si das soporte a IE8, considera usar los complementos postcss-color-rgba-fallback, postcss-opacity, postcss-pseudoelements y postcss-vmin.
Si das soporte a IE8, IE9 e IE10, considera utilizar el complemento node-pixrem

En el Próximo Tutorial

Próximamente en nuestra serie PostCSS en Profundidad, un tutorial sobre cómo usar complementos para minificar y optimizar tu CSS. Abordaremos la inserción de archivos @import, la combinación de consultas de medios (media queries), la separación de espacio en blanco y varios métodos más para hacer tus hojas de estilo tan fluidas como sea posible. ¡Allí nos vemos!

Usando PostCSS para la compatibilidad entre navegadores

Configurar tu Proyecto

Instalar Complementos

Cargar Complementos vía Gulp

Cargar Complementos vía Grunt

Añadir Automáticamente Prefijos de Proveedor

Especificando Niveles de Soporte de Navegadores

Enlaces Relacionados:

Añadir Respaldo para la Propiedad "will-change"

Enlaces Relacionados

Añadir Respaldo para Viejos Problemas de IE

Crear Código de Respaldo para Colores rgba()

Enlaces Relacionados

Crear Respaldos de opacity

Enlaces Relacionados

Convertir :: en : en los Pseudo-elementos

Enlaces Relacionados

Añadir el Respaldo vm para vmin

Enlaces Relacionados

Añadir el Respaldo px para Unidades rem

Enlaces Relacionados

Recapitulemos

En el Próximo Tutorial

Crear Código de Respaldo para Colores `rgba()`

Crear Respaldos de `opacity`

Convertir `::` en `:` en los Pseudo-elementos

Añadir el Respaldo `vm` para `vmin`

Añadir el Respaldo `px` para Unidades `rem`