PostCSS, o cómo generar un CSS + compatible con los navegadores más importantes

Voy a hacer un breve resumen, rápido y a saco de cómo debemos configurar nuestro gestor de tareas Grunt, para instalarle las funciones de PostCSS, podéis constatar algunas de las ventajas que nos proporciona más abajo en la sección Resultados.

Como dice el título PostCSS, nos va a ayudar a hacer el CSS más compatible, no totalmente compatible, ya que PostCSS solo va a tener en cuenta la compatibilidad del etiquetado y no diferentes formas de entender anchos y altos de los navegadores.

Con las manos en el teclado

Si queréis información más detallada sobre PostCSS, podéis dirigiros al siguiente enlace:

http://webdesign.tutsplus.com/tutorials/using-postcss-for-cross-browser-compatibility--cms-24567

Por mi parte asumo que ya habéis instalado nodejs, npm y grunt.

1.-Para instalar PostCSS y demás plugins, haced lo siguiente:

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

Con esto ya tenemos todos lo necesario de Grunt instalado.

2.-Le decimos a grunt que cargue PostCSS:

grunt.loadNpmTasks('grunt-postcss');

3.-Solo tenemos que añadir a vuestro initConfig lo siguiente:


grunt.initConfig({
 postcss: {
 options: {
 map: true,
 processors: [
 require('postcss-will-change')(),
 require('autoprefixer')(),
 require('postcss-color-rgba-fallback')(),
 require('postcss-opacity')(),
 require('postcss-pseudoelements')(),
 require('postcss-vmin')(),
 require('pixrem')()
 ]
 },
 dist: {
 src: 'RUTA DE MI CSS A PROCESAR'
 }
 }
 
});

Cuando hagáis esto tened cuidado porque sobreescribe el CSS y nunca dejes en manos de un proceso automatizado algo que no tengas versionado en git o backeado.

4.-Registramos la tarea:

grunt.registerTask('postcsstask', ['postcss:dist']);

Recordad que Grunt gruñe si llamas la tarea igual que el plugin que vas a utilizar, por eso no he llamado a la tarea "postcss" directamente.

Resultados

Voy a decir algunos de los cambios que ha incorporado PostCSS al css que le he pasado:

1.-Todos los opacity:0 se han transformado en (para compatibilidad con IE8):

opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

2.-Paso de tener:

animation-duration: 2s;

a

-webkit-animation-duration: 2s;
animation-duration: 2s;

Y así cualquier propiedad de CSS3 con etiquetados diferentes según navegador.

3.-También importante para IE8, compatibiliza los atributos de color rgba para que los entienda, pasamos de tener:

background: rgba(255, 255, 255, 0.76);

a

background: #FFFF;
background: rgba(255, 255, 255, 0.76);>

4.-Elimina elementos redundantes, por ejemplo:

-moz-transition: 1s all ease;
-o-transition: 1s all ease;
transition: 1s all ease;

pasa a ser simplemente:

transition: 1s all ease;

Conclusión

No viene mal una ayuda extra y os animo a que lo probéis así como a instalaros Grunt o Gulp, si no lo habéis hecho, os estáis perdiendo herramientas muy prácticas, pero bueno, esto lo reservo para otra entrega.

Escrito el 30 oct 2015
comments powered by Disqus

« El mejor capturador de pulsaciones Ctrl+F con jQuery - Bolt, una buena alternativa a WP: impresiones sobre el sofisticado, ligero y simple CMS »