Hack CSS multi-navigateur

Hack CSS multi-navigateur

IE7Bon 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 ! 

Vous aimerez aussi...

  • Cyborg Jeff vs Robots24 mai 2012 Cyborg Jeff vs Robots (14)
    Ok, après de longues soirées, j'ai donc pu faire redescendre à la normal la charge CPU du serveur Infomaniak et rejoindre mes "copains" du serveur mutualisé. Le combat fut long, stressant […]
  • Tag’s attack23 mars 2008 Tag’s attack (0)
    C'est la vacance, et bien que j'ai à m'occuper de mon mariage et de la finalisation de l'album, je m'étais attribué à m'occuper de faire une mise à jour de l'architecture WordPress de mon […]
  • 1000toits, une jolie base html28 novembre 2007 1000toits, une jolie base html (1)
    Voilà.. là journée a été difficile, mélangeant de très bonne choses, et de très dures... Je viens de finir la mise en place du moule HTML du site 1000toits.be sur lequel je […]

6 réactions au sujet de « Hack CSS multi-navigateur »

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

  2. (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]>

  3. 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 ,(

  4. 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]–>
    ?

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.