2009-11-03 11 views
80

yo estaba buscando en un archivo css hoy y encontré el siguiente conjunto de reglas:¿Qué significa una propiedad precedida de estrellas en CSS?

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 el relleno y * * línea de altura?

Gracias.

Respuesta

92

Este es el "truco de propiedad estrella" en la misma línea que el "corte bajo subrayado". Incluye basura antes de la propiedad que IE ignora (el * funciona hasta IE 7, el _ hasta IE 6).

+7

Gracias! Y busqué "hack de propiedad estelar" y encontré esta publicación clara y completa de Ed Eliot: "Sugerencia de CSS: segmentación de IE 5.x, 6 y 7 por separado" en http://www.ejeliot.com/blog/63 –

+1

en lugar de usar css hacks, también puedes probar los comentarios condicionales, es decir, consultar http://www.quirksmode.org/css/condcom.html para obtener más información. –

+0

Se debe tener en cuenta que Safari (7.0.1) y las versiones anteriores (no se puede verificar) emitirán avisos de consola si usa el hack de propiedad de estrella. – Jim

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.

El uso de comentarios condicionales es más claro y seguro.

+2

hecho. Los hacks de CSS que no son CSS válidos deben evitarse; nunca se sabe lo que un futuro navegador podría hacer con ellos. – bobince

+0

@bobince Me di cuenta de que ya habías hecho ese comentario en el pasado, pero ahora podemos estar absolutamente seguros de cómo interpretará esto cada navegador futuro, ya que el algoritmo de análisis CSS es muy estricto y le dice al navegador que ignore silenciosamente dichas reglas. – mgol

+1

@m_gol - No, no podemos. No sabemos lo que una especificación CSS futura dirá sobre el significado de un '*' antes de una propiedad. Si obtiene un significado, los navegadores actuales lo ignorarán permitiendo que la extensión se agregue de forma segura. Ese es el punto de la regla "debe ignorar". – Quentin

7

El carácter asteriks es un comodín válido en CSS. Usarlo solo significa que las siguientes propiedades de CSS se usarán contra todos los nodos de elementos en el DOM. Ejemplo:

La propiedad anterior se aplicará a todos los elementos DOM, con lo que se anulará la cascada natural en CSS. Solo se puede redefinir mediante la creación de elementos DOM específicos en los que esa orientación comience con una referencia de identificador única. Ejemplo:

#uniqueValue div strong{color:#f00;} 

la propiedad anterior anulará el comodín y hacer que el texto de todos los elementos fuertes que se producen en un div dentro de un elemento con un valor de atributo ID de "uniqueValue".

El uso de un comodín de aplicación universal, como el primer ejemplo, puede ser un método rápido y sucio para escribir una hoja de estilo de restablecimiento. Es rápido y sucio porque la definición granular de presentación después del comodín probablemente creará una hoja de estilo extremadamente hinchada. Si se va a utilizar el comodín se recomienda usar más específicamente, tales como:

* strong{color:#f00;} 

El ejemplo anterior hará que el texto de todos los elementos de color rojo fuerte, independientemente de otras propiedades CSS no especificados con un identificador único . Esto se considera mucho más seguro que usar la declaración "! Importante" ya que se sabe que esa declaración interfiere 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 estar dentro de las declaraciones de propiedad, el código que se encuentra entre llaves, y que probablemente causará un error.

+2

Hasta el más informativo, piratear -free answer –

+31

Informativo, sí, pero no relacionado con esta pregunta. –

+3

Respuestas de lo que busqué en Google, incluso si no es la respuesta correcta – Steve

4

Esto es un truco para IE7.

Si se escribe esto:

.test { 
    z-index: 1; 
    *z-index: 2; 
} 

sobre todo navegante que respetan el estándar W3C <div class="test"></div> HTMLElement tener un z-index: 1 pero para IE7, este elemento tiene un z-index: 2.

Esto no es estándar.

Para lograr lo mismo con W3C estándar, seguir los siguientes pasos:

  • Agregue un poco de Internet Explorer comentarios condicionales (esto es un simple comentario HTML para todos los demás navigateur es así, es una forma estándar).

    <! - [if IE 7]> < html lang = "fr" class = ""> IE7 < [endif] ->

    <! - [if gt IE 7]> < -> < html lang = "fr"> < - < [endif] ->

Y el uso de las reglas anteriores de este tipo:!!!

.test { 
    z-index: 1; 
} 
.ie7 .test { 
    z-index: 2; 
} 
Cuestiones relacionadas