O que significa uma propriedade precedida de estrela em CSS?

85

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.

css Majid Fouladpour
fonte

Respostas:

98

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

opello
fonte
7
Obrigado! E eu pesquisei "hack de propriedade de estrela" e encontrei esta postagem clara e abrangente de Ed Eliot: "Dica CSS: direcionando o IE 5.x, 6 e 7 separadamente" em ejeliot.com/blog/63
Majid Fouladpour
1
em vez de usar css hacks, você também pode tentar comentários condicionais, por exemplo, verifique quirksmode.org/css/condcom.html para obter mais informações.
Capi Etheriel
Deve-se notar que o Safari (7.0.1) e as versões anteriores (não é possível verificar) irão lançar avisos de console se você usar o hack da propriedade star.
Jim
RIP IE7 e esses tipos de 'correções'.
ChristoKiwi
nota: "Como os comentários condicionais usam a estrutura de comentário HTML, eles só podem ser incluídos em arquivos HTML, e não em arquivos CSS" quirksmode.org/css/condcom.html
George Birbilis
32

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.

Quentin
fonte
2
De fato. Os hacks de CSS que não são CSS válidos devem ser evitados; você nunca sabe o que um futuro navegador pode fazer com eles.
bobince
@bobince, eu sei que você fez esse comentário no passado, mas agora podemos ter certeza absoluta de como cada navegador futuro interpretará isso como um algoritmo de análise CSS é muito rígido e diz ao navegador para ignorar silenciosamente essas regras.
mgol
1
@m_gol - Não, não podemos. Não sabemos o que uma especificação CSS futura dirá sobre o significado de a *antes de uma propriedade. Se tiver um significado, os navegadores atuais irão ignorá-lo, permitindo que a extensão seja adicionada com segurança. Esse é o ponto da regra "deve ignorar".
Quentin
8

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.


fonte
4
Respostas o que eu pesquisei, mesmo que não seja a resposta correta
Steve
4

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