O que significa uma propriedade precedida de estrela em CSS?

Question 1

Eu estava olhando um arquivo css hoje e encontrei o seguinte conjunto de regras:

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;
}

O que significa a estrela em * preenchimento e * altura da linha?

Obrigado.

Question 2

Este é o "hack de propriedade de estrela" na mesma linha do "hack de sublinhado". Inclui lixo antes da propriedade que o IE ignora (o * funciona até o IE 7, o _ até o IE 6).

Question 3

Em CSS? Nada; é um erro.

Devido a bugs em algumas versões do Internet Explorer, eles não irão ignorar corretamente o nome de propriedade inválido, portanto, esta é uma maneira de fornecer CSS específico para esses navegadores.

Usar comentários condicionais é mais claro e seguro.

Question 4

O caractere asteriks é um curinga válido em CSS. O uso dele sozinho significa que as seguintes propriedades CSS serão usadas em todos os nós de elemento no DOM. Exemplo:

*{color:#000;}

A propriedade acima será aplicada a todos os elementos DOM, anulando assim a cascata natural no CSS. Ele só pode ser substituído por tageting especificamente de elementos DOM onde essa segmentação começa uma referência de identificador exclusivo. Exemplo:

#uniqueValue div strong{color:#f00;}

A propriedade acima substituirá o curinga e criará o texto de todos os elementos fortes que ocorrem em um div dentro de um elemento com um valor de atributo id de "uniqueValue".

Usar um curinga aplicado universalmente, como o primeiro exemplo, pode ser um método rápido e sujo para escrever uma folha de estilo de redefinição. É rápido e sujo porque a definição granular da apresentação após o curinga provavelmente criará uma folha de estilo extremamente inchada. Se você for usar o caractere curinga, sugiro usá-lo mais especificamente, como:

* strong{color:#f00;}

O exemplo acima tornará o texto de todos os elementos fortes com a cor vermelha, independentemente de outras propriedades CSS não especificadas com um identificador exclusivo. Isso é considerado muito mais seguro do que usar a declaração "! Important", pois essa declaração é conhecida por causar interferência na funcionalidade natural dos comportamentos pretendidos e é um pesadelo para a manutenção.

Os asteriscos em seu exemplo estão no lugar errado, pois parecem ocorrer dentro das declarações de propriedade, o código que está entre chaves, e isso provavelmente causará um erro.

Question 5

Este é um hack para o IE7.

Se você escrever isto:

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

em todos os navegadores que respeitam o padrão W3C <div class="test"></div>HTMLElement têm um z-index: 1mas para o IE7, este elemento tem um z-index: 2.

Isso não é padrão.

Para conseguir o mesmo com o padrão W3C, siga estas etapas:

Adicione alguns Comentários condicionais do Internet Explorer (este é um comentário HTML simples para todos os outros navegadores, portanto, é uma forma padrão).

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

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

E use as regras anteriores como esta:

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