Uso de animaciones Css para pisar herencia, cascada e !important

Las novedades en la importancia de las reglas Css por su origen y uso de las animaciones y transiciones Css para anular la cadena !important

Uso de animaciones Css para pisar herencia, cascada e !important

Por Kseso ✎ 0
Uso de animaciones Css para pisar herencia, cascada e !important

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):

  1. Declaraciones con !important del usuario.
  2. Declaraciones con !important del autor.
  3. Declaraciones normales en los estilos del usuario.
  4. Declaraciones normales en los estilos del autor.
  5. 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:

  1. Declaraciones de transición [CSS3 transitions]
  2. Declaraciones de agentes de usuario con !important
  3. Declaraciones del usuario con !important
  4. Declaraciones de anulación con !important [DOM-LEVEL-2-STYLE]
  5. Declaraciones de autor con !important
  6. Declaraciones de animación [CSS3-ANIMATION]
  7. Declaraciones de anulación normales [DOM-LEVEL-2-STYLE]
  8. Declaraciones de autor normales
  9. Declaraciones de usuario normales
  10. 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;} }

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap