¿Qué significa una propiedad precedida de estrellas en CSS?

85

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.

css Majid Fouladpour
fuente

Respuestas:

98

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

opello
fuente
7
¡Gracias! Y busqué "truco de propiedad estrella" y encontré esta publicación clara y completa de Ed Eliot: "Sugerencia de CSS: dirigirse a IE 5.x, 6 y 7 por separado" en ejeliot.com/blog/63
Majid Fouladpour
1
en lugar de usar trucos css, también puedes probar con comentarios condicionales, por ejemplo, consulta quirksmode.org/css/condcom.html para obtener más información.
Capi Etheriel
Cabe señalar que Safari (7.0.1) y las versiones anteriores (no se puede verificar) arrojarán advertencias de consola si usa el truco de propiedad estrella.
Jim
RIP IE7 y este tipo de "arreglos".
ChristoKiwi
nota: "Dado que los comentarios condicionales utilizan la estructura de comentarios HTML, solo se pueden incluir en archivos HTML y no en archivos CSS" quirksmode.org/css/condcom.html
George Birbilis
32

¿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.

Quentin
fuente
2
En efecto. Deben evitarse los hacks de CSS que no sean CSS válidos; nunca se sabe lo que podría hacer un navegador futuro con ellos.
Bobince
@bobince Me doy cuenta de que hizo ese comentario en el pasado, pero ahora podemos estar absolutamente seguros de cómo cada navegador futuro interpretará esto, ya que el algoritmo de análisis de CSS es muy estricto y le dice al navegador que ignore silenciosamente tales reglas.
mgol
1
@m_gol - No, no podemos. No sabemos qué dirá una futura especificación de CSS sobre el significado de un *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".
Quentin
8

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.


fuente
4
Responde lo que busqué en Google, incluso si no es la respuesta correcta
Steve
4

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;
}
Bruno Lesieur
fuente