Les hacks css, pour que votre site passe sur tous les navigateurs (même internet explorer)


Si vous êtes tout comme moi Webmaster, vous avez déja dû dans des projets un tant soi peu complêxes graphiquement, vous arracher les cheveux à cause des problèmes de disposition.

En effet, qui n’a jamais effectué une intégration XHTML parfaite sous firefox et opéra, et s’est aperçu(e) ensuite que le rendu est affreux sous internet explorer?

Pour palier à ces problèmes, nous pouvons utiliser les hacks css, qui vous permettront d’écrire des règles spécifiques pour un navigateur, et parfois même, pour une version de ce navigateur.

On va supposer que nous souhaitons travailler avec cet élément: <div id="hack-css"></div>

Traditionnellement, on écrira:

#hack-css{
/* Règles css ici */
}

Cette règle sera lue par tous les navigateurs.

Voici comment faire une règle CSS qui ne sera interprétée que par internet explorer 6 :

* html #hack-css {
/* Règles css spécifiques à internet explorer 6 ici */
}

Voici comment faire une règle CSS qui ne sera interprétée que par internet explorer 7 :

*+html #hack-css {
/* Règles css spécifiques à internet explorer 7 ici */
}

Voici comment faire une règle CSS qui ne sera interprétée que par Mozilla Firefox:

html:not([lang*= » »]) #hack-css {
/* Règles css spécifiques à Mozilla Firefox ici */
}

Voici comment faire une règle CSS qui ne sera interprétée que par Mozilla Firefox 2 :

#hack-css, x:-moz-any-link{
/* Règles css spécifiques à Mozilla Firefox 2 ici */
}

Voici comment faire une règle CSS qui ne sera interprétée que par Mozilla Firefox 3 :

html>/**/body #hack-css, x:-moz-any-link, x:default{
/* Règles css spécifiques à Mozilla Firefox ici */
}

Voici comment faire une règle CSS qui ne sera interprétée que par Safari 3:

html[xmlns*= » »] body:last-child #hack-css {
/* Règles css spécifiques à Safari 3 ici */
}

Voici comment faire une règle CSS qui ne sera interprétée que par Opera 9 :

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
#hack-css {
/* Règles css spécifiques à Opéra 9 ici */
}
}

Voici comment faire une règle CSS qui ne sera interprétée que par Konqueror 3.4.3 et supérieurs :

html:not(:nth-child(1)) #hack-css {
/* Règles css spécifiques à
}

Voici comment faire une règle css qui en sera interprétée que par chrome :

/*\*/
html*##hack-css {
/* Vos règles CSS spécifiques à Google chrome. Mais évitez les crochets, vous auriez de droles de surprises. */
}/*end*/
.dummyend[id]{clear:both;}

Source : Ethtezahl

Publicités

À propos de bbgun91

Chef de projets multimédia - Concepteur Intégrateur Multimédia

Publié le 12 juillet 2011, dans CSS, et tagué , , , , , , , , , , , , , , , , , . Bookmarquez ce permalien. Poster un commentaire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :