Avouez-le, il y a encore des trucs que vous n’osez pas utiliser, par habitude. Parce que vous avez appris pendant 10 ans que ça passait pas, et maintenant, vous êtes pas certains, alors vous continuez. Malgré le fait que la citation célèbre de Tristan Nitot soit devenu une réalité depuis des années (et que le 7 est presque mort né), on s’abstient parfois idiotement d’utiliser quelques goodies. Juste dans le doute.
Voici quelques opérations CSS que vous pouvez enfin utiliser sans danger. Promis. Ça fait des années maintenant qu’on peut sortir de sa carapace.
> – Selecteur des enfants immédiats
Selectionne les enfants du premier niveau, mais pas récursivement.
Exemple:
<style>
ul > li {
margin-left:1em;
}
</style>
<ul>
<li>Foo:
<ul>
<li>Bar</li>
<li>Bar</li>
</ul>
</li>
<li>
Foo
</li>
</ul> |
Le sélecteur appliquera la marge aux li avec “Foo”, mais pas ceux avec “Bar”.
[attr] – Selecteur d’attribut
Sélectionne un élément s’il possède un attribut avec ce nom et cette valeur.
Exemple:
<style>
p[title="bouya"] {
margin-left:1em;
}
</style>
<p title="bouya">Foo</p>
<p>Bar</p>
<p title="bouya">Foo</p> |
Le sélecteur appliquera la marge au p avec “Foo”, mais à celui avec “Bar”.
On peut aussi faire plus raffiné en cherchant si l’attribut contient une partie de quelque chose.
:first-child – Sélecteur de premier enfant
Sélectionne un élément s’il est le tout premier enfant d’un autre.
Exemple:
<style>
ul li:first-child {
margin-left:1em;
}
</style>
<ul>
<li>Foo </li>
<li>Bar</li>
</ul> |
Le sélecteur appliquera la marge au li avec “Foo”, mais à celui avec “Bar”.
min/max width/height – Définir une taille minimal ou maximale
Donne une taille qu’un élément doit au moins avoir, ou peut avoir au maximum.
Exemple:
<style>
ul {
min-height:3em;
max-height:10em;
}
</style>
<ul>
<li>Foo </li>
<li>Bar</li>
</ul> |
On a ici un ul de taille élastique qui va s’adapter au nombre d’éléments qu’il contient, mais il aura au moins une taille de 3em, et il ne dépassera jamais 10em.
position:fixed – Position fixée dans le viewport
Donne une position sur la partie visible de la page. Quand l’utilisateur scroll, l’élément est toujours visible à cet endroit.
Exemple:
<style>
ul {
position:fixed;
right: left;
top: 10%;
}
</style>
<ul>
<li>Foo </li>
<li>Bar</li>
</ul> |
Le menu restera toujours en haut à gauche de la page, même si je scroll. La même chose est vraie pour background-attachment: fixed que l’on peut maintenant utiliser et qui s’appliquer aux images de background.
.A.B – Sélection à classe multiple
Pour sélectionner un élément qui a les DEUX classes.
Exemple:
<style>
p.danger.alerte {
color:"putainderouge";
}
</style>
<p class="danger">Bar</p>
<p class="alerte">Bar</p>
<p class="danger alerte">Foo</p> |
Seul le p avec “Foo” sera en rouge.
blockquote + p – Sélection des éléments adjacents
Sélectionne un élément s’il est juste après un autre.
<style>
blockquote + p {
font-style:italic;
}
</style>
<blockquote>
Rien ne sert de ramer quand on attaque la falaise.
</blockquote>
<p>Anonyme</p>
<p>Et maintenant quelque chose de complètement différent.</p> |
Le nom de l’auteur de la citation va être mis en italique. Mais pas le second p.
Et en prime
On cite souvent:
:first-line– First line selector of content copy.:first-letter– First letter selector of content copy.
Mais en vérité ils étaient déjà supportés par IE6.
Par contre, tous ces trucs qui marchaient, mais auxquels il fallait faire super gaffe :
float: rightetclear:bothz-index:hover. Pas juste sur lesa. Partouuuuuuuuuuut. (marche uniquement si on précise le doctype, mais qui ne le fait pas ?)
Ça marche comme pour tous les autres maintenant.
En plus on a les PNGs transparents (24 bit).
Et d’après ce post sur SO, on s’affranchit aussi des bugs suivant :
- Peekaboo Bug
- Internet Explorer and Expanding Box Problem
- Quirky Percentages
- Line-height bug
- Border Chaos
- Disappearing List-Background bug
- Guillotine Bug
- Unscrollable Content bug
- Duplicate Characters Bug
- IE and Italics
- Doubled Float-Margin bug
- Duplicate Indent bug
- Three pixel text jog
- Creeping Text bug
- Missing First letter bug
- Phantom box bug
- 31 style sheet limit -
Mais gaffe quand même pour les micros IE7 qui reste (il doit pas en rester des masses). Il compte parfois les commentaires comme des éléments sélectionnables par les sélecteurs qu’on vient de voir :-(.
Sinon, souvenez-vous que la compatibilité IE9 pour IE7 et 8 est à la portée d’un tout petit include Javascript.
Le titre ne devrait peut etre pas inclure blockquote et p, ca concerne juste l’operateur “+” qui peut bien sur etre utilise avec d’autres tags.
Merci pour le rappel.
Je ne savais pas qu’IE6 ne supportait pas les selections multiples de classes “div.a.b” !
Déjà debout?
Sam: “…Quand l’utilisateur scroll, l’élément est toujours visible à cet endroit…”
Harrrgh ! La vache ! grrr! gnnnêêhnn…
Excellent, je les utilisais tous, sauf la sélection de classe multiple je savais même pas que ça existait O_o
Je sens que ça va bien servir
IE ? C’est quoi ?
@La flibuste hollandaise:
IE is Internet Eczema.
Wow, si peu de troll. Je suis presque deçu.
@Etienne: j’ai écris l’article la vaille parce que la neige n’attend pas.
@Greg: je vais présumer que tout le monde a compris, j’ai trop la flemme d’éditer.
@Sam
Attention avec la neige, te mets pas à glisser dessus. On ne sait jamais, tu pourrais te casser les doigts.
Trop tard, je me suis ruiné le pouce en me vautrant comme une merde sur un saut de puce. Et j’ai perdu mon lecteur mp3. Et j’ai pas choppé à la soirée. Y a des jours comme ça.
Euh vous êtes sûr pour le premier cas ??? Ok que ça n’applique qu’aux enfants directs mais le second ul est lui aussi choppé par la rule non :( (il me semble)
Ça serait plus correct si l’exemple était:
ul.maListe > li{margin-left:1em}
MOI
MOI AUSSI
Mais pas moi
(Bon, je sais pas si l’HTML va être formaté ou s’il va pas passer du tout comme dans la prévisualisation)
2) C’est normal que dans votre exemple avec position:fixed, vous avez pas mis position:fixed dedans
à l’intérieur là où ça fait du bien? Qu’est-ce que j’ai pas compris ?Mais tin, il était encore plus con que ce que je croyais IE6, c’est dommage que les versions récentes d’IE ont toujours des morceaux bien pourrites :(
IE6 était pas toujours superbeaucouptrop utilisé en Chine ? Mais bon osef, ils ont pas accès au même internet que nous :] (troll inside)
BAH ÉVIDEMMENT, MON HTML EST PAS PASSÉ :(
Bref, en gros c’était plus ou moins le même exemple que vous sauf que le premier ul avait la classe maListe ^^
@Sam: Ah ? C’était un article pour TrollDi ? :-D
(TrollDi)
ton renard il est beau, mais c’est pas un firefox…
oué, d’abord !
(/TrollDi)
Bonne neige…et n’investissez pas dans la platrerie la plus proche !
;-)
@JeromeJ: tu as entièrement raison, les exemples ont été écris sans être testé (à l’instinct). C’est mal. Je corrige le position:fixed. Pour le rest c’est pas bien grave. L’important c’est que l’info passe.
@JEEK: et Sam se panda. “On dit se pendit”. #fesspalm.
Hahh, les balises rocambolesques de ce site. Et y’a pas que les balises….
Je vais faire le relou, mais on dit “s’il” et non “si il” (il y en a 3 dans le texte).
Et je pense que tu ne devais pas être bien réveillé car tu as écrit :
Peut-être voulais-tu dire : On peut l’appliquer aux images de background ???
Sinon, merci pour le rappel sur ce que l’on peut enfin faire avec Internet Expl-horreur.
Virer IE me donne toujours beaucoup de plaisir. Ptêt qu’un jour j’en serai privée.
J’ai un copain qui a désactivé les MàJ autos de son Dodows…. je le comprends parce que des fois c’est bien chiant mais j’attends le jour où je rirai doucement, quand sa bécane se mettra à faire vraiment n’importe quoi, même si ça sera sûrement à moi de réparer ça ! M’enfin comme je fais de la magie avec les PCs des autres, je me fais pas trop de souci ^^
[/3615 raconte ta life]
J’réclame un article pour le jour où Microsoft n’aura plus le droit de pré-installer sa bouse pour pratiques anti-concurrentielles ! (ça se fera pour WMP aussi ?).
Pour les sélecteurs multiples on peut même jouer sur l’ordre. .classeA.classeB et .classeB.classeA ne ciblent pas le même élément.
ça fonctionne aussi en mixant avec l’id de l’élément s’il en a un: #id.classeA ou #id.classeB.
@jerrywham: Si tu pouvais apporter une preuve, ça me rassurerais.
Parce que:…Sélectionne un élément s’il est le tout premier …
ça sonne bizarre.
Y’aurait pas une histoire de mode narratif ? Ou quelque chose du même tonneau.
Désolé je raconte n’importe quoi l’ordre des classes n’a pas d’importance.
@Laurent. Et c’est ça qui est “class !”
@roro : ça s’appelle l’élision. C’est le fait de ne pas prononcer/écrire une voyelle lorsqu’elle (tiens en voilà une autre) précède une autre voyelle.
L’élision de si est obligatoire devant il et c’est le seul cas où si s’élide.
Un exemple : tu dis bien “s’il vous plaît” et non “si il vous plaît” ? (bien que cela ne se dise plus vraiment de nos jours. Ah ! la politesse…)
Pour plus d’informations