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 :

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

J’ai essayé cross-over sous MAC qui ne vaut pas le coup à mes yeux (trop lent, plantage, pas compatible pour certaines versions d’IE, etc.), Wine sous Linux dont cross-over est un dérivé il me semble, mêmes galères.
Il y a aussi IETester qui a l’air pas mal pour avoir toutes les versions d’IE sur un seul navigateur mais il ne marche que sous Windows.

Les choses ont changées et Microsoft propose désormais gratuitement des Images de son Os Windows avec la version IE qui va bien.
La seule contrainte est qu’il faut posséder VMWare (ou VirtualBox GRATUIT), je conseille la version 5 pour 50 euros qui a un mode magique, le mode “Unity” qui fusionne votre Os émulé avec votre Os hôte, j’ai dans mon dock Mac une icône IE8, c’est trop mignon, fluide et pratique.
Une chose non négligeable c’est le copier/coller qui marche entre les deux OS.

Pratique pour voir si son site fonctionne sous IE depuis son Mac

Installation:

Rendez-vous chez Microsoft et téléchargez la version qui vous convient

Une fois les archives téléchargées vous les décompressées (avec The unarchiver sous Mac)

Dans VMWare vous sélectionnez “Ajouter > Importer” et vous importer l’image téléchargée, c’est celle qui comporte l’extension VHD (ex: Win7_IE8.vhd). Il va vous demander de convertir l’image etc, faites mouliner.

Attention:

Le mot de passe des OS est Password1 à taper en clavier QWERTY, si vous n’y arrivez pas, cliquez à gauche à l’écran d’accueil Windows sur l’espèce de petite roue et sélectionnez “Show keyboard”, un clavier virtuel va s’afficher et vous pourrez cliquer sur les touches.

Passez l’activation de windows il n’y en a pas besoin.

Pour éviter que sa copie arrive à expiration le mieux est de faire un Snapshot (sauvegarde de l’état de la Machine virtuelle à un instant T) dès la première installation de votre machine virtuelle.

Je dois dire que c’est plutôt sympa, car je peux coder sur mon Mac tout en testant le résultat sous IE comme si c’était une appli Mac.

NB: Si vous lancez un serveur web sous votre Mac et n’arrivez pas à y acceder depuis le navigateur IE, lancez le serveur sur le port 80 et l’ip de votre machine (192.168…..)