Hack CSS multi-navigateur
Bon avec une division de plus en plus grande entre les utilisateurs Internet Explorer et non IE (dont Firefox), mais également les utilisateurs étant « enfin » passé à la version 7 du navigateur de Microsoft et ceux toujours sur la 6… Il devient de plus en plus chaud de concevoir la feuille de style (CSS) afin que le site soit le plus cohérent d’un navigateur à l’autre !!!
J’ai trouvé ici un petit hack, non reconnu par les validateurs W3C, mais néanmoins bien pratique trouvé sur Quesaco.org
h1 {
color:black;
!color:green;
}
*> h1 {
color:red;
!color:blue;
}
La balise H1 s’affichera donc en noir sur les plus anciens navigateurs et en vert en IE6. Elle s’afficher en rouge sur les navigateur plus moderne (FF2 par exemple, IE7 aussi…mais) mais s’affichera en bleu sous IE7.
Bon.. on va s’amuser sous peu quand FF3 et IE8 débarqueront !
Juin 2006, je lançais mon Blog sur Skyblog avant de très rapidement glisser le tout dans un WordPress sur un (Lire la suite)
Difficile d'être passé à coté de l'info : ces dernières semaines ChatGPT s'est emparé de la Une des journaux. D'abord (Lire la suite)
Depuis quelques semaines, je m'énerve lorsque, depuis mon smartphone Androïd, je ne vois s'afficher aucun résultat ciblant mon blog ! (Lire la suite)
5 réflexions sur « Hack CSS multi-navigateur »
en clair, le but est de s’assurer que le look sera le même partout, et ça malgré les bugs et autres non-respects des standards de IE, c’est ça ? (bon, firefox est pas nécessairement tout rose non plus, mais on ne se refait pas).
Tant qu’à choisir, je pense que j’aurais opté pour les « blocs conditionnels » proposés par microsoft (après tout, c’est leur bugs, à eux de nous donner une solution):
[pre]
Welcome to the real world.
[/pre]
(un peu plus bas dans la page chez kesako et sur http://msdn2.microsoft.com/en-us/library/ms537512.aspx
(lol. le code de l’exemple était donc:)
<!–[if IE]><p>Welcome to Internet Explorer.</p><![endif]–>
<![if !IE]><p>Welcome to the real world.</p><![endif]>
Oui.. mais là ou c’est chaud c’est que moi je dois implémenter la sélection directement dans la CSS, pas dans la page HTML ou PHP… certe j’ai un script de détection IE, FF ou MAC, mais vu que mnt d’une version à l’autre c’est encore différent, je peux difficilement jouer avec 6 feuilles de style ,(
ah, j’aurais cru que les commentaires HTML marchaient aussi dans les feuilles de styles …
sinon, si j’ai bonne mémoire, CSS permet de « patcher » une feuille de style générique, avec une deuxième feuille (d’où le cascading).
Alors pourquoi ne pas mettre le max dans une feuille générique et débarquer ensuite avec
<!–[if IE]><style src= »IEpatch.css »><![endif]–>
?
Rraaah 4 heures hier à pester et à devenir fou !! plus moyen de faire fonctionner ce hack pourtant fonctionnel dans le site Formadis…
Me voyant extrêment nerveux, madame essaie de me faire lacher l’ordi… tu verras si tu t’arrêtes tu trouveras tout de suite… en même je sais qu’elle a raison, mais impossible de décrocher dans cet état,.. je fini par lacher le PC, .. avec un nouvel page en attente.. une parmi tant d’autre que j’avais regardé mais qui m’inspirait un poil plus…
On enchaine avec le vétérinaire en urgence pour le pauvre Pepper qui a une trachéite, puis rapidos un coup de rasoir avant de partir passer la soirée chez Fred et Valérie :)
Ce matin,… je rajoute ce code en entête de mon fichier HTML
Bardaf… ca marche !!! ;|
En gros, visiblement afin que le hack fonctionne correctement, il y a lieu de rendre plus stricte l’analyse du code HTML/CSS par le navigateur. Evidemment ce code est de base dans ma base de travail Xoops au bureau, mais là partant d’une page blanche pour mon nouveau site 1000toits,… je n’arrivais pas à faire la distinction en IE6 et IE7.
Mystère résole, j’ai pouvoir reprendre le combat dans les superpositions de DIV