Los diseñadores solemos tildar a la declaración !important como una declaración tramposa. Cuando me refiero a hacer trampas, hablo sobre que no es necesaria si tu hoja de estilos está bien estructurada. Pero hay veces en las que tienes que modificar el diseño de un proyecto externo, ya sea el de un CMS u otro desarrollo, en el que te ves obligado a utilizar esta declaración. Y es que con !important podemos “saltarnos” cualquier declaración previa, ignorando así el orden cascada y la herencia. De ahí lo de declaración tramposa.
Ojo, !important también es muy útil a la hora de definir reglas de estilo diferentes en navegadores antiguos que, a día de hoy, siguen muy extendidos, como por ejemplo Internet Explorer 6.
Pero dejémonos de presentaciones y vamos a ver cómo funciona !important
Uso de !important
Ya sabéis que CSS significa en castellano Hojas de estilo en cascada (cascading style sheets) pero, ¿qué significa cascada? Pues es la forma en la que se ejecutan las reglas y declaraciones de la hoja de estilos. Por ejemplo, imagina que creamos dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen ese tipo de conflictos. Es por esto que a veces aparecen este tipo de confusiones, cuando declaras una regla y ves que no se aplica. Esto casi siempre es debido a que hay otra que tiene más “prioridad”.
Por otro lado está la herencia. Es decir, ciertas propiedades heredan por defecto los valores del elemento padre, pero hay otras que no. Esto también puede dar lugar a respuestas diferentes a las que esperas.
Pues bien, para saltarte a la torera todo esto está !important. Con esta declaración podrás imponer una regla de estilo sobre las demás, sin importar la cascada ni la herencia.
Para utilizarla en una regla de estilo, debes colocar la declaración justo antes del fin de la regla, antes del punto y coma. Para muestra, un botón:
body{
font-family: Arial !important;
}
En este caso estamos definiendo que en el cuerpo del documento se emplee la Arial como tipografía. Pues si luego en un span definimos que se emplee otra tipografía, prevalecerá la Arial ya que tiene la declaración !important y predomina sobre las demás.
Pero si más tarde la sobreescribimos con otra que por orden de cascada tenga más prioridad, prevalecerá esta última. Por ejemplo:
td{
font-family: Verdana !important;
}
En este caso, si ambas reglas afectan al mismo documento, el texto del td se mostraría con la tipografía Verdana puesto que, por cascada, la regla del td prevalecería sobre la del body. Eso sí, si en el td definiésemos una tipografía sin la declaración !important, en la celda de la tabla, el texto se mostraría con Roboto.
El funcionamiento de important podemos probarlo incluso en el mismo selector. Observemos este código:
td{
font-size: 16px !important;
font-size: 8px;
}
Como véis, hemos definido dos tamaños de fuente distintos en un mismo selector. En situaciones normales, la celda tendría un tamaño de fuente de 8 pixeles puesto que la regla está más abajo que la anterior.
Pues si ponéis esto en práctica, podréis ver que el estilo que aplica el documento es el de 16 píxeles puesto que tiene el !important.
Uso de !important en navegadores antiguos
Desgraciadamente esta declaración no es interpretada por todos los navegadores. Es decir, algunos la aplicarán y otros simplemente la ignorarán. Quizás el caso más popular debido al extendido uso que se le da es el de Internet Explorer 6.
De este modo, podemos utilizar !important a nuestro favor para definir diferentes estilos en Internet Explorer 6. ¿Cómo? De esta manera:
div{
background-image: url(background1.gif) !important;
background-image: url(background2.gif);
}
Como os hemos comentado antes, IE6 ignora el !important. Lo que pasará es que la segunda regla sobrescribirá a la primera ya que está repetida. Es decir, en Internet Explorer 6 se mostrará como fondo la imagen “background2.gif”.
En los otros navegadores que sí interpretan !important, se mostará el fondo “background1.gif”.