Que signifie une propriété précédée d'une étoile dans CSS?

85

Je regardais un fichier css aujourd'hui et j'ai trouvé l'ensemble de règles suivant:

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

Que signifie l'étoile dans * padding et * line-height?

Merci.

Majid Fouladpour
la source

Réponses:

98

Il s'agit du "piratage de propriété étoile" dans le même sens que le "piratage de soulignement". Il inclut les fichiers indésirables avant la propriété que IE ignore (le * fonctionne jusqu'à IE 7, le _ jusqu'à IE 6).

opello
la source
7
Merci! Et j'ai recherché "star property hack" et j'ai trouvé ce message clair et complet d'Ed Eliot: "Astuce CSS: Cibler IE 5.x, 6 et 7 séparément" sur ejeliot.com/blog/63
Majid Fouladpour
1
au lieu d'utiliser des hacks css, vous pouvez également essayer des commentaires conditionnels pour par exemple vérifier quirksmode.org/css/condcom.html pour plus d'informations.
Capi Etheriel
Il convient de noter que Safari (7.0.1) et les versions antérieures (impossible à vérifier) ​​lèveront des avertissements de console si vous utilisez le hack de propriété star.
Jim
RIP IE7 et ces types de «correctifs».
ChristoKiwi
note: "Les commentaires conditionnels utilisant la structure des commentaires HTML, ils ne peuvent être inclus que dans des fichiers HTML, et non dans des fichiers CSS" quirksmode.org/css/condcom.html
George Birbilis
32

En CSS? Rien; c'est une erreur.

En raison de bogues dans certaines versions d'Internet Explorer, ils n'ignoreront pas correctement le nom de propriété non valide, c'est donc une façon de fournir du CSS spécifique à ces navigateurs.

L'utilisation de commentaires conditionnels est cependant plus claire et plus sûre.

Quentin
la source
2
En effet. Les hacks CSS qui ne sont pas des CSS valides doivent être évités; vous ne savez jamais ce qu'un futur navigateur pourrait en faire.
bobince
@bobince je me rends compte que vous avez fait ce commentaire dans le passé, mais nous pouvons maintenant être absolument sûrs de la façon dont chaque futur navigateur l'interprétera car l'algorithme d'analyse CSS est très strict et dit au navigateur d'ignorer silencieusement ces règles.
mgol
1
@m_gol - Non, nous ne pouvons pas. Nous ne savons pas ce qu'une future spécification CSS dira sur la signification d'un *avant une propriété. Si cela a une signification, les navigateurs actuels l'ignoreront, ce qui permettra d'ajouter l'extension en toute sécurité. C'est le but de la règle «doit ignorer».
Quentin
8

Le caractère asteriks est un caractère générique valide dans CSS. Son utilisation seule signifie que les propriétés CSS suivantes seront utilisées contre tous les nœuds d'élément dans le DOM. Exemple:

*{color:#000;}

La propriété ci-dessus sera appliquée à tous les éléments DOM, éliminant ainsi la cascade naturelle dans CSS. Il ne peut être remplacé qu'en taguant spécifiquement les éléments DOM là où ce ciblage commence une référence d'identifiant unique. Exemple:

#uniqueValue div strong{color:#f00;}

La propriété ci-dessus remplacera le caractère générique et rendra le texte de tous les éléments forts qui se produisent dans un div à l'intérieur d'un élément avec une valeur d'attribut id de "uniqueValue".

L'utilisation d'un caractère générique universellement appliqué, tel que le premier exemple, peut être une méthode rapide et sale pour écrire une feuille de style de réinitialisation. C'est rapide et sale car la définition granulaire de la présentation après le caractère générique créera probablement une feuille de style extrêmement gonflée. Si vous envisagez d'utiliser le caractère générique, je suggérerais de l'utiliser plus spécifiquement, par exemple:

* strong{color:#f00;}

L'exemple ci-dessus rendra le texte de tous les éléments forts de couleur rouge, quelles que soient les autres propriétés CSS non spécifiées avec un identifiant unique. Ceci est considéré comme beaucoup plus sûr que d'utiliser la déclaration "! Important" car cette déclaration est connue pour causer des interférences avec la fonctionnalité naturelle des comportements prévus et est un cauchemar de maintenance.

Les astériks dans votre exemple sont au mauvais endroit car ils semblent se produire dans les déclarations de propriété, le code qui entre entre accolades, et cela provoquera probablement une erreur.


la source
4
Répond à ce que j'ai recherché sur Google, même si ce n'est pas la bonne réponse
Steve
4

C'est un hack pour IE7.

Si vous écrivez ceci:

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

sur tous les navigateurs qui respectent le standard W3C <div class="test"></div>HTMLElement ont un z-index: 1mais pour IE7, cet élément a un z-index: 2.

Ce n'est pas standard.

Pour obtenir la même chose avec W3C Standard, procédez comme suit:

  • Ajoutez un commentaire conditionnel Internet Explorer (il s'agit d'un simple commentaire HTML pour tous les autres navigateurs, c'est donc une méthode standard).

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

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

Et utilisez les règles précédentes comme ceci:

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}
Bruno Lesieur
la source