Les goodies CSS qu’on peut utiliser maintenant que IE6 est mort

This entry was posted in Programmation and tagged css Ie6 ie7 on by

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: right et clear:both
  • z-index
  • :hover. Pas juste sur les a. 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 :

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.

21 thoughts on “Les goodies CSS qu’on peut utiliser maintenant que IE6 est mort”

  • Greg

    blockquote + p – Sélection des éléments adjacents

    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” !

  • roro

    Sam: “…Quand l’utilisateur scroll, l’élément est toujours visible à cet endroit…”
    Harrrgh ! La vache ! grrr! gnnnêêhnn…

  • Anon

    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

  • Sam Post author

    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.

  • Etienne

    @Sam
    Attention avec la neige, te mets pas à glisser dessus. On ne sait jamais, tu pourrais te casser les doigts.

  • Sam Post author

    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.

  • JeromeJ

    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)

  • JeromeJ

    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 ^^

  • JEEK

    @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 !
    ;-)

  • Sam Post author

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

  • roro

    Hahh, les balises rocambolesques de ce site. Et y’a pas que les balises….

  • jerrywham

    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 :

    La même chose est vraie pour background-attachment: fixed que l’on peut maintenant utiliser et qui appliquer ça aux images de background.

    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.

  • céki

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

  • Laurent

    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.

  • roro

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

  • Laurent

    Désolé je raconte n’importe quoi l’ordre des classes n’a pas d’importance.

  • jerrywham

    @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

Comments are closed.

Des questions Python sans rapport avec l'article ? Posez-les sur IndexError.