Share
En el último tutorial envolvimos nuestra sección de "Inicio rápido" de esta serie, y ahora estamos listos para continuar usando PostCSS para generar hojas de estilo, empleando diferentes tipos de complementos para varios propósitos.
En este tutorial, usaremos PostCSS para crear una hoja de estilo diseñada para la compatibilidad entre navegadores. Lo haremos:
Accentsconagua
cambiará propiedadVamos a empezar!
Lo primero que deberá hacer es configurar su proyecto para que utilice Gulp o Grunt, según sus preferencias. Si aún no tiene una preferencia por uno u otro, recomiendo usar Gulp ya que necesitará menos código para lograr los mismos fines..
Puede leer acerca de cómo configurar proyectos Gulp o Grunt para PostCSS en los tutoriales anteriores
respectivamente.
Sin embargo, si no desea configurar manualmente su proyecto desde cero, puede descargar los archivos de origen adjuntos a este tutorial y extraer el proyecto de inicio Gulp o Grunt proporcionado en una carpeta de proyecto vacía..
Luego, con un terminal o indicador de comando apuntando a la carpeta, ejecute el comando npm instalar.
Ahora que tiene listo su proyecto Gulp o Grunt + PostCSS vacío, necesitamos instalar los complementos que utilizará en este tutorial..
Instalaremos bastantes complementos, así que en lugar de instalarlos uno por uno como hicimos en las "Guías de inicio rápido" para Gulp y Grunt, los instalaremos todos a la vez con un solo comando.
Ya sea que esté utilizando Gulp o Grunt, ejecute el siguiente comando dentro de la carpeta de su proyecto para instalar los complementos que usaremos:
npm instala autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev
Ahora que los complementos están instalados, avancemos y cargémoslos en su proyecto.
Si está utilizando Gulp, agregue estas variables debajo de las variables que ya están en el archivo:
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 agregue cada uno de esos nuevos nombres de variables en su procesadores formación:
procesadores var = [will_change, autoprefixer, color_rgba_fallback, opacidad, pseudoelementos, vmin, pixrem];
Haz una prueba rápida de que todo está funcionando ejecutando el comando trago css luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Si estás usando Grunt, actualiza el procesadores objeto, que está anidado bajo la opciones objeto, a lo siguiente:
procesadores: [require ('postcss-will-change') (), require ('autoprefixer') (), require ('postcss-color-rgba-fallback') (), require ('postcss-opacity') () , require ('postcss-pseudoelements') (), require ('postcss-vmin') (), require ('pixrem') ()]Haga una compilación de prueba rápida ejecutando el comando Grueso Postcss luego verifique que la carpeta "dest" de su proyecto ahora contenga un nuevo archivo "style.css".
Ahora tiene todos los complementos instalados que se requieren para este tutorial, y está listo para comenzar a ver cómo usarlos para mejorar la compatibilidad entre los navegadores de sus hojas de estilo..
Algunas de las medidas de compatibilidad entre navegadores que cubriremos solo serán necesarias para casos de uso específicos. Por otro lado, el prefijo automatizado del proveedor es algo que sugeriría que debería hacerse con cada proyecto, a través del complemento Autoprefixer creado por Andrey Sitnik.
Puede ser difícil controlar qué propiedades requieren los prefijos de los proveedores en un momento dado, y al usar Autoprefixer no es necesario. Use Autoprefixer como parte de cada proyecto y verificará su código con los datos de CanIUse.com, luego agregará los prefijos de los proveedores según sea necesario sin que tenga que pensar en ello.
Hagamos una pequeña prueba para ver Autoprefixer en acción. Agregue la siguiente animación y código de flexbox al archivo "src / style.css" de su proyecto:
@keyframes animationExample from width: 0; a ancho: 100%; .animadaEsta animación: animaciónEjemplo 2s; pantalla: flexión;
correr trago css o Grueso Postcss para compilar su archivo, y su "dest / style.css" ahora debe contener este código prefijado de proveedor:
@ -webkit-keyframes animationExample from width: 0; a ancho: 100%; @keyframes animationExample from width: 0; a ancho: 100%; .animateThis -webkit-animation: animationExample 2s; animación: animación ejemplo 2s; pantalla: -webkit-box; pantalla: -webkit-flex; pantalla: -ms-flexbox; pantalla: flexión;
Como puede ver, los prefijos de los proveedores se han agregado automáticamente, según lo dictado por los datos proporcionados por CanIUse.com en animación y flexbox.
Autoprefixer usa la Lista del navegador para determinar para qué versiones del navegador agregará soporte. Bajo la configuración predeterminada, aplicará los prefijos de los proveedores según sea necesario para:
El ejemplo que analizamos anteriormente fue compilado bajo la configuración predeterminada de Autoprefixer. Esto significaba que el soporte para IE10 y Safari 8 estaba incluido, por lo que -Sra- y -webkit- prefijos que requieren para animación y flexbox se insertaron automáticamente.
Sin embargo, IE11 y Safari 9 no requieren estos prefijos, por lo que si tuviera que configurar la configuración de la lista de su navegador para que solo sea compatible con IE11 + y Safari 9+, estos prefijos ya no se agregarán.
Prueba esto pasando una navegadores estableciendo a través de Autoprefixer en su Gulpfile o Gruntfile así:
// En la matriz de procesadores Gulpfile: autoprefixer (browsers: 'safari> = 9, ie> = 11'), // En la matriz de procesadores Gruntfile: require ('autoprefixer') (browsers: [ 'safari> = 9, es decir> = 11']),Ahora, si recompila su CSS verá que no hay diferencia entre su código original y el compilado. Esto se debe a que, sin que se haya solicitado soporte para Safari 8 o IE10, no se han agregado prefijos de proveedores que se adapten a ellos.
los cambiará Esta propiedad se utiliza para que un navegador sepa con anticipación que ciertos elementos de su diseño serán animados. Esto permite que el navegador optimice el proceso de renderizado y evite demoras y parpadeos. Sin embargo, en la actualidad esta propiedad no es compatible con IE / Edge, Safari u Opera Mini..
El plugin postcss-will-change, también creado por Andrey Sitnik, agrega un recurso alternativo que ayudará a estos navegadores a hacer un mejor trabajo de renderizado, incluso si no con la eficiencia que podrían si tuvieran soporte. cambiará. Lo hace agregando el visibilidad del reverso propiedad, que activa la creación de una capa de composición que será manejada por la GPU.
Por ejemplo, agregue este código a su archivo "src / style.css":
.thisWillChange will-change: transform;
Compile su hoja de estilo y debería ver aparecer el respaldo en su archivo "dest / style.css":
.thisWillChange backface-visible: oculto; cambio de voluntad: transformar;
Nota: este plugin debe estar cargado antes de Autoprefixer en su Gulpfile / Gruntfile. Esto es para permitir que Autoprefixer agregue prefijos de proveedor al visibilidad del reverso propiedad, como asi:
/ * Retroceso con prefijos de proveedor * / .thisWillChange -webkit-backface-visible: oculto; Backface-visibilidad: oculto; cambio de voluntad: transformar;
Gracias a las versiones mejoradas del navegador de Microsoft y los grupos principales que lideran el camino para eliminar el soporte para el antiguo IE, estamos acercándonos gradualmente a no tener que tener en cuenta constantemente las alternativas y soluciones alternativas para los navegadores problemáticos heredados. El mismo Microsoft dejará de ser compatible con IE8 en 2016. Bootstrap 4 alpha se lanzó recientemente y también ha eliminado el soporte para IE8. Google dejó de soportar IE8 en 2012 y abandonó el soporte de IE9 en 2013.
Dicho todo esto, al final del día, cada proyecto debe evaluarse caso por caso, y si está apuntando a un grupo demográfico que tiene altas tasas de uso de navegadores antiguos, es posible que no tenga más remedio que hacer lo mejor que pueda. para apoyarlos Si ese es el caso, los siguientes complementos pueden ayudarlo a hacer ese proceso un poco menos doloroso..
rgba () Color FallbacksIE8 no tiene soporte para rgba () colores, por lo que el complemento postcss-color-rgba-fallback de Guillaume Demesy agrega un color hexadecimal plano como una alternativa.
Por ejemplo, agregue este código a su archivo "src / style.css":
.rgbaFallback background: rgba (0,0,0,0.5);
Compile y verá que el código hexadecimal se agrega a su archivo "dest / style.css":
.rgbaFallback background: # 000000; fondo: rgba (0,0,0,0.5);
opacidad FallbacksIE8 no puede manejar el opacidad propiedad, por lo que el complemento postcss-opacity de Vincent De Oliveira agrega un filtro específico de IE para lograr el mismo efecto.
Agregue este código a su hoja de estilo de origen:
.opacityFallback opacity: 0.5;
Después de la compilación debería ver el apropiado -ms-filtro añadido de reserva:
.opacityFallback opacity: 0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";
:: dentro : en los pseudo-elementosSe considera la mejor práctica al generar pseudo.-elementos como .elemento :: antes usar una notación de doble colon ::. Esto es para ayudar a distinguirlos de pseudo-clases como .elemento: hover que debe usar una sola notación de dos puntos :.
Sin embargo, IE8 no soporta la notación de dos puntos dobles :: para crear pseudo-elementos, solo soporta un solo punto :. Al utilizar el complemento postcss-pseudoelements de Sven Tschui, puede codificar de acuerdo con las mejores prácticas y cambiar la notación automáticamente..
Agrega el siguiente doble :: código de notación:
.pseudo-elemento :: antes de contenido: ";
Compile su archivo y verá que se ha reducido al único : notación:
.pseudo-elemento: antes de contenido: ";
Al codificar las mejores prácticas y usar este complemento, una vez que IE8 esté completamente retirado, puede reprocesar su CSS sin el complemento y tener la sintaxis adecuada en su lugar.
vm Fallback para vmin En IE9 la unidad relativa del viewport vmin no es compatible, pero en su lugar utiliza la unidad equivalente vm. Si está atendiendo IE9, se agregará el complemento postcss-vmin de Vincent De Oliveira. vm unidades como una alternativa.
Agregue este código a su archivo "src / style.css":
.vmFallback ancho: 50vmin;
Recompilar, y el código resultante debe tener el vm unidad de respaldo añadido en:
.vmFallback ancho: 50vm; ancho: 50vmin;
px Fallback para movimiento rápido del ojo UnidadesIE8 no soporta movimiento rápido del ojo unidades en absoluto, y tanto en IE9 como en IE10 no están soportadas en psuedo-elementos y fuente Declaración abreviada. Con el plugin node-pixrem de Vincent De Oliveira y Rob Wierzbowski puede tener px Fallbacks basados agregados automáticamente donde sea que uses movimiento rápido del ojo unidades.
Agregue este código a su hoja de estilo de origen:
.remFallback altura: 10rem; fuente: 2rem Arial; .remFallback :: before content: "; line-height: 1rem;
Recompila y deberías ver todo lo apropiado. px fallbacks añadidos:
.remFallback altura: 160px; altura: 10rem; fuente: 32px Arial; fuente: 2rem Arial; .remFallback: before content: "; line-height: 16px; line-height: 1rem;
Para resumir lo que hemos cubierto en lo anterior:
A continuación, en nuestra serie PostCSS Deep Dive, encontrará un tutorial sobre cómo usar los complementos para minimizar y optimizar su CSS. Cubriremos en línea @importar archivos, combinando consultas de medios, eliminando espacios en blanco y varios métodos más para hacer que sus hojas de estilo sean lo más optimizadas posible. Te veo allí!
