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

Question

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

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.

Answer 1

C'est le "hack de la propriété de l'étoile", dans la même veine que le "hack de l'underscore". Il inclut des éléments indésirables avant la propriété qu'IE ignore (le * fonctionne jusqu'à IE 7, le _ jusqu'à IE 6).

Answer 2

En CSS ? Rien, c'est une erreur.

En raison de bogues dans certaines versions d'Internet Explorer, ces dernières n'ignorent pas correctement le nom de la propriété non valide. Il s'agit donc d'un moyen de fournir un CSS spécifique à ces navigateurs.

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

Answer 3

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

*{color:#000;}

La propriété ci-dessus sera appliquée à tous les éléments du DOM, ce qui va à l'encontre de la cascade naturelle de CSS. Elle ne peut être remplacée qu'en balisant spécifiquement les éléments du DOM où ce ciblage commence par une référence d'identification unique. Exemple :

#uniqueValue div strong{color:#f00;}

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

L'utilisation d'un caractère générique appliqué universellement, comme dans le premier exemple, peut être une méthode rapide et sale pour écrire une feuille de style de réinitialisation. C'est une méthode rapide et sale parce qu'une 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 devez utiliser le joker, je vous suggère de l'utiliser de manière plus spécifique, par exemple :

* strong{color:#f00;}

Dans l'exemple ci-dessus, le texte de tous les éléments forts sera coloré en rouge, sans tenir compte des autres propriétés CSS qui ne sont pas spécifiées avec un identifiant unique. Cette méthode est considérée comme beaucoup plus sûre que l'utilisation de la déclaration "!important", car cette déclaration est connue pour provoquer des interférences avec la fonctionnalité naturelle des comportements prévus et constitue un cauchemar en matière de maintenance.

Les astérisques dans votre exemple ne sont pas au bon endroit car ils semblent se trouver à l'intérieur des déclarations de propriétés, le code qui se trouve entre accolades, et cela provoquera probablement une erreur.