Todo lo que necesitas saber acerca de la instrucción ! Importante
Fecha de publicación : 12/08/2010
Por Louis Lazaris (Autor )
Christopher F. (Traductor )
Este artículo es una traducción: Todo lo que necesitas saber sobre la Declaración de "importante CSS. Buscar traducciones disponibles en la web Impresionante http://css.developpez.com.
Recientemente me encontré con algunos artículos hablando de la declaración CSS ! Importante y estaban confundidos sobre lo que hizo esta declaración y cómo se podría utilizar , como puede verse en los comentarios de los lectores de estos artículos .
Así que pensé en hacer la investigación sobre la prórroga del único sistema de la propiedad CSS - valor y hacer un artículo completo sobre esta declaración la cual examinará la información básica que los desarrolladores deben saber antes de considerar su uso en su hoja de estilos.
En este artículo se explicará qué es, cómo declarar, dar algunos elementos prácticos de usar y detalles de los inconvenientes que deben tenerse en cuenta antes de su aplicación.
I. ¿Qué es?
II. ¿Cómo se declara ?
III. Algunos de sus usos prácticos
III -A. Orientación de Internet Explorer 5 y 6
III -B. Actualización en línea estilos
III -C. Cambiar estilos de actualizar a Firebug
IV. Y hay algunas desventajas para su uso?
V. Más detalles técnicos
VI. Finalmente
VII. Gracias
I. ¿Qué es?
Declaración ! Importante es una palabra clave que se pueden agregar al final de una declaración CSS para dar más peso a este valor. La razón por la que se utiliza está relacionado con la naturaleza de la CSS , que asigna un peso a los valores según el lugar en que aparecen en la "cascada" . Un estilo CSS se aplican en función de cuatro factores en el orden siguiente :
directas y específicas ( por ejemplo, elementos <ul> se les asigna un ancho de 300px )
importancia del estilo (por ejemplo, le encomiendo el estilo se declara en la hoja de estilos para el usuario? )
especificidad de la selección ( por ejemplo, elementos <ul> dentro de los elementos <div> se les asigna un ancho de 400 píxeles)
orden de aparición ( por ejemplo, el último informe se aplican )
Al informar ! Importante se utiliza en un par específico de la propiedad / valor, valor que es la de escapar de la cascada y convertirse, como su nombre indica , el valor más importante de esta propiedad , anulando todos los demás valores .
II. ¿Cómo se declara ?
Un sencillo ejemplo demuestra el uso de ! Importante :
|
En el ejemplo anterior , aunque el estilo de background-color se especifica en la norma segunda es más específica debido a la selección y se declara final, la primera regla sería prioridad debido a la presentación de informes adicionales ! Importante. Así, el color de fondo del elemento en cuestión (tema # Leftside) será de color verde (# 0f0 ) en lugar de rojo ( # f00 ) .
Usted también puede tener una declaración ! Importante que supera a otra declaración ! Importante. Echa un vistazo a el siguiente ejemplo:
|
Los estilos anteriores son idénticas a las del ejemplo anterior, con la adición de otra regla al principio, que también incluye una declaración ! Importante. En este ejemplo, el primer valor del background-color tendrán prioridad debido a dos factores : en primer lugar , la declaración contiene la declaración ! ImportanteEntonces tiene un selector más específico.
III. Algunos de sus usos prácticos
III -A. Orientación de Internet Explorer 5 y 6
Uno de los usos más conocidos para la presentación de informes ! Importante es apuntar a las versiones de Internet Explorer 5 y 6 que ignoran la declaración ! Importante cuando los mismos bienes se declara dentro de la misma norma . Por ejemplo :
|
En el código anterior, el ancho de # Header 300px es en todos los navegadores excepto Internet Explorer 5 y 6, que utiliza el ancho de 400 píxeles de segundo . Dada la popularidad de estos navegadores está disminuyendo (pero no tan rápido !) , El uso de este truco no es tan generalizado. Además , yo personalmente considero que el hack * Html Es mucho más práctico como objetivo a Internet Explorer 6 , siempre que el uso de la instrucción ! Importante puede tener efectos adversos importantes.
III -B. Actualización en línea estilos
Un uso más práctico de la declaración ! Importante es superan a los estilos en línea que se generan de forma dinámica debido a su contenido introducido por el usuario . Por ejemplo, un sitio web puede tener una CMS que puede dar formato a texto en un editor WYSIWYG a disposición del propietario del sitio. Como texto con formato entrado en esta interfaz debe superar a todas las demás normas de estilo, estos estilos se insertan como estilo en línea en el código HTML generado .
Sin embargo, estos estilos se pueden actualizar en línea con las declaraciones ! Importante insertado en el autor hoja de estilos. Mira el siguiente código HTML :
|
El código anterior declara un estilo en línea atribuir fondo de color "morado" en la celda con el id # Header. Este estilo de superar a cualquier otro valor de la propiedad background-color en el autor de hoja de estilos , a excepción de la excepción siguiente :
|
Incluso con el fondo " violeta "declarada por un estilo en línea, la declaración ! Importante superan a los de fondo morado y asignar al elemento # Header rojo el color de fondo .
III -C. Cambiar estilos de actualizar a Firebug
Otro uso para la presentación de informes ! Importante es cuando queremos cambiar dinámicamente los estilos de Firebug , un plugin de Firefox . Cuando usted visita una página web en Firefox , puede hacer clic en cualquier elemento de la página y selecciona " Inspeccionar elemento " , que se abrirá la ventana de Firebug que le da acceso a las herramientas para modificar los estilos de la página sobre la marcha. Usted verá los cambios en tiempo real. Por supuesto, estos estilos se aplican sólo a nivel local y se restablecerán a sus valores por defecto cuando la página se actualiza.
Una situación que puede ocurrir que la necesidad de dar peso a un estilo aparece en la ventana de Firebug que ha sido superado . Los estilos se muestran cruzado superó en Firebug. Puede hacer clic en un estilo actualizado para editar y añadir la mención ! Importante, como ha sido modificado el estilo , tendrá prioridad, de la misma manera como en los ejemplos anteriores.
IV. Y hay algunas desventajas para su uso?
Por supuesto. De hecho , le recomiendo encarecidamente que nunca utiliza la instrucción ! Importante. Sé que es una declaración audaz y está claro que habrá situaciones donde los desarrolladores se verán tentados a utilizarlo, pero en el 99 % de los casos habrá una solución mejor. Actualizar un estilo en línea que usted no puede cambiar de lo contrario es probablemente la única razón que se apruebe su uso personal . Yo código en HTML y CSS para unos nueve años y nunca he utilizado la declaración ! Importante. De hecho, durante mucho tiempo yo ni siquiera sabía su existencia, que , en retrospectiva, fue una buena cosa.
Algunas de sus desventajas :
promueve un código mal concebida y olvidadas.
crea código que es menos fácil de mantener .
supera los estilos declarados en la hoja de estilo del usuario, la reducción de la accesibilidad.
Con estos puntos clave en mente, el uso de la instrucción ! Importante debe ser considerada sólo después de todas las demás vías se han agotado .
V. Más detalles técnicos
Al informar ! Importante se utiliza , debe tenerse en cuenta después de que el valor de la propiedad a la que tiene la intención de dar el peso .
Declaración ! Importante se puede utilizar con las propiedades resumidas . Cuando lo utiliza , la declaración ! Importante asignar más peso a cada valor reportado para la propiedad taquigrafía. Por ejemplo :
|
Con el código CSS anterior, la primera regla, que establece con la propiedad resumida relleno, tiene prioridad sobre la segunda regla , incluso si tiene un selector más específico , dijo que el acolchado con propiedades que no se acortan y declarado es pasado en la cascada.
Una declaración ! Importante que se define en la hoja de estilo que el usuario tiene más peso que una declaración se define en la hoja de estilo del autor (aunque esto se revirtió en un CSS). Esto es cierto incluso si el autor de hojas de estilo tiene precedencia sobre la hoja de estilos para el usuario en el flujo normal de la cascada.
El principal objetivo de la declaración ! Importante es permitir a los usuarios que tienen necesidades específicas para incluir en sus propias hojas de estilo para influir en los parámetros de tamaño y color de la fuente sin tener que obedecer las reglas de la cascada .
Por último , hubo , muy pocos artículos que se decía que la única manera de reemplazar los estilos en línea fue el siguiente :
|
Nota del estilo] [ es un selector de atributos , además de la declaración ! Importante. En este ejemplo , se recogieron todos <div> elementos que se declara un atributo de estilo en HTML. Esto no es necesario . Declaración ! Importante es todo lo que es necesario para permitir a reemplazar los estilos en línea en el ejemplo anterior . Sin embargo, usando el selector de atributo selecciona elementos específicos con el atributo "style" . Por lo tanto, pueden tener usos prácticos en su trabajo.
Cabe señalar que este selector de atributo no funciona con Internet Explorer 6 y 7 , este método se hace menos útil como tal.
 |
Nota : Después de haber sido rediseñado , me di cuenta de que pasé por alto un punto importante ya que los estilos en línea se puede añadir a muchas etiquetas HTML que no tienen ninguna clase o id y no podemos sé estilos que se asignan etiquetas , utilice el selector de atributo es la única manera de anular estos estilos. Puedo entender por qué estos elementos eran tan firmes sobre el hecho de que este es el único método para superar a los estilos en línea . Sin embargo, creo que la explicación un poco más precisos habría tenido más claro. Supongo que usted también puede usar JavaScript para apuntar todas las etiquetas que contienen los estilos en línea para asignar una clase. |
VI. Finalmente
Usted va a entender , no utilice la declaración ! Importante hasta que haya probado todas las demás vías , y tener en cuenta las molestias. Si lo usa , es probable que sea lógico, si es posible , para poner un comentario en su hoja de estilo al lado de todos los estados que serán superados , para garantizar un código más fácil de mantener .
Traté de cubrir los puntos esenciales en relación con el uso de la instrucción ! ImportanteAsí que por favor dejar un comentario si usted siente que no me llegaron o inexactitud quede algo y voy a estar feliz de hacer las correcciones necesarias : comentario.
VII. Gracias
http://christophe-f.developpez.com/traductions/css/declaration-important/
