Hoy estaba mirando un archivo css y encontré el siguiente conjunto de reglas:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
¿Qué significa la estrella en * padding y * line-height?
Gracias.
Respuestas:
Este es el "truco de propiedad estrella" en la misma línea que el "truco de subrayado". Incluye basura antes de la propiedad que IE ignora (el * funciona hasta IE 7, el _ hasta IE 6).
¿En CSS? Nada; es un error.
Debido a errores en algunas versiones de Internet Explorer, no ignorarán correctamente el nombre de propiedad no válido, por lo que esta es una forma de proporcionar CSS que es específico para esos navegadores.
Sin embargo, usar comentarios condicionales es más claro y seguro.
*antes de una propiedad. Si adquiere un significado, los navegadores actuales lo ignorarán, lo que permitirá que la extensión se agregue de forma segura. Ese es el punto de la regla de "debe ignorar".
El carácter de asterisco es un comodín válido en CSS. Usarlo solo significa que las siguientes propiedades CSS se usarán contra todos los nodos de elementos en el DOM. Ejemplo:
*{color:#000;}
La propiedad anterior se aplicará a todos los elementos DOM, derrotando así la cascada natural en CSS. Solo se puede anular si se etiquetan específicamente los elementos DOM donde esa orientación comienza con una referencia de identificador único. Ejemplo:
#uniqueValue div strong{color:#f00;}
La propiedad anterior anulará el comodín y hará que el texto de todos los elementos fuertes que ocurren en un div dentro de un elemento con un valor de atributo id de "uniqueValue".
El uso de un comodín aplicado universalmente, como el primer ejemplo, puede ser un método rápido y sucio para escribir una hoja de estilo restablecida. Es rápido y sucio porque la definición granular de la presentación después del comodín probablemente creará una hoja de estilo extremadamente hinchada. Si va a usar el comodín, le sugiero que lo use de manera más específica, como:
* strong{color:#f00;}
El ejemplo anterior hará que el texto de todos los elementos fuertes sea de color rojo independientemente de otras propiedades CSS no especificadas con un identificador único. Esto se considera mucho más seguro que usar la declaración "! Important", ya que se sabe que esa declaración causa interferencia con la funcionalidad natural de los comportamientos previstos y es una pesadilla de mantenimiento.
Los asteriscos en su ejemplo están en el lugar equivocado ya que parecen ocurrir dentro de las declaraciones de propiedad, el código que va entre llaves, y eso probablemente causará un error.
Este es un truco para IE7.
Si escribe esto:
.test {
z-index: 1;
*z-index: 2;
}
en todos los navegadores que respetan el estándar W3C <div class="test"></div>HTMLElement tienen un z-index: 1pero para IE7, este elemento tiene un z-index: 2.
Esto no es estándar.
Para lograr lo mismo con el estándar W3C, siga estos pasos:
Agregue un comentario condicional de Internet Explorer (este es un comentario HTML simple para todos los demás navegadores, por lo que es una forma estándar).
<! - [if IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->
<! - [if gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->
Y usa las reglas anteriores como esta:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}