Bon si vous lisez ça j’imagine que vous avez eu un problème avec la compatibilité de votre webdesign sur différent navigateurs (entre autre un affichage parfait sur Firefox, opera, safari, chrome ou autres et un problème sur internet explorer 7 ou 6 ).
En effet la mise en page de votre design ne se fait pas correctement, un code position : absolute; doit devenir position : relative; afin de fonctionner parfaitement sous IE mais du coup ça bug sur les autres navigateurs ?
Que faire ? Vous avez déjà arrachez là moitié de vos cheveux à essayer de faire cette mise en page et vous n’arrivez vraiment à rien.
Pas de panique, c’est là qu’entre en scène le hack CSS. En gros pour faire court le hack css consiste à écrire une balise que seul tel ou tel navigateur lira et pas un autres.
Comme vous le savez déjà, Pour que le code soit lu par tous les navigateurs il suffit de taper la balise normalement c’est à dire comme ça :
EXEMPLE :
margin-top : -15px;
Maintenant si vous voulez que ce même code soit lisible uniquement par IE6 il vous faudra taper ceci :
EXEMPLE :
_margin-top : -15px;
Maintenant si vous voulez que ce même code soit lisible uniquement par IE6 ET IE7 il vous faudra taper ceci :
EXEMPLE :
/margin-top : -15px ;
Maintenant si vous voulez que ce même code soit lisible uniquement par Firefox il vous faudra taper ceci :
EXEMPLE :
margin-top : -15px !important;
Pour expliquer un peu tous ça, tous les navigateurs peuvent lire la balise classique du type « margin-top », ensuite seul IE6 peux lire la balise « _ » , seul IE6 et IE7 peuvent lire la balise « / » et seul firefox peux lire la balise « !important ».
Pour exemple admettons que l’on veuille différent margin pour chacun des navigateurs, en sachant qu’une balise identique placé après une autres l’annule pour exemple si je met :
EXEMPLE :
body{
margin-top : -15px;
margin-top : 20px;
}
Le margin-top de body sera de 20px et non pas -15px, la dernière balise faisant foi.
Donc si nous voulons appliquer les balise hack css rien de plus simple, nous commençons par la balise classique ensuite celle pour firefox, celle pour ie6 et ie7 et ensuite celle de ie6 pour exemple :
EXEMPLE :
body{
margin-top : -15px;
margin-top : -12px !important;
/margin-top : 10px;
_margin-top : 0px;
}
En gros tous les navigateurs qui ne savent pas lire les balise : « !important », « / », et « _ » auront un margin-top de -15px, ensuite firefox aura un margin-top de -12px, IE7 aura un margin-top de 10px et IE6 aura un margin-top de 0px en effet vu que la balise IE6 arrive après celle de IE6+IE7 alors IE6 prendra la dernière du code à savoir 0px, pas évident à expliquer mais si vous ne comprenez pas j’approfondirais.
A savoir que le hack css n’est pas valide W3C mais qu’il n’empêche en rien la validité réel de votre code ainsi que l’accessibilité réel de votre site, c’est juste un gain de temps et une simplification pour vous.
A savoir aussi que la balise margin-top n’est là qu’à titre d’exemple et que ce type de Hack CSS fonctionnent parfaitement avec les autres balise CSS.
En cas de problème n’hésitez pas à demander dans les commentaires je vous aiderais du mieux que je peux.
