De cómo anular los !important aunque estén en línea con puro Css 31.5.17
O de cómo anular un !important aunque esté en los estilos en línea con las novedades en la importancia de las reglas Css por su origen y el uso de las animaciones y transiciones CSS. Que también puede ser usado para pisar la herencia y cascada.
De cómo anular los !important aunque estén en línea con puro Css
Repasemos lo que decía la especificación sobre la importancia de una regla en base a su origen. Esto es, en caso de colisión entre dos declaraciones y a igualdad de especificidad cuál de ellas prevalece y se aplica en función de dónde esté declarada:
Importancia y origen de las reglas Css:
El peso de una declaración CSS depende de dónde venga y su grado de importancia. En caso de haber declaraciones contradictorias se aplicarán en el siguiente orden, de mayor a menor (la 1ª prevalece sobre la 2ª y ésta sobre la 3ª... La 5ª es la que menos peso tiene):
- Declaraciones con !important del usuario.
- Declaraciones con !important del autor.
- Declaraciones normales en los estilos del usuario.
- Declaraciones normales en los estilos del autor.
- Declaraciones del agente de usuario (navegador).
Este es un extracto del artículo CSS básico: Cascada, especificidad y herencia al que te remito para conocer a fondo el tema.
Novedades en la importancia de las reglas Css
El documento recién publicado CSS Cascading and Inheritance Level 4 [21-04-2015] viene con novedades y modificaciones, por ampliación, en este aspecto. Bueno, en realidad ya están recogidas en el "level 3" con status CR, pero queda más "actual" referenciar el 4 ;-)
En realidad lo que hace es recoger y "santificar" lo que ya viene sucediendo de hecho aunque quizás no te hayas parado a pensar en ello.
Así queda redactado este punto en el nuevo documento del W3c:
Origen e Importancia
El origen de la declaración se basa en de dónde viene y su importancia es si tiene o no declarada la cadena "!important". La prioridad de los distintos orígenes es, en orden descendente:
(W3C dixit)
- Declaraciones de transición
[CSS3 transitions] - Declaraciones de agentes de usuario con
!important - Declaraciones del usuario con
!important - Declaraciones de anulación con
!important[DOM-LEVEL-2-STYLE] - Declaraciones de autor con
!important - Declaraciones de animación [CSS3-ANIMATION]
- Declaraciones de anulación normales [DOM-LEVEL-2-STYLE]
- Declaraciones de autor normales
- Declaraciones de usuario normales
- Declaraciones de agentes de usuario normales
Dos son las novedades más significativas, aparte de incrementarse de 5 a 10 ya que desglosa los orígenes (agente, usuario y autor) en dos: si tienen o no la cadena !important:
- Cambia la importancia del origen por agente de usuario, autor y usuario si tiene o no la cadena
!important - Entran en la lista las propiedades contenidas en las transiciones y animaciones.
Anulando la importancia con animaciones Css
Supongamos que en un punto inaccesible para el autor hay una declaración con un gran !important. Ya sea en los estilos del usuario del navegador u en otra parte, como un estilo en línea:
<p style='color:red!important'>Hola Mundo</p>
Para anularlo, y esto ya es funcional en los navegadores que soportan las animaciones, basta con declarar una animación tal que así para el caso anterior:
[style*='!important'] {
animation: animat .1s forwards;
}
@keyframes animat {
0%, 100% {color: black;}
}
¡Hecho! Ese párrafo lucirá en color negro pese al important que lleva en línea.
Y si ocurriese que hay unos cuantos "!important" acompañando a múltiples elementos y en propiedades de lo más variado también es posible hacerlo de forma breve. Sólo hay que recurrir a la propiedad all:
<p style='color:red!important'>Hola Mundo</p> <<strong style='font-weight: normal!important'>Oppss!<strong> <section style='opacity:.5!important;'>...
[style*='!important'] {
animation: animat .1s forwards;
}
@keyframes animat {
0%, 100% {all: unset;}
}
See the Pen jmgBWG by Kseso (@Kseso) on CodePen.
Este uso de las animaciones y transiciones CSS también es válido para anular valores que aplican a un elemento por herencia y/o cascada.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
genial,
ResponderEliminarme quedo la duda sobre que son las Declaraciones de anulación normales, ¿sobrescritura de css?
Hola Daniel
EliminarEse es un punto al que presté demasiada importancia por diversas razones que no vienen al caso.
Pero siempre puedes seguir el enlace e intentar ampliarlo por tu cuenta.
Y si encuentras algo interesante compartirlo por aquí 😉
Un saludo
Y yo porque me perdí la notificación en su momento sobre este HITO HISTÓRICO!!!
ResponderEliminarEn fin que aprovecho para darte un feliz navidad y feliz año 2018!! Así medio tirado en un articulo x viejo, pero es que sale del improviso. Las mejores birras y entre sabanas para este nuevo año y por supuesto mucho más @escss!!