La importancia de !important en CSS

Tweet

Este es el mismo título utilizado en YellowJug para describir una entrada que explica las funciones de esta palabra clave de las CSS.

!important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la última:

#main {
width:600px;
width:800px;
}

Por lo tanto en este ejemplo el navegador asignará 800 píxeles.

La declaración !important puede ser usada para dar prioridad a diferentes parámetros:

#main {
width:600px !important;
width:800px;
}

Ahora en este ejemplo se aplicará un ancho de 600 píxeles.

Internet Explorer 6 y versiones anteriores ignoraba esta palabra clave (!important) mientras que IE7 si la soporta por lo que se puede utilizar para realizar pequeños hacks CSS.

O lo que es lo mismo para poder aplicar diferentes diseños en una misma hoja de estilo tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las entiendan uno de los dos navegadores.

Por lo tanto lo podemos utilizar de tal manera que distingamos entre distintas reglas dependiendo del navegador y sin necesidad de usar Javascript, es un hack muy básico pero sin duda ayudará a entender para que sirve la palabra clave “!important”:

#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;
width:800px;
}

En este ejemplo aplica un ancho dinámico (auto) a todos aquellos navegadores que soportan “!important” mientras que aplica un ancho de 800 píxeles a aquellos que no lo soportan por ejemplo IE6.

Este pequeño truco no es realmente del todo útil pero sin duda te ayudará a comprender el significado de esta palabra clave CSS.

Pero no hay que olvidar que !important es muy potente porque se antepone al resto de reglas por lo que hay que usarla con cuidado como por ejemplo cuando queremos que una definición no sea sustituida por ninguna otra ó para restablecer el valor de una propiedad que no nos acordamos donde le asignabamos un valor que ahora no queremos (sale algo en color rojo y no nos acordamos pues color: green !important; y listo).

Enlaces Relacionados

6 cosas que probablemente no conozcas sobre PHP
PHP y MySql una estrecha relación
Las 10 mejores librerías
Howto encriptar passwords en la base de datos
El framework más popular de Ajax
Manual y ejemplos con Smarty
8 lenguajes de programación que deberías aprender
Generar documentos OpenOffice con PHP
Entrevista a Marten Mickos, CEO de MySql
Urls amigables
Fácil sistema de autentificación (login, password) PHP
Bases de datos y PHP