¿Por qué no funciona[característica CSS] en[navegador] pero funciona en otros?
cross-browser vendor-prefix (1)
Intenté usar la transition en Firefox 15 y no funcionó a pesar de que funcionó en otras versiones de Firefox y otros navegadores como Chrome y Safari.
Cuando veo las propiedades utilizando el inspector de Firefox, la transition se realiza y da un error de "Valor de propiedad no válido". MDN y caniuse dicen que es compatible con Firefox 4 y superior!
#mydiv {
transition: width 1s; /* Did I do this wrong? */
background: #f00;
width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }
¿Por qué a veces las propiedades como la transition y la animation funcionan en algunos navegadores y no son válidas en otros?
Descargo de responsabilidad : Este es el duplicado canónico para todas las preguntas que se pueden resolver completamente agregando prefijos de proveedores. Las preguntas de desbordamiento de pila no deberían ser tan amplias a menos que se discutan en meta y una respuesta canónica creada a partir de entonces como esta .
Aunque no siempre es así, una de las razones más comunes por las que una propiedad como transition o animation funciona en algunos navegadores y no en otros es por los prefijos de los proveedores .
¿Qué son los prefijos de los proveedores?
En el momento en que se introdujo la versión 4 de Firefox, la especificación del módulo de transición CSS era un borrador de trabajo. Antes de finalizar una especificación (en la práctica, esto es cuando llega a la Recomendación del candidato), los proveedores de navegadores agregan prefijos de proveedores a las propiedades, los valores y las reglas @ para evitar problemas de compatibilidad en caso de que la especificación cambie.
Los prefijos de proveedores son exactamente lo que su nombre describe: un prefijo específico de un proveedor (que significa una compañía que desarrolla un navegador) de una propiedad o valor. A menudo se implementan de una manera específica para cada navegador porque la propiedad o el valor aún se encuentran en una de las muchas fases experimentales antes de la etapa de Recomendación del candidato, que es la etapa en la que se consideran listas para la implementación .
Los más comunes son -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.), y -ms- (Microsoft Internet Explorer), pero hay más .
¿Cuándo necesito usarlos?
Eso depende completamente de los navegadores que desea servir, las propiedades y los valores que está utilizando y en qué momento está desarrollando su sitio web. Hay sitios que intentan mantener una lista actual, pero no siempre son precisos o actualizados.
A continuación se presentan algunas de las propiedades y valores con prefijo más común. Si su proyecto no es compatible con los navegadores mencionados en el comentario a la derecha de la propiedad, entonces no es necesario incluirlo en su CSS.
Transiciones
Una propiedad no prefijada a veces tiene prefijos equivalentes, como -webkit-transition .
Para obtener el máximo soporte de navegador posible, es necesario lo siguiente:
.foo {
-webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
-moz-transition: <transition shorthand value>; /* Firefox 4-15 */
-o-transition: <transition shorthand value>; /* Old opera */
transition: <transition shorthand value>; /* Modern browsers */
}
Tenga en cuenta que existe un prefijo -ms- para la transition , sin embargo, solo se implementó con versiones preliminares de IE10 que ya no son funcionales y, por lo tanto, nunca son necesarias. Se implementa sin prefijo en IE10 RTM y más reciente.
Transforma
.foo {
-webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
-ms-transform: <transform-list>; /* IE9 */
transform: <transform-list>;
}
Animaciones
Las animaciones deben tener el prefijo de la propiedad y el prefijo de los fotogramas clave, así:
.foo {
-webkit-animation: bar; /* Safari 4+ */
-moz-animation: bar; /* Fx 5+ */
-o-animation: bar; /* Opera 12+ */
animation: bar; /* IE 10+, Fx 16+ */
}
@-webkit-keyframes bar { /* Keyframes syntax */ }
@-moz-keyframes bar { /* Keyframes syntax */ }
@-o-keyframes bar { /* Keyframes syntax */ }
@keyframes bar { /* Keyframes syntax */ }
Flexbox
Los valores también pueden ser prefijados, como en el caso de flexbox . Nota : para una compatibilidad máxima del navegador, las propiedades específicas de flexbox como ordinal-group , flex-flow , flex-direction , order , box-orient , etc. deben tener el prefijo en algunos navegadores además de lo siguiente:
.foo {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: <flex shorthand value>;
-moz-box-flex: <flex shorthand value>;
-webkit-flex: <flex shorthand value>;
-ms-flex: <flex shorthand value>;
flex: <flex shorthand value>;
}
Calc
.foo {
width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
width: -moz-calc(<mathematical expression>); /* Firefox <16 */
width: calc(<mathematical expression>); /* Modern browsers */
}
Gradientes
Ver Gradientes CSS en CSS-Tricks para más información.
.foo {
background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}
Tenga en cuenta que la left y la to right representan la misma dirección, de izquierda a derecha, y por lo tanto, la left y la to left apuntan en sentido opuesto . Ver esta respuesta para obtener información de fondo.
Radio de borde (No es necesario en la mayoría de los casos)
.foo {
-webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
-moz-border-radius: <length | percentage>; /* Firefox 3.6 and lower */
border-radius: <length | percentage>;
}
Sombra de caja (No es necesario en la mayoría de los casos)
.foo {
-webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
-moz-box-shadow: <box-shadow shorthand value>; /* Firefox 3.6 and lower */
box-shadow: <box-shadow shorthand value>;
}
¿Cómo se pueden implementar con JavaScript?
Para acceder a los atributos y eventos prefijados en JavaScript, use el equivalente de camelCase del prefijo CSS. Esto se foo.addEventListener(''webkitAnimationIteration'', bar ) oyentes de eventos como foo.addEventListener(''webkitAnimationIteration'', bar ) ( foo es un objeto DOM, como document.getElementsById(''foo'') ).
foo.style.webkitAnimation = ''<animation shorthand value>'';
foo.style.mozAnimation = ''<animation shorthand value>'';
foo.style.oAnimation = ''<animation shorthand value>'';
Herramientas de prefijo
Los prefijos en línea pueden ser útiles pero no siempre son confiables. Siempre asegúrese de probar su proyecto en los dispositivos que desea admitir para asegurarse de que cada uno tenga incluido el prefijo correspondiente.
Funciones de preprocesador CSS :
Funciones de prefijo de JavaScript :
Vea también: ¿Por qué los navegadores crean prefijos de proveedores para las propiedades CSS?