Utiliser une feuille de style QUE pour Internet explorer 6

Bonjour à tous,
Est il possible d'avoir 2 feuilles de style pour un site ? :

• un feuille css générale.
• un feuille css que pour internet explorer 6

C'est a dire que lorsque on navigue avec ie6, seul la feuille spéciale ie6 est utilisée...

et si oui, comment dois-je procéder?

merci d'avance pour vos réponses

Salut,

Fais une recherche sur le site avec "commentaires conditionnels".

Hello,

Sous IE6, le navigateur charge la feuille de styles générale + la feuille de styles spéciale IE6 ? Voir les commentaires conditionnels.

Sous IE6, le navigateur ne charge QUE la feuille de styles spéciale IE6 ? Dans ce cas, on peut utiliser la règle @import (pour les styles visibles uniquement sur les navigateurs modernes), et également jeter un coup d'œil sur le sujet de Benjamin 6 sujets plus bas...
Modifié par BeliG (07 Apr 2009 - 16:38)

Salut à tous,
merci pour vos pistes

j'ai essayer de régler mon problème en utilisant le code suivant (merci BeliG)

<!--[if !IE 6]><!-->
<style media="screen" type="text/css">
@import "styles.css";
</style>
<!--<![ endif ]-->

Sauf que FF utilise la feuille de style censée fonctionner uniquement avec IE6...
Autre problème, IE6 n'utilise pas la bonne feuille non plus!

Tu as compris le truc à l'envers.

Une (re)lecture du tutoriel sur les commentaires conditionnels pourrait t'être utile (et notamment la partie concernant les tests de comparaison).

EDIT : J'ai peut-être mal compris, dans ce bout de code que tu nous présentes, à quel(s) navigateur(s) penses-tu que la feuille styles.css devrait s'appliquer ?
Modifié par BeliG (07 Apr 2009 - 17:24)

je pense que c'est moi qui doit pas bien comprendre...
voila mon bout de code :

<link  rel="stylesheet" type="text/css" href="feuille-generale.css" />
<!--[if lte IE 6]><style media="screen" type="text/css">
@import "feuille-ie6.css";
</style>
<![endif]-->

avec "feuille-generale.css" pour tous les navigateurs
et "feuille-ie6.css " que pour internet explorer 6

EDIT:
est ce que - @import "feuille-ie6.css" - fonctionne avec IE6?

a écrit :
En effet, @import (CSS2) n'est pas reconnu par les très vieux navigateurs qui ne sont pas encore aux normes au niveau des CSS

Modifié par perinus (07 Apr 2009 - 17:49)

En effet...

Bon reprenons à partir de quelque chose qui marche. Benjamin nous dit :

Benjamin D.C. a écrit :
Si l'on désire par exemple masquer une feuille de styles seulement pour IE6 mais la charger pour tous les autres navigateurs, on écrira simplement :

<!--[if !IE 6]><!-->
<style media="screen" type="text/css">
@import "styles.css";
</style>
<!--<![ endif ]-->

[#darkred][i]Supprimer les espaces avant et après endif[/i][/#]

Donc dans ton cas, la feuille "styles.css" devient donc "feuille-generale.css".

Les navigateurs modernes étant gérés (FF et IE7, entre autres), il nous reste le cas IE6. Et là pas de surprise, on fait ça normalement, à l'ancienne, avec l'aide des commentaires conditionnels :

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="feuille-ie6.css"/><![endif]-->

Ce qui nous donne au final :

<!--[if !IE 6]><!-->
<style media="screen" type="text/css">
@import "feuille-generale.css";
</style>
<!--<![ endif ]-->
[#darkred][i]Supprimer les espaces avant et après endif[/i][/#]

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="feuille-ie6.css"/><![endif]-->

Modifié par BeliG (07 Apr 2009 - 18:05)

BeliG,
désolé mais je n'obtiens pas le résultat attendu...
en utilisant ce code,

<!--[if !IE 6]><!-->
<style media="screen" type="text/css">
@import "feuille-generale.css";
</style>
<!--<![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="feuille-ie6.css"/><! endif -->

Je perds ma mise en page css générale...
"<!--[if IE 6]>" s'affiche dans le haut de ma page.

salut,

<!----------------------------->
<!-- pour IE inferieur à IE7 -->
<!----------------------------->
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="feuille-ie6.css" />
<![endif]-->

<!-------------------------------------->
<!-- pour IE supérieur ou egale à IE7 -->
<!-------------------------------------->
<!--[if gte IE 7]>
<style media="screen" type="text/css">
@import "feuille-generale.css";
</style>
<![endif]-->

<!--------------------------------------->
<!--- pour navigateur différent de IE --->
<!--------------------------------------->
<!--[if !IE]>
<style media="screen" type="text/css">
@import "feuille-generale.css";
</style>
<![endif]-->

++
Modifié par flattazor (07 Apr 2009 - 21:05)

@flattazor : Ta méthode fonctionne sûrement (sous réserve d'écrire "media" correctement ), mais le code que je propose a l'avantage d'éviter le doublon pour cibler IE7 (dans ton cas on retrouve deux fois l'appel de "feuille-generale.css").

@perinus : Je viens de tester, ça fonctionne chez moi. Je copie / colle mon code :

<!--[if !IE 6]><!-->
<style media="screen" type="text/css">
     @import "feuille-generale.css";
</style>
<!--<![ endif ]-->
[#darkred][i]Virer les espaces autour de "endif"[/i][/#]

<!--[if IE 6]>
     <link rel="stylesheet" type="text/css" href="feuille-ie6.css"/>
<![ endif ]-->
[#darkred][i]Virer les espaces autour de "endif"[/i][/#]

EDIT : Le problème vient sans aucun doute du 2ème "endif", vérifie que les crochets sont bien présents chez toi (ils ont été supprimés lors de la validation de mon précédent post).
Modifié par BeliG (07 Apr 2009 - 20:55)

salut,

trop presser

j'ai corriger, mais ta méthode est la mieux !

++

merci pour vos réponses et vos pistes!
Je viens d'essayer avec le code de BeliG corrigé

sauf que dans Dreamweaver, lorsque j'utilise ce code, toute ma mise en page css disparait...

alors j'ai essayé ceci :

<link  rel="stylesheet" type="text/css" href="feuille-générale.css" />
<!--[if lte IE 6]><link  rel="stylesheet" type="text/css" href="feuille-ie6.css" /><![endif]-->

ça a l'air de fonctionner.
Qu'en pensez vous?
Modifié par perinus (08 Apr 2009 - 10:40)

perinus a écrit :
sauf que dans Dreamweaver

Baah !

perinus a écrit :
lorsque j'utilise ce code, toute ma mise en page css disparait

Tu peux poser une page en ligne qu'on vérifie ? Tu as fait attention aux crochets des "endif" ?

perinus a écrit :
alors j'ai essayé ceci :

<link  rel="stylesheet" type="text/css" href="feuille-générale.css" />
<!--[if lte IE 6]><link  rel="stylesheet" type="text/css" href="feuille-ie6.css" /><![endif]-->

Mais ça n'a plus rien à voir ! Avec ce code IE6 aura les styles de "feuille-générale.css" ET de "feuille-ie6.css".

C'est ce que tu voulais depuis le début ?

EDIT : Les accents à "feuille-générale.css", tu les as vraiment dans ton code ou ce sont des fautes de frappe ?
Modifié par BeliG (08 Apr 2009 - 10:51)

pourquoi baaaahh!!
c'est pas mal dreamweaver... tu utilises quoi?

J'utilise donc ce code sans les accents et avec les crochets pour endif:

<link  rel="stylesheet" type="text/css" href="feuille-generale.css" />
<!--[if lte IE 6]><link  rel="stylesheet" type="text/css" href="feuille-ie6.css" /><![ endif ]-->

et ça fonctionne... ie6 ne récupere que les styles de feuille-ie6.css...
c'est pas normal?
Modifié par perinus (08 Apr 2009 - 20:48)

perinus a écrit :
c'est pas mal dreamweaver...

Dreamweaver c'est lourd, c'est lent, ça crée des bugs (problèmes d'encodage des caractères, entre autres), c'est lophane, c'est pas libre, c'est baah !

perinus a écrit :
et ça fonctionne... ie6 ne récupere que les styles de feuille-ie6.css...
c'est pas normal?

Ben non.

Cette ligne :

<!--[if lte IE 6]><link  rel="stylesheet" type="text/css" href="feuille-ie6.css" /><![ endif ]-->

On est d'accord, ne permet de cibler que les versions d'IE antérieures ou égales à la version 6.

Mais ça :

<link  rel="stylesheet" type="text/css" href="feuille-generale.css" />

Sans condition, sans rien, ça s'adresse bien à TOUS les navigateurs, non ?

J'aimerais être certain de bien te comprendre, tu affirmes que ton IE6 ne récupère QUE les styles de "feuille-ie6.css", et pas ceux de "feuille-generale.css" ?

a écrit :
J'aimerais être certain de bien te comprendre, tu affirmes que ton IE6 ne récupère QUE les styles de "feuille-ie6.css", et pas ceux de "feuille-generale.css" ?

oui en effet, seulement je verifie avec la version ie6 de tredosoft.
peut etre que mon erreur est là.

perinus a écrit :
oui en effet, seulement je verifie avec la version ie6 de tredosoft.
peut etre que mon erreur est là.

Non je ne pense pas, cet outil est fiable.

Pourrais-tu poser une page en ligne ?

Salut BeliG,
merci pour ta réactivité
voici l'adresse du site :

http://www.arche-evenements.com

* Bang *

Donc je confirme, pour IE6 les 2 feuilles sont prises en compte (le contraire m'aurait étonné).

Mais va falloir que tu m'expliques, c'est quoi l'intérêt d'avoir une feuille de styles spéciale IE6 si c'est pour y mettre exactement la même chose (à 99%) que dans la feuille de styles générale ?

En général, le but d'une feuille de styles spéciale IE6 est de corriger les bugs / différences de comportement qu'il peut y avoir avec les autres navigateurs (en ne ciblant que les éléments à problème). Et à mon avis c'est ce que tu voulais faire depuis le début...

Je t'invite donc à relire mon 1er post et le lien qui va avec :

BeliG a écrit :
Sous IE6, le navigateur charge la feuille de styles générale + la feuille de styles spéciale IE6 ? Voir les commentaires conditionnels.

Bonne continuation.

Ok,

je vais reprendre tout ça.

merci encore!