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.
Réponses:
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).
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.
*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».
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.
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;
}