¿Cómo se leen las propiedades de CSS no compatibles del navegador?

Por accidente de hoy, he descubierto que en IE6, IE7 e IE8 es posible leer las propiedades CSS no compatibles con el método css() de jQuery:¿Cómo se leen las propiedades de CSS no compatibles del navegador?

jQuery(node).css('transition'); // Returns the transition value

Esto me permitió añadir un repliegue de la animación Transiciones de CSS3 a estos navegadores en mi plugin de jQuery jquery.transitions (github.com/stephband/jquery.transitions). Alegría.

La pregunta es: ¿es posible leer propiedades de CSS no compatibles en otros navegadores? Mis pruebas iniciales usando el método anterior en FF3.6 e IE9 fueron infructuosas. ¿Hay alguna otra manera, menos de analizar las hojas de estilo?

Fuente

2011-05-18 stephband

Bueno, se supone que los navegadores ignoran completamente las propiedades que no entienden o no admiten (consulte [esta sección de la especificación] (http://www.w3.org/TR/css3-syntax/#error-handling)). Aunque es un descubrimiento bastante interesante, obtiene un +1 – BoltClock

Sí, yo también lo pensé. Así que estaba encantado con la extravagancia de IE por una vez. Debo señalar, solo he probado esto con un doctype html5, en modo estándar, bla, bla ... No sé si otros modos marcarían la diferencia. El problema es que IE9 se comporta correctamente.Grrr :) – stephband

Me doy cuenta de que esto es antiguo, pero me pregunto si ha habido algún progreso en la lectura de propiedades CSS no compatibles en otros navegadores ... –

Para IE9:

Después de algunas pruebas, he hecho un descubrimiento adicional.

Aunque 'transition' no es una propiedad soportada en IE9, SI aparece en document.stylesheets [n] .cssRules [n] .cssText, a diferencia de otros navegadores, y finalmente aparece como getComputedStyle (node). transición. Esto significa que leer es fácil. Doble alegría!

Es interesante, y probablemente sea inútil, que aparezcan también todas las reglas prefijadas, por lo que puede leer las reglas prefijadas -moz- y -webkit- en su JavaScript.

Para FF3.6/WebKit

No hay tales trucos para FF3.6 o por debajo, o WebKit, aunque no estoy demasiado preocupado. Creo que la toma de FF4 será bastante rápida.

Fuente

2011-05-19 00:53:43 stephband

... Y así es como evitamos la compilación offline de CSS y JS solo para agregar algunas constantes. O eso espero. –

No estoy seguro de que esta técnica funcione demasiado bien en la mayoría de los navegadores, como dice @BoltClock, no es algo que el navegador debería estar haciendo, así que parece que tienes suerte con IE.

Si quisiera proporcionar este tipo de funciones de respaldo, usaría Modernizr para detectar las características que faltaban.

Fuente

2011-05-18 20:49:14 Spudley

Gracias. Temía que acabara de tener suerte. Ya tengo detección, así que eso no es realmente parte del problema. El verdadero problema es leer el valor de una propiedad no admitida. – stephband

La especificación DOM Level 2 Style de 2000 algo tenía una provisión para acceder programáticamente a las reglas que un usuario-agente no entendía. Escribí un answer repasando la especificación anterior y una de las referencias de comentarios a bug presentada con Mozilla para implementarlo.

Sin embargo, ninguno de los proveedores de navegador implementó esta característica. Entonces, en la última especificación, w3 eliminó esta característica por completo. Puede encontrar el discussion thread solicitando volver a implementar esta característica en la especificación, pero eso fue en 2009, y es 2011 ahora, y w3 no parece interesado en volver a agregarlo.

Así que técnicamente IE era conforme con la especificación hasta que uno nuevo llegó :)

Fuente

2011-05-19 18:59:50 Anurag

Gracias. Aunque eso no responde directamente la pregunta, tu explicación de por qué tenemos lo que tenemos es muy útil. +1 – stephband

En IE9 encontré getComputedStyle no funciona de forma fiable para todas las propiedades no compatibles, mientras que esto hace:

element.currentStyle.getAttribute('-some-test')

Fuente

2013-06-03 09:28:15 Tobia

¿Cómo se leen las propiedades de CSS no compatibles del navegador?

Respuesta

Cuestiones relacionadas