[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 :

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

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

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

ne marche pas.

Tu vois où du javascript là?? :roll:

 

[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. :roll:

 

[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 :

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

 

[milkiway]

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. :roll:

je savais que pouvoir faire ça avec si peu de div et si peu de css allait t'impressionner
à bon entendeur salut
il suffit de voir tout tes posts sur le forum tu n'interviens que pour critiquer sèchement
tu dois être sacrément introverti dans la vie mon pauvre :lol:

 

[bproductiv]

:lol: Koxin-L 1 / Milkyway : 0

 

[memopage]

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 :

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

Ok, merci pour le tips. Donc si j'ai bien compris dans global-ie6.css tu réecris les proprietes comme si on voulait "ecraser" celle qui se trouve dans global.css

Du style :
#conteneur ...blabla dans global.css

#conteneur ... blabla dans global-ie6.css et ca "écrase" ce qui a été dit dans global.css

C'est bien ça ? Si oui, est-ce qu'il y'a des soucis niveau validation ?

Merci.

 

[NxtGen]

Oui c'est bien ca
par exemple dans global.css il y a :

#conteneur {
   position: absolute;
   top: 200px;
   left: 200px;
   padding: 10px 5px 10px 5px;
   }

et dans global-ie6.css

#conteneur {
   padding: 15px 10px 15px 10px;
   }

et pour IE6, c'est donc la seconde valeur du padding qui sera prise en compte puisqu'elle écrase l'autre.

niveau validation aucune idée... je n'ai aucune erreur dans la console d'erreur de firefox en tous cas.

 

[Inekman]

Oui c'est bien ca
par exemple dans global.css il y a :

#conteneur {
   position: absolute;
   top: 200px;
   left: 200px;
   padding: 10px 5px 10px 5px;
   }

et dans global-ie6.css

#conteneur {
   padding: 15px 10px 15px 10px;
   }

et pour IE6, c'est donc la seconde valeur du padding qui sera prise en compte puisqu'elle écrase l'autre.

niveau validation aucune idée... je n'ai aucune erreur dans la console d'erreur de firefox en tous cas.

Merci infiniment pour cette astuce NxtGen, je rencontre un soucis avec IE 6 uniquement et je ne savais pas comment m'y prendre pour corriger tout ça ^^

 

[xdjuj]

Je suis étonné que personne n'ai mentionné la solution suivante.

Vous avez également la possibilité d'utiliser # / ou _ pour cibler les navigateurs que vous souhaitez.

Une feuille CSS codée correctement ne demande pas 40 "hacks" pour être compatible auprès de tous les navs.

Je vous invite à tester le code suivant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Test CSS - Navs</title>
	<style type="text/css" media="screen">
		p{
			color: #000;	/* Couleur pour tous les navs */
			#color: yellow; /* Ecrase les précédentes pour IE 7 ET IE 6 */
			_color: red; 	/* Ecrase la déclaration précédente pour IE 6 */
		}
	</style>
</head>
<body>
	<p>Mon test de couleur</p>
</body>
</html>

En clair :
- On déclare pour tous les navs.
- Puis on écrase pour tous les IE.
- Puis on écrase pour IE6.

En espérant que ça puisse vous servir (/ et # se comportent de la même façon avec IE)