Si escribe CSS, es casi seguro que deba utilizar prefijos de proveedor en algunas partes del código que escribe para garantizar la mejor compatibilidad con el navegador. Ya sea que se trate de propiedades con prefijo como -prefix-transform, con prefijo at-rules como @ -prefix-keyframes, o prefijos de valores como -prefix-linear-gradient, es una tarea diaria de los autores de CSS.
No solo es parte de nuestro trabajo, es algo fácil de arruinar. Recientemente miré a mi alrededor en un montón de grandes sitios web que buscaban específicamente pequeños errores de CSS3 y pude encontrar uno en cualquier sitio que miré.
Entonces, ¿cómo creamos CSS para que siempre usemos los prefijos correctos todo el tiempo?
Autor de la mano: consulte CSS3
La autoría manual significa que el CSS que usan sus sitios en producción (“en vivo”) es el archivo CSS que usted mismo edita en un editor de texto. Seguir esta ruta significa que deberá incluir todos los prefijos de proveedores correctos directamente en ese archivo creado usted mismo. Un poco tedioso y propenso a errores para mi gusto, pero un escenario probable para la mayoría de los sitios web del mundo.
Si este es tu caso, tu mejor opción es hacer referencia a un recurso actualizado como CSS3, ¡por favor !. Puede editar los valores directamente en ese sitio y copiar y pegar directamente en sus propias hojas de estilo.
Si haces esto, significa la responsabilidad es tuya para mantener las cosas actualizadas. Los prefijos no son tan volátiles como antes, pero ciertamente se justifica una mirada cada pocos meses.
Autor de la mano – No prefijar – Deje que -sin prefijo hacerlo del lado del cliente
Aún crea manualmente el CSS, pero solo usa las propiedades / valores / at-rules sin prefijo. -prefix-free es un fragmento de JavaScript que se ejecuta, revisa todo su CSS y agrega a la página nuevos estilos con los prefijos adecuados necesarios para que esos estilos funcionen, si es necesario.
Este es el territorio de la guerra santa. ¡Hace que los archivos CSS sean más pequeños! ¡Sí, pero corre el riesgo de flashes de elementos sin CSS3! ¡Requiere JavaScript para estilos, cruzando las corrientes! ¡Sí, pero solo son 2k! ¡Es una mejora progresiva en su máxima expresión, ya que dejará de prefijar cuando los navegadores dejen de necesitarlo!
Tú decides.
También vale la pena señalar que jQuery’s .css() El método hará algunos prefijos por ti.
$("body").css({
// Will NOT prefix
"background": "linear-gradient(#ccc, #666)",
// Doesn't need to, so won't
"box-shadow": "inset 0 0 5px black",
// WILL prefix
"transform" : "rotate(5deg)"
});No soy fanático de aplicar CSS a través de JavaScript, pero es bueno saberlo, ya que siempre hay excepciones a las reglas.
Autor de la mano – Arreglar con Prefixr
Si prefiere no crear manualmente los prefijos pero, en última instancia, su flujo de trabajo implementa CSS creado a mano, puede ejecutar su CSS a través de Prefixr antes de implementarlo. Básicamente analiza su CSS, encuentra cosas que necesitan prefijos y lo hace por usted.
Es muy inteligente en el sentido de que no es necesario tener CSS que esté específicamente desprovisto de prefijos (como se requiere sin prefijos). Por ejemplo, si le falta uno de los tres prefijos requeridos, lo verá y solo agregará el que falta.
También tiene formas de agregarse a los flujos de trabajo a través de la línea de comando o áreas de texto populares.
Preproceso: use mixins
Una de las principales razones para utilizar preprocesadores CSS es la ayuda con el prefijo de los proveedores.
Si usa Sass, Compass o Bourbon, tiene conjuntos sólidos de mixins CSS3 para usted.
Si usa MENOS, tengo un conjunto de ellos o puede ver este resumen comparando algunos otros.
Autor de mano – No prefijar – Postproceso con Autoprefixer
Esta es una forma realmente genial de hacerlo. Todo está expuesto en este artículo. Esencialmente, simplemente olvídese de los prefijos y este paso de compilación agregará los prefijos por usted de acuerdo con la última y mejor información de CanIUse.
“No hacer”
Un error que veo a veces es que la gente simplemente usa todos los prefijos principales en cada propiedad de CSS3. Parece que tienen una mezcla genérica en la que simplemente pasan todo lo que abofetea los prefijos. Si has visto algo como -o-border-radius, eso es lo que quiero decir. Eso nunca ha existido y nunca debe incluirse en su CSS.
Otro error es dejar que CSS se vuelva obsoleto. Como mencioné anteriormente, vale la pena echarle un vistazo a CSS que tiene más de un par de meses para asegurarse de que esté a la altura. Si ve algo desactualizado en este sitio, hágamelo saber y lo actualizaré de inmediato.