Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. PostCSS
Webdesign

Usando PostCSS para la compatibilidad entre navegadores

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called PostCSS Deep Dive.
PostCSS Quickstart Guide: Exploring Plugins
Using PostCSS for Minification and Optimization

Spanish (Español) translation by Miguel Sánchez (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:

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:

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

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:

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 :

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:

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:

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:

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" :

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

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:

Enlaces Relacionados

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" :

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

Enlaces Relacionados

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:

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

Enlaces Relacionados

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:

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

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

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" :

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

Enlaces Relacionados

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:

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

Enlaces Relacionados

Recapitulemos

Para resumir lo que hemos tratado anteriormente:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.