[SOLUTION] Differencier IE6 IE7 et FIREFOX en CSS

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par memopage, 8 Janvier 2008.

  1. memopage
    memopage Nouveau WRInaute
    Inscrit:
    8 Janvier 2008
    Messages:
    9
    J'aime reçus:
    0
    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
     
  2. Stellvia
    Stellvia WRInaute impliqué
    Inscrit:
    28 Décembre 2004
    Messages:
    566
    J'aime reçus:
    5
    J'ais rien compris , perso j'utilise ca qui marche tres bien :

    Code:
    <!--[if IE 7]><style type="text/css"> blabla </style>
    
    <![endif]-->
     
  3. memopage
    memopage Nouveau WRInaute
    Inscrit:
    8 Janvier 2008
    Messages:
    9
    J'aime reçus:
    0
    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.

    ;)
     
  4. darkjukka
    darkjukka WRInaute impliqué
    Inscrit:
    28 Avril 2007
    Messages:
    574
    J'aime reçus:
    0
    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.
     
  5. memopage
    memopage Nouveau WRInaute
    Inscrit:
    8 Janvier 2008
    Messages:
    9
    J'aime reçus:
    0
    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:
    <!--[if IE 7]><style type="text/css"> blabla </style>
    
    <![endif]-->
    ne marche pas.

    Mais bon apres chacun à ses habitudes ;)
     
  6. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    Pourquoi s'embêter avec du "faux code" alors que, comme dit ci dessus, <!--[if IE ]> fonctionne très bien et est valide
     
  7. darkjukka
    darkjukka WRInaute impliqué
    Inscrit:
    28 Avril 2007
    Messages:
    574
    J'aime reçus:
    0
    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.
     
  8. MarvinLeRouge
    MarvinLeRouge WRInaute impliqué
    Inscrit:
    1 Septembre 2004
    Messages:
    514
    J'aime reçus:
    0
    +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.
     
  9. memopage
    memopage Nouveau WRInaute
    Inscrit:
    8 Janvier 2008
    Messages:
    9
    J'aime reçus:
    0
    désolé j'ai parlé un peu trop vite, faut que je me trouve vite une cachette ^^ !
     
  10. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 532
    J'aime reçus:
    1
    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é.

    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.

    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.
     
  11. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    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...
    Tu vois où du javascript là?? :roll:
     
  12. MarvinLeRouge
    MarvinLeRouge WRInaute impliqué
    Inscrit:
    1 Septembre 2004
    Messages:
    514
    J'aime reçus:
    0
    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.

    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 ...).
     
  13. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    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.
     
  14. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 532
    J'aime reçus:
    1
    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 :
    Ouahhhh, un template à 1€ et un css avec 3 div, quel puissance...

    Je m'incline devant tant de grandeur.




    Baltringue. :roll:
     
  15. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    563
    J'aime reçus:
    0
    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:
    <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.
     
  16. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 196
    J'aime reçus:
    0
    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:
     
  17. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    :lol: Koxin-L 1 / Milkyway : 0
     
  18. memopage
    memopage Nouveau WRInaute
    Inscrit:
    8 Janvier 2008
    Messages:
    9
    J'aime reçus:
    0
    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.
     
  19. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    563
    J'aime reçus:
    0
    Oui c'est bien ca
    par exemple dans global.css il y a :

    Code:
    #conteneur {
       position: absolute;
       top: 200px;
       left: 200px;
       padding: 10px 5px 10px 5px;
       }
    et dans global-ie6.css
    Code:
    #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.
     
  20. Inekman
    Inekman Nouveau WRInaute
    Inscrit:
    17 Mars 2006
    Messages:
    12
    J'aime reçus:
    0
    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 ^^
     
  21. xdjuj
    xdjuj Nouveau WRInaute
    Inscrit:
    30 Mars 2009
    Messages:
    1
    J'aime reçus:
    0
    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.

    Code:
    <!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)
     
Chargement...
Similar Threads - [SOLUTION] Differencier IE6 Forum Date
[php] [solution] écrire en français le temps écoulé entre deux dates Développement d'un site Web ou d'une appli mobile 22 Septembre 2010
[Solution] PHP5 chez 1&1 Développement d'un site Web ou d'une appli mobile 19 Juillet 2010
[SOLUTION] Mail via fonction PHP mail() Administration d'un site Web 7 Janvier 2005
Comment différencier les membres venant de Adwords à ceux de Google classique? AdWords 29 Juillet 2017
SEO Google News : comment différencier les types de contenus ? Référencement Google 22 Juin 2016
Différencier le trafic lié a une periode de celui lié au travail de référencement Débuter en référencement 22 Avril 2015
"Vue" pour une partie de mon site, différencier les entrées extérieures Google Analytics 12 Novembre 2014
Différencier acheteur par référencement naturel ou par campagne Débuter en référencement 27 Juillet 2012
Différencier les "google" utilisés Google Analytics 17 Avril 2012
Différencier 2 sites Google Analytics 21 Mars 2012
Différencier nom de site - nom de domaine Débuter en référencement 15 Juin 2011
Google.ca: Comment différencier les visiteurs Anglais / Francais Google Analytics 3 Mai 2010
Différencier le Googlebot FR du Googlebot US Netlinking, backlinks, liens et redirections 11 Avril 2010
Site/blog : comment différencier le contenu ? Développement d'un site Web ou d'une appli mobile 19 Mars 2010
Comment différencier un bon annuaire d'un mauvais annuaire ? Annuaires et moteurs 3 Juillet 2009
Différencier les revenus Adsense sur un site multilingue AdSense 24 Octobre 2008
Différencier plusieurs ordinateurs ayant la meme ip. Développement d'un site Web ou d'une appli mobile 17 Mai 2007
[Résolu] Différencier les règles URL Rewriting et .htaccess 18 Janvier 2005
Différencier les googlebots? Crawl et indexation Google, sitemaps 9 Janvier 2005
Faut-il différencier les clics AdWords des clics AdSense ? AdSense 9 Janvier 2004