La siguiente es una publicación invitada de Andrey Sitnik, el creador de la herramienta Autoprefixer, un “postprocesador” para manejar prefijos de proveedores en CSS. ¿Por qué usar esto en lugar de su preprocesador u otra herramienta? Muchas razones. Andrey te lo explicará.
Autoprefixer analiza los archivos CSS y agrega prefijos de proveedores a las reglas CSS utilizando la base de datos ¿Puedo usar para determinar qué prefijos se necesitan?
Todo lo que tiene que hacer es agregarlo a su herramienta de creación de activos (Grunt, por ejemplo) y puede olvidarse por completo de los prefijos de proveedores de CSS. Simplemente escriba CSS normal de acuerdo con las últimas especificaciones de W3C sin prefijos. Como esto:
a {
transition: transform 1s
}Autoprefixer utiliza una base de datos con la popularidad actual del navegador y el soporte de propiedades para aplicar prefijos por usted:
a {
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}Logotipo de Autoprefixer por Anton Lovchikov
El problema
Por supuesto, podemos escribir prefijos CSS de proveedores a mano, pero puede ser tedioso y propenso a errores.
Podemos usar servicios como Prefixr y complementos de editor de texto, pero aún es agotador trabajar con grandes bloques de código repetido.
Podemos usar bibliotecas mixin con preprocesadores como Compass para Sass o nib para Stylus. Resuelven muchos problemas, pero crean otros problemas en su lugar. Nos obligan a utilizar una nueva sintaxis. Se iteran mucho más lento que los navegadores modernos, por lo que una versión estable puede tener muchos prefijos innecesarios y, a veces, necesitamos crear nuestros propios mixins.
Y Compass realmente no te oculta los prefijos, ya que aún debes decidir muchas preguntas, por ejemplo: ¿Necesito escribir un mixin para border-radius? ¿Necesito dividir argumentos para +transition por coma?
-Prefix-free de Lea Verou fue el que más resolvió este problema, pero el uso de bibliotecas del lado del cliente no es una buena idea si se tiene en cuenta el rendimiento del usuario final. Para evitar hacer el mismo trabajo una y otra vez, es mejor crear CSS una vez: durante la creación de activos o la implementación del proyecto.
Bajo el capó
En lugar de ser un preprocesador, como Sass y Stylus, Autoprefixer es un posprocesador. No utiliza ninguna sintaxis específica y funciona con CSS común. Autoprefixer se puede integrar fácilmente con Sass y Stylus, ya que se ejecuta después de que CSS ya esté compilado.
Autoprefixer se basa en Rework, un marco para escribir sus propios postprocesadores CSS. Rework analiza CSS a la estructura útil de JavaScript y lo exporta de nuevo a CSS después de sus manipulaciones.
Cada versión de Autoprefixer contiene una copia de los datos más recientes de ¿Puedo usar?
- Lista de navegadores actuales y su popularidad.
- Lista de prefijos necesarios para las nuevas propiedades, valores y selectores de CSS.
De forma predeterminada, Autoprefixer admitirá 2 últimas versiones de los principales navegadores, al igual que lo hace Google. Pero puede elegir qué navegadores son compatibles con su proyecto, por nombre (como “Ff 21”) o por patrón:
- Las últimas 2 versiones de cada uno de los principales navegadores que utilizan “Últimas 2 versiones”.
- Con más del 1% de las estadísticas de uso globales usando “> 1%”.
- Solo versiones más nuevas de “Ff> 20” o “Ff> = 20”.
Luego, Autoprefixer calcula qué prefijos son necesarios y cuáles están desactualizados.
Cuando Autoprefixer agrega prefijos a su CSS, no se olvida de corregir las diferencias de sintaxis. De esta manera, CSS se produce de acuerdo con las últimas especificaciones de W3C:
a {
background: linear-gradient(to top, black, white);
display: flex
}
::placeholder {
color: #ccc
}compila para:
a {
background: -webkit-linear-gradient(bottom, black, white);
background: linear-gradient(to top, black, white);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
:-ms-input-placeholder {
color: #ccc
}
::-moz-placeholder {
color: #ccc
}
::-webkit-input-placeholder {
color: #ccc
}
::placeholder {
color: #ccc
}Autoprefixer también limpia los prefijos obsoletos (de código heredado o bibliotecas CSS como Bootstrap), por lo que el siguiente código:
a {
-webkit-border-radius: 5px;
border-radius: 5px
}compila para:
a {
border-radius: 5px
}Entonces, después de Autoprefixer, CSS solo contendrá prefijos de proveedores reales. Después de que Fotorama cambió de Compass a Autoprefixer, el tamaño del archivo CSS disminuido en casi un 20%.
Manifestación
Si aún no usa ningún tipo de herramienta para automatizar la construcción de sus activos, asegúrese de revisar Grunt. Recomiendo encarecidamente comenzar a usar herramientas de compilación. Esto puede abrirle un mundo completamente nuevo de sintaxis “azucaradas”, bibliotecas mixin que ahorran tiempo y herramientas útiles de procesamiento de imágenes. Todos los métodos de productividad de los desarrolladores para ahorrar mucho tiempo y nervios (la libertad de elegir idiomas, la reutilización del código, la capacidad de usar bibliotecas de terceros) están disponibles ahora para los programadores frontales.
Creemos un directorio de proyecto y escribamos CSS simple en style.css:
a { }Para este ejemplo, usaremos Grunt. Primero, necesitaremos instalar grunt-autoprefixer usando npm:
npm install grunt-cli grunt-contrib-watch grunt-autoprefixerEntonces deberíamos crear Gruntfile.js y habilitar Autoprefixer:
module.exports = function (grunt) {
grunt.initConfig({
autoprefixer: {
dist: {
files: {
'build/style.css': 'style.css'
}
}
},
watch: {
styles: {
files: ['style.css'],
tasks: ['autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};Esta configuración permite la compilación de style.css a build/style.css utilizando Autoprefixer. También usaremos grunt-contrib-watch para recompilar build/style.css cada vez style.css cambios.
Comencemos Grunt’s Watch:
./node_modules/.bin/grunt watchAhora, agregaremos una expresión CSS3 a style.css y guarda el archivo:
a {
width: calc(50% - 2em)
}La magia acaba de suceder y ahora tenemos un build/style.css Archivo. Grunt detectó el cambio en style.css y lanzó la tarea Autoprefixer. Autoprefixer encontró el calc() unidad de valor, que necesita un prefijo de proveedor para Safari 6.
a {
width: -webkit-calc(50% - 2em);
width: calc(50% - 2em)
}Ahora agregaremos CSS3 un poco más complicado a style.css y guarda el archivo:
a {
width: calc(50% - 2em);
transition: transform 1s
}Autoprefixer ya sabe que Chrome, Safari 6 y Opera 15 necesitan prefijos para transition y transform. Pero IE 9 también necesita un prefijo para transform, que usamos como valor en transition.
a {
width: -webkit-calc(1% + 1em);
width: calc(1% + 1em);
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}Autoprefixer está diseñado para realizar todo el trabajo sucio por usted. Verificará la base de datos Can I Use, escribirá todos los prefijos necesarios y también comprenderá la diferencia entre las especificaciones. Bienvenido al futuro de CSS3, ¡no más prefijos de proveedores!
¿Qué sigue?
- Autoprefixer admite Ruby on Rails, Middleman, Mincer, Grunt, Sublime Text. Obtenga más información sobre cómo usarlo con su entorno en la documentación.
- Si su entorno aún no es compatible con Autoprefixer, infórmelo e intentaré ayudarlo.
- Seguir @autoprefixer para obtener información sobre actualizaciones y nuevas funciones.