¿Por qué se invalida este importante valor de CSS?

Question

HTML:

<div id="test">This is a test</div> 

JavaScript:

var elem = document.getElementById('test'); 

elem.style.setProperty('color', 'green', 'important'); 
elem.style.color = 'red'; 

Demostración en directo:http://jsfiddle.net/4fn6h/3/

El texto es de color verde en Chrome, Safari, e IE9, pero el rojo en Firefox y Opera. (Además, el texto es negro en IE7 e IE8, porque el código arroja un error, pero ignoremos eso ...)

Entonces, ¿qué navegadores siguen el estándar aquí? ¿Debería ser posible anular setProperty(...,'important') o no?

Answer 1

Podría ser que el comportamiento de Firefox y Opera sea más apropiado.

Cuando ejecute elem.style.color = 'red'; no desactivó la prioridad "importante" en el color, en cuyo caso tendría sentido cambiar el color a rojo. En cuanto a por qué eligen hacerlo de una manera u otra, no lo sé.

Answer 2

La especificación no está clara. Hay dos formas de verlo:

1. es un error en WebKit/IE9. Si está sobrescribiendo el valor color, no hay ninguna razón para que el valor anterior se quede, importante o no.
2. WebKit/IE9 son correctos. La interfaz DOM style manipula la propiedad style del elemento, que se considera CSS Declaration Block. En un bloque CSS, una propiedad con !important establecerá siempre tendrá prioridad sobre los que no tienen. Según esa regla, el cambio a 'rojo' no debería tener ningún efecto, por lo que se ignora de manera efectiva.

Creo que esta última es la explicación más probable. Considerar la posibilidad de una declaración como esta:

p { color: red !important; } 

Si se agrega una segunda regla color, sin !important, no tiene ningún efecto:

p { 
    color: red !important; 
    color: blue; 
} 
/* the color is still red */ 

Lo mismo se aplica a la manipulación del HTML style atribuyen directamente.

Entonces el comportamiento en Chrome/Safari/IE9 es consistente con las reglas de cascada CSS, mientras que FF y Opera tratan el estilo DOM como un objeto simple sin tener en cuenta las reglas en cascada, no como una interfaz a las declaraciones CSS.

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

---

Diversión hecho: webkit parece estar haciendo un partido de cadena para important, así que esto también funciona:

elem.style.setProperty('color', 'red', 'this is a really important rule'); 

---

Y un consejo: elegir un mejor par de colores la próxima vez, está haciendo que sea difícil para los daltónicos ayudar :)

Answer 3

Sh ¿Sería posible anular un setProperty (..., 'importante') o no? sí, debería. pero tiene que hacerlo con otra llamada ele.style.setProperty. eche un vistazo a this y debería ver red en todos los navegadores modernos.

Entonces, ¿qué navegadores siguen el estándar aquí? desde green se establece con !important, no debe reemplazarse con red ya que red no está configurado con !important. eso significa que Chrome, Safari e IE9 están siguiendo el estándar y que Firefox NO.