¿Por qué no funciona en pero funciona en otras?

Traté de usar la transition en Firefox 15 y no funcionó aunque funcionó en otras versiones de Firefox y otros navegadores como Chrome y Safari.

Cuando veo las propiedades usando el inspector de Firefox, la transition ve afectada y arroja 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 } 

¿Cómo es posible que algunas propiedades como la transition y la animation funcionen en algunos navegadores y no sean válidas en otras?

Descargo de responsabilidad : este es el duplicado canónico para todas las preguntas que se pueden resolver completamente agregando prefijos de proveedor. Las preguntas de desbordamiento de stack no deberían ser tan amplias a menos que se analicen en meta y se cree una respuesta canónica posterior como esta .

Aunque no siempre es el caso, uno de los motivos más comunes por los que una propiedad como la transition o la animation funciona en algunos navegadores y no en otros es debido a los prefijos del proveedor .

¿Cuáles son los prefijos del vendedor?

En el momento en que se presentó 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, es cuando llega a la Recomendación del candidato), los proveedores de navegador agregan prefijos de proveedor a las propiedades, valores y reglas @ para evitar problemas de compatibilidad en caso de que la especificación cambie.

Los prefijos de proveedor son exactamente lo que describe su nombre: un prefijo específico del proveedor (proveedor que significa una empresa 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 encuentra en una de las muchas fases experimentales antes de la etapa de Recomendación del candidato, que es la etapa donde se consideran listos 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 debo usarlos?

Eso depende completamente de qué buscadores servir, qué propiedades y 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 ni se mantienen actualizados.

A continuación, se incluyen algunas de las propiedades y valores prefijados con más frecuencia. Si su proyecto no admite 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 equivalentes prefijados, como -webkit-transition .

Para obtener el soporte completo posible del navegador, es necesario lo siguiente:

 .foo { -webkit-transition: ; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */ -moz-transition: ; /* Firefox 4-15 */ -o-transition: ; /* Old opera */ transition: ; /* Modern browsers */ } 

Tenga en cuenta que existe un prefijo -ms- para la transition , sin embargo, solo fue implementado por las versiones preliminares de IE10 que ya no son funcionales y, por lo tanto, nunca es necesario. Se implementa sin prefijo en IE10 RTM y más nuevo.

Transforma

 .foo { -webkit-transform: ; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */ -ms-transform: ; /* IE9 */ transform: ; } 

Animaciones

Las animaciones deben tener la propiedad prefijada y los fotogtwigs clave correspondientes con el prefijo, de esta manera:

 .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 con el 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: ; -moz-box-flex: ; -webkit-flex: ; -ms-flex: ; flex: ; } 

Calc

 .foo { width: -webkit-calc(); /* Chrome 21, Safari 6, Blackberry browser */ width: -moz-calc(); /* Firefox <16 */ width: calc(); /* Modern browsers */ } 

Gradientes

Vea CSS Gradients en CSS-Tricks para más información.

 .foo { background-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(), to()); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */ background-image: -webkit-linear-gradient(left, , ); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background-image: -moz-linear-gradient(left, , ); /* Firefox 3.6 - 15 */ background-image: -o-linear-gradient(left, , ); /* Opera 11.1 - 12 */ background-image: linear-gradient(to right, , ); /* 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, de left to left señalan formas opuestas . Ver esta respuesta para obtener información de fondo.

Radio del borde (no es necesario en la mayoría de los casos)

 .foo { -webkit-border-radius: ; /* or iOS 3.2 */ -moz-border-radius: ; /* Firefox 3.6 and lower */ border-radius: ; } 

Sombra de caja (no es necesario en la mayoría de los casos)

 .foo { -webkit-box-shadow: ; /* iOS 4.3 and Safari 5.0 */ -moz-box-shadow: ; /* Firefox 3.6 and lower */ box-shadow: ; } 

¿Cómo se pueden implementar con JavaScript?

Para acceder a atributos y eventos prefijados en JavaScript, use el equivalente camelCase del prefijo CSS. Esto es cierto para los oyentes de eventos como foo.addEventListener('webkitAnimationIteration', bar ) también ( foo siendo un objeto DOM, como document.getElementsById('foo') ).

 foo.style.webkitAnimation = ''; foo.style.mozAnimation = ''; foo.style.oAnimation = ''; 

Herramientas de prefijación

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 el prefijo apropiado incluido.

Funciones del preprocesador de CSS :

  • Prefijo de propiedades SASS y SCSS
  • LESS propiedades prefixer

Funciones del prefijo de JavaScript :

  • -prefix-free para propiedades y valores de CSS
  • Prefijo de evento

Vea también: ¿Por qué los navegadores crean prefijos de proveedor para propiedades de CSS?