28172 sujets

CSS et mise en forme, CSS3

Méthodologie pour IE, css séparé ou pas ?

Bonjour,

Petite question pratique dont il n'existe pas de réponse absolue et définitive je pense mais je suis intéressé de connaître votre pratique et les raisons du choix.

Pour obtenir un rendu similaire sous IE on est dans certains cas amené à rajouté des propriétés dans le css initial (ex font-size: 100%) sans que celles-çi ne cause de problème avec les autres navigateurs.

Ma question est faites vous systématiquement un feuille de style séparée pour IE avec de garder le fichier css plus clair, logique, lisible ou bien tant que les propriétés rajoutées pour IE n'affectent pas les autres navigateurs n'utilisez-vous qu'un seul fichier css ?
Bonjour,

Pour insérer des styles correctifs, le mieux (et le plus propre) c'est de faire une feuille corrective, appelée grâce à des commentaires conditionnels.
Salut,

Une feuille de style générale pour tous les navigateurs appelée par la page html, et une feuille ne comprenant que les instructions spécifiques pour les différentes versions d'IE appelée par commentaires conditionnels. Smiley smile
oki merci,

c'est parfait ça confirme mon impression.

Dernière question sur le sujet, via les commentaires conditionnels on peut affecter une feuille de style spécifique pour toutes les versions de IE ou uniquement pour certaines versions. Ma question est via les commentaires conditionnels IE supporte-t-il la cascade des styles ?

Je m'explique :
je fais mon css standard
via un commentaire conditionnel je fais un lien vers un css pour toutes les version de IE
via un autre commentaire conditionnel je fais un lien vers un css spécifique pour IE 5.5 (par ex)

est-ce que IE 5.5 appliquera tous les styles en cascades cad feuille de style générale > feuille de style tous IE > feuille de style IE 5.5 ?

ou uniquement feuille de style générale > feuille de style IE 5.5 ?
Il est possible de préciser, dans les commentaires conditionnels, une version d'IE, ou non.

Et oui, IE prendra bien en compte la cascade.
Bonjour Laurie-Anne,

pour l'affectation d'une version d'IE spécifique j'avais compris mais donc tu me confirmes par ta réponse que via les commentaires conditionnels il est possible d'appliquer une feuille de style générique tous IE + plus une feuille de style spécifique à une version. C'est ce point qui n'était pas très clair pour moi.

merci donc
Bonjour Mikachu,

J'ai bien lu la page indiquée mais comme je le disais elle n'explicitait pas le fonctionnement d'IE en cas d'utilisation de plusieurs feuilles de style via les commentaires conditionnels (ou du moins celà ne m'est pas apparu clairement malgré d'autres lectures en parallèle).

ex
<!--[if IE]> css tous IE <![endif]-->
<!--[if IE 6]> css pour IE 6 <![endif]-->

IE n'étant pas à un bizarrerie prêt je m'interrogeais en préventif pour savoir si je pouvais regrouper toutes les propriétés communes aux différentes versions d'IE dans une feuille de style et n'indiquer dans une feuille de style spécifique à une version uniquement le delta par rapport aux version de IE.

Mais visiblement je m'interrogeais trop Smiley lol et IE fait bien la cascade

merci pour le lien
étant un maniaque du découpage des fichiers css, j'ai j'amais vraiment aimé la feuille de style spécialement pour un navigateur

j'ai découvert recemment une methode qui me va a ravir

Rajouter une div générale autour du site pour les cas spéciaux



<html>
<head></head>
<body>
<!--[if IE 6]><div id="IE6"><![endif]-->
<!--[if IE 7]><div id="IE7"><![endif]-->
<!--[if (IE) & (!IE 6) & (!IE 7)]><div id="IE"><![endif]-->

 ... Contenu ...

<!--[if (IE)]></div><![endif]-->
</body>
</html>


Comme ca je garde ma structure CSS préferé (les typo d'un coté, la structure de l'autre, le cosmetique d'un autre, ect...) et il me suffit de rajouter un id pour les "correctifs dédiés"

#box{float:left;...}
#IE6 #box{display:inline;float:left;...}
Salut,

ça me semble super lourd comme technique et très peu lisible. Quel est l'intérêt par rapport à des feuilles de style correctives en fonction des versions d'IE ?
Salut,

Je trouve ca super lourd, ca veut dire que le contenu de ta page sera multiplié par autant de versions d'IE, encore plus lourd pour ceux qui surfent sur d'autre navigateurs qui vont devoir charger un code qui ne sera même pas exécuté...
Sans compter que dans tous les cas il te faudra définir des styles en cascade spécifiques pour chaque <div> selon les identifiants mais aussi pour tous les enfants qui le nécessitent, en multipliant la encore les styles communs...

Bref une feuille de style en commentaires conditionnels avec quelques lignes ça me semble bien plus simple et léger.
C'est pas plus lourd que votre méthode ^^,

je refais pas mon site X fois en fonction de chaque navigateur
j'ai une seule structure HTML encadré ou non par une div supplémentaire (en fonction du navigateur)
et au lieu d'avoir mes styles IE6 dans un ie6.css ils sont toujours dans mes "structure.css" seulement ils sont précéder d'un préfixe pour s'adapter au navigateur ciblé (#IE6)

Dans mon exemple " ... Contenu ..." c'est mon site complet qui est valide sous FF3
la div #IE6 englobe totalement mon site, pas seulement un element de mon site ^^

au final, j'ai juste une div de plus et ca me permet juste de me passer d'un fichier css spécial IE6 (par exmple Smiley langue )
RubyOkena a écrit :
C'est pas plus lourd que votre méthode ^^,
Ben si : relis bien ce que dit Mikachu... On peut également rajouter que cela va contre la séparation structure / présentation... D'autre part pour la maintenance c'est aussi plus simple d'avoir plusieurs css. Et bien sûr tu fais comme tu le sens ! Smiley smile
La méthode des commentaires conditionnelle est certainement moins lourde que ta méthode...

Déja parce que ton code html reste simplifié à son maximum, inutile d'ajouter de div de mise en forme (qu'elle soit spécifique à IE ou non), il suffit juste d'une ligne d'appel de feuille alternative via commentaire conditionnel.

Quand aux feuilles de styles spécifiques IE, vu qu'elles ne reprennent pas la majorité des instructions qui fonctionnent correctement, elle ne sont jamais d'une longueur énorme qui en empêche une lecture et une modification rapide.

Quand à tes styles spécifiques, tu dois avoir du #IE6, et #IE7 dans ta feuille style, qui sont soit au milieu des styles généraux, ce qui doit pas faciliter la lecture des styles, soit regroupés par version d'IE à la fin ce qui revient finalement à séparer les styles pour IE...

Donc non désolé je vois pas l'intérêt de ta méthode. Mais si tu te sens plus à l'aise comme ça bien sur... Smiley cligne
Pour ma part, je préfère faire jaillir la cascade de commentaires conditionnels comme suit :
<!--[if lte IE 8]>feuille de style ciblant IE 8 et versions inférieures<![endif]-->
<!--[if lte IE 7]>feuille de style ciblant IE 7 et versions inférieures<![endif]-->
<!--[if IE 6]>feuille de style ciblant IE 6 seulement<![endif]-->

Autrement dit, je pars toujours de la version la plus récente d'IE pour remonter progressivement vers la version la plus ancienne dont je doive tenir compte (d'abord la 8 si besoin est, ensuite la 7, enfin la 6), en raisonnant sur le fait qu'en règle générale, un bug qu'on trouve dans la version la plus récente se retrouve dans les versions antérieures, d'où l'emploi de lte dans les conditions (lte = less than or equal, inférieur ou égal).
Modifié par Victor BRITO (16 Dec 2009 - 22:13)
@Victor, c'est exactement la méthode que j'ai adopté pour le moment, ça paraît d'ailleurs la plus logique
Sujet clos
Aller à