[SOLUTION] Differencier IE6 IE7 et FIREFOX en CSS

[memopage]

Pour vous éviter comme moi de perdre du temps, je vous poste cette solution.
Objectif : Differencier IE6 IE7 et FIREFOX en CSS pour la compatibilité du design

Pour isoler IE6, exemple :
margin-left:5px !important <- ca c'est pour tout sauf IE6
margin-left:5px <- IE6

Pour isoler IE7 de FIREFOX, exemple :
margin-left:5px !important! <- IE7 va interpreter uniquement ca
margin-left:5px <- FIREFOX

Attention, on m'a dit qu'il y'aura PEUT ETRE des sourcis avec le !important! sous safari, mais bon safari voilà quoi...

Voilà, en esperant que ce post vous soit util !

Bonne soirée

Memopage

[Stellvia]

J'ais rien compris , perso j'utilise ca qui marche tres bien :

Code: Tout sélectionner

<!--[if IE 7]><style type="text/css"> blabla </style>

<![endif]-->

[memopage]

En gros ca permet de tout mettre dans une seule feuille css, c'est moins le bordel apres je trouve.

EN gros tu rajoutes !important à coté de la propriete et IE6 ne vas pas interpreter ca mais IE7 et FIREFOX OUI

Pour differencier IE7 de FIREFOX tu mets !important! à coté de la propriete et FIREFOX ne va pas l'interpreter mais IE7 OUI

Voilà, j'espere avoir été clair.

[darkjukka]

Ca me parait bien compliqué quand même.

Une feuille à part pour IE c'est déjà largement suffisant, on va pas faire 36 000 distinctions dans les propriétés sinon c'est à s'arracher les cheveux.

[memopage]

Pour moi, si on respecte bien les standards CSS2 et qu'on organise le site correctement, il n'y aura pas beaucoup de differences entre IE et FIREFOX, et dans ce cas cette astuce ce fait sur 1 ou 2 propriétés max (margin, padding...).
Deux feuilles de styles ne me semblent donc pas necessaire. De plus si javascript est desactivé, la soluce

Code: Tout sélectionner

<!--[if IE 7]><style type="text/css"> blabla </style>

<![endif]-->

ne marche pas.

Mais bon apres chacun à ses habitudes

[milkiway]

Pourquoi s'embêter avec du "faux code" alors que, comme dit ci dessus, <!--[if IE ]> fonctionne très bien et est valide

[darkjukka]

Euh, j'ai desactivé Javascript dans mon IE 6 et ma feuille de style pour IE est bien appelée donc il semblerait que cela marche.

[MarvinLeRouge]

+1 pour le commentaire conditionnel : je l'utilise au quotidien à mon boulot; c'est propre, clair, et ça évite d'utiliser des hacks qui, de toute façon, risquent de poser problème à un moment ou à un autre, et gènent la lisibilité et la maintenabilité des sites.

[memopage]

désolé j'ai parlé un peu trop vite, faut que je me trouve vite une cachette ^^ !

[Koxin-L]

Pour moi, si on respecte bien les standards CSS2 et qu'on organise le site correctement

Faux.

IE est tellement irrespectueux de quelques principes que dés que l'on rend un peu plus complexe un affichage via css, il est totalement largué.

Pourquoi s'embêter avec du "faux code" alors que, comme dit ci dessus, <!--[if IE ]> fonctionne très bien et est valide

Parce que <!--[if IE ]> c'est aussi du faux code, même si c'est mis en place par crosoft, cela ne respect rien du tout...

Y a pas à avoir de if machin. On fait un logiciel correctement ou l'on assume que les gens utilise des hacks.

...et ça évite d'utiliser des hacks qui, de toute façon, risquent de poser problème à un moment ou à un autre, et gènent la lisibilité et la maintenabilité des sites.

N'importe quoi.
C'est pas pire de coller 3 ou 4 hacks dans 1 CSS que de se farcir des conditions dans tous les sens sur tes pages.

[bproductiv]

Pour moi, si on respecte bien les standards CSS2

Hum hum, je viens de voir ton autre post où tu demande notre avis sur un de tes sites d'aikido -> 260 erreurs W3C, c'est pas trop respecter les standards ca...

Deux feuilles de styles ne me semblent donc pas necessaire. De plus si javascript est desactivé, la soluce

Code: Tout sélectionner

<!--[if IE 7]><style type="text/css"> blabla </style><![endif]-->

ne marche pas.

Tu vois où du javascript là??

[MarvinLeRouge]

Pourquoi s'embêter avec du "faux code" alors que, comme dit ci dessus, <!--[if IE ]> fonctionne très bien et est valide

Parce que <!--[if IE ]> c'est aussi du faux code, même si c'est mis en place par crosoft, cela ne respect rien du tout...

Y a pas à avoir de if machin. On fait un logiciel correctement ou l'on assume que les gens utilise des hacks.

Pas d'accord : ils ont implémenté un machin propriétaire; sur ce point-là, rien à dire. MAIS ils l'ont fait de façon intelligente, c'est déclaré de façon à être considéré comme un commentaire html par tout soft autre que celui auquel c'est destiné. Dans ce sens là, ça respecte une vraie syntaxe de commentaire; c'est un peu tordu, mais c'est à mon avis (et je suis loin d'être le seul à penser ça) une des solutions les plus propres à l'heure actuelle.

...et ça évite d'utiliser des hacks qui, de toute façon, risquent de poser problème à un moment ou à un autre, et gènent la lisibilité et la maintenabilité des sites.

N'importe quoi.
C'est pas pire de coller 3 ou 4 hacks dans 1 CSS que de se farcir des conditions dans tous les sens sur tes pages.

Pas d'accord non plus : je ne me farçis pas (pas plus que des tas d'autres personnes) des conditions dans tous les sens, j'ai simplement un en-tête de page, avec un commentaire conditionnel pour IE6, que je copie-colle sur toutes mes pages. D'autre part, un hack css repose généralement sur une utilisation volontaire d'une erreur d'interprétation grammaticale; je préfère amplement utiliser une fonctionnalité d'un navigateur, qui ne sera interprétée que par lui, que prendre un bug pour en corriger un autre (ce qui posera un pb le jour ou l'un ou l'autre sera corrigée, ou qu'un autre navigateur aura l'un de ses 2 bugs ou ...).

[milkiway]

Pour moi, si on respecte bien les standards CSS2 et qu'on organise le site correctement

Faux.

IE est tellement irrespectueux de quelques principes que dés que l'on rend un peu plus complexe un affichage via css, il est totalement largué.

Pourquoi s'embêter avec du "faux code" alors que, comme dit ci dessus, <!--[if IE ]> fonctionne très bien et est valide

Parce que <!--[if IE ]> c'est aussi du faux code, même si c'est mis en place par crosoft, cela ne respect rien du tout...

Y a pas à avoir de if machin. On fait un logiciel correctement ou l'on assume que les gens utilise des hacks.

...et ça évite d'utiliser des hacks qui, de toute façon, risquent de poser problème à un moment ou à un autre, et gènent la lisibilité et la maintenabilité des sites.

N'importe quoi.
C'est pas pire de coller 3 ou 4 hacks dans 1 CSS que de se farcir des conditions dans tous les sens sur tes pages.

Heu,
Le IF fonctionne n'est pas du "code" c'est juste un commentaire HTML qu'IE sait interpréter.

Je trouve ça ridicule de parler d'IE comme ça, on dirait un gamin de geek qui veut cracher sur du microsoft. Libre à toi de faire un hack mais je trouve stupide de charger une grosse feuille là où (quand c'est le cas) un simple commentaire suffit.

Enfin, si tu savais utiliser le CSS, tu serais capable de te rendre compte qu'un site bien codé passe sans problèmes sur IE, sauf effets vraiment exceptionnel (qui sont facultatifs). Sur mon site http://www.nicetrotter.fr/ je n'ai aucun hack, aucun IF et ça foncitonne sur IE...
Par contre il faut savoir coder.

[Koxin-L]

Pffff, arrête de faire ta quiche...

Ouais, design digne d'un template à 5€.
Tu codes comme une tanche...

Moi, je te dis que je code correctement, même si j'ai pas forcement du 100% valide, et que les hacks n'encombrent pas plus que les condition, voir moins justement parce que je sais faire une css.

Et les commentaire font partie intégrante d'un code, donc, sont des codes.

Moi, critique de crosoft ? Je me marre. On a pas le droit de dire que il est correct d'utiliser des hack face à un nav mal codé ?

Par contre :

Sur mon site http://www.nicetrotter.fr/ je n'ai aucun hack, aucun IF et ça foncitonne sur IE...
Par contre il faut savoir coder.

Ouahhhh, un template à 1€ et un css avec 3 div, quel puissance...

Je m'incline devant tant de grandeur.




Baltringue.

[NxtGen]

urf ca balance sec...
Pour remettre le topic dans le droit chemin :

Personnellement j'ai utilisé pour nombreux de mes sites l'astuce !important pour différencier IE<7 et FF et autres, mais avec l'arrivée d'IE7 qui interpréte le css un peu mieux que IE6, ca à foutu un peu le bazard.

Du coup, pour les nouveaux sites que je développe, j'utilise ça :

Code: Tout sélectionner

<style type="text/css" media="all">@import url("global.css");</style>
<!--[if lt IE 7]>
   <style type="text/css" media="all">@import url("global-ie6.css");</style>
<![endif]-->
<!--[if IE 7]>
   <style type="text/css" media="all">@import url("global-ie7.css");</style>
<![endif]-->

le global.css est la feuille de style principale, et je rattrape les petites différences si besoin avec une feuille de style dédiée par navigateur

Je trouve cela plus pratique que le !important puisque meme s'il y a une nouvelle évolution des navigateurs, cette astuce restera normalement fonctionnelle.