Sam & Max » ie7 http://sametmax.com Du code, du cul Sat, 07 Nov 2015 10:56:13 +0000 en-US hourly 1 http://wordpress.org/?v=4.1 Les goodies CSS qu’on peut utiliser maintenant que IE6 est mort 21 http://sametmax.com/les-selecteurs-css-quon-peut-utiliser-maintenant-que-ie6-est-mort/ http://sametmax.com/les-selecteurs-css-quon-peut-utiliser-maintenant-que-ie6-est-mort/#comments Sat, 02 Mar 2013 06:35:24 +0000 http://sametmax.com/?p=3486 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.

]]> http://sametmax.com/les-selecteurs-css-quon-peut-utiliser-maintenant-que-ie6-est-mort/feed/ 21