Une bonne conception CSS et la prise en charge d’IE6/IE7 s’excluent-elles mutuellement ?

Question

Comme tout développeur Web, je maudis habituellement les créateurs d'IE6 avec des morts ignobles et prématurées au moins une fois par semaine.Pourtant, mon entreprise exige que je continue à prendre en charge le navigateur le plus détesté.

Mon problème aujourd'hui a été de vouloir d'abord utiliser un caractère générique dans mon CSS, puis d'essayer d'utiliser la propriété "inherit" à la place.Aucun d’entre eux n’est pris en charge par IE7-.

Je veux vraiment, VRAIMENT avoir un bon CSS, bien structuré et qui hérite correctement (CSS orienté objet, si vous aimez ce mot à la mode), mais j'ai ce sentiment de naufrage au creux de mon estomac que tôt ou tard, ça va avoir être des classes personnalisées et basées sur la localisation.

Cela pose la question :étant donné à quel point IE est horrible à gérer de nombreux concepts CSS, est-il impossible de prendre en charge correctement ce navigateur tout en disposant d'un document CSS bien structuré ?

Juste pour clarifier:Je suis conscient qu'il existe de nombreuses façons (certaines légitimes, d'autres moins) de contourner les bogues et les lacunes trouvées dans IE6 et 7.Ce que je demande vraiment, c'est "si vous voulez avoir une seule feuille de style bien écrite qui hérite correctement, devez-vous choisir entre cela et avoir une apparence cohérente dans tous les navigateurs ?".J'espère que cela a du sens.

En d’autres termes, dois-je m’en tenir à mes principes et coder une bonne feuille de style ou dois-je accepter qu’IE6 bénéficie toujours d’une part de marché horriblement élevée (20 % au dernier décompte) et me résoudre à le soutenir ?Ou existe-t-il un juste milieu qui me permet de minimiser la chirurgie de Frankenstein sur mon code HTML et CSS tout en obtenant des résultats respectables dans IE ?

Answer 1

Pour être honnête, vous ne pouvez pas blâmer IE pour tout cela (même si Microsoft est certainement de loin le pire transgresseur).Une partie du problème avec des normes aussi vastes et en évolution rapide est qu'il s'agit d'un objectif trop mouvant pour être parfaitement mis en œuvre en temps opportun.Malheureusement, les cycles de publication des navigateurs Web ne coïncident pas avec la publication de nouvelles spécifications Web.Ainsi, tout ce que les développeurs de navigateurs peuvent faire est d'essayer d'implémenter autant de fonctionnalités que possible à partir des dernières recommandations du W3C, en sélectionnant ce qui ils pensent seront les fonctionnalités les plus couramment utilisées à mettre en œuvre en premier.

Cependant, les choses s'améliorent clairement et il est possible de prendre en charge IE6/7 tout en utilisant une conception CSS appropriée.C'est juste...difficile.Jeter un coup d'œil à cette comparaison des moteurs de mise en page et du support CSS.Si vous regardez la tendance générale, vous verrez que la plupart des navigateurs (même IE) ont tendance à se conformer aux normes établies à long terme, il faut simplement à certains navigateurs plus de temps que d'autres pour implémenter une norme après son introduction.

Et parfois, ce n’est pas qu’un navigateur soit « moins » conforme aux normes qu’un autre.Avec les nouvelles normes, le problème est souvent que différentes équipes de développement choisissent d'adopter Différents composants de la nouvelle spécification.Ainsi, même si CSS3 commence déjà à être implémenté par la plupart des navigateurs, nous devrons probablement attendre que CSS4 soit publié avant de constater une prise en charge cohérente dans tous les principaux moteurs de rendu.Et si vous essayez d'utiliser les dernières fonctionnalités CSS3 dès maintenant, vous aurez du mal à établir la compatibilité entre tous les principaux navigateurs.Mais si vous utilisez les fonctionnalités introduites dans CSS1, cela ne pose aucun problème.

Par conséquent, la seule option, à part utiliser de vilains hacks CSS, est de s'en tenir aux méthodes bien établies. plus vieux Caractéristiques.Alors le problème n'est plus essayer de se conformer aux normes du Web tout en prenant en charge un navigateur particulier.Au lieu de cela, le problème devient simplement essayer de résister à l'envie d'utiliser les dernières et meilleures fonctionnalités CSS.

En dehors de cela, la seule solution permanente que je vois à cette situation récurrente est que le W3C prioriser différentes parties des spécifications nouvellement introduites afin que les nouvelles fonctionnalités puissent être mises en œuvre en phases discrètes et synchronisées sur tous les principaux navigateurs.Ainsi, par exemple, les règles de grammaire pourraient recevoir la plus haute priorité ainsi qu’un délai fixé pour leur mise en œuvre.Après cela viendrait la deuxième phase, qui pourrait être celle des sélecteurs d'éléments et d'attributs, et ainsi de suite.

Cela nécessiterait un énorme niveau de coopération entre le W3C et les équipes de développement, mais cela en vaudrait la peine.Après tout, cela ne sert à rien aux utilisateurs et aux développeurs Web pour IE d'implémenter un sous-ensemble de fonctionnalités de CSS3 tandis que Firefox implémente un sous-ensemble différent et les navigateurs Webkit encore un autre sous-ensemble.Une « norme » ne sert à rien tant qu'elle n'est pas réellement standardisé sur toutes les principales plates-formes de rendu. Il est préférable que chaque navigateur prenne en charge moins de nouvelles fonctionnalités, mais qu'elles soient toutes disponibles. les mêmes caractéristiques, plutôt que d'introduire séparément une tonne de leurs propres fonctionnalités qui ne sont pas universellement prises en charge.

Answer 2

Pas du tout - vous pouvez compenser les défauts de IE avec commentaires conditionnels et une feuille de style spécifique IE, tout en servant votre feuille de style « nice » à d'autres navigateurs.

Quelque chose d'autre que je trouve aide est d'utiliser un CSS reset . Bien que cela ne va pas résoudre tous les problèmes de IE, il ne vous donne une bonne base pour travailler.

Answer 3

Le plus anoying IE6 fonction est la manipulation de modèle de boîte est tout. Vous devriez en tenir à la marge à la place lors du positionnement des boîtes, et essayez d'utiliser des tailles de police relatives pour permettre le redimensionnement de la police sur IE. Le reste des bizarreries sont bien documenté.

Utilisation commentaires conditionnels est la manière la plus propre d'avoir à la fois une feuille de style propre pour bien navigateurs se comporter, et en utilisant toujours être belle sur IE. C'est ce que je l'utilise, nécessitant seulement 1 fichier css de quelques lignes pour réparer mes sites look and feel.

sombre chemin de crossbrowser aspect cohérent et que vous jugez hacks css , mais je déconseille fortement son utilisation, maintenant que specialy pendant un certain temps, nous devrons cibler trois différents IE (6, 7 et 8)

Normalement, si vous obtenez le style de travailler dans les deux FF et Chrome / Safari, IE est seulement quelques corrections loin d'être correcte.

Answer 4

Il y a un site Position est tout qui détaille la façon dont FF, IE et Safari sont conformes à la norme CSS . Sur le site vous trouverez la plupart des solutions de contournement / remèdes pour IE qui atténueront la nécessité pour vous d'écrire tant du code conditionnel pour votre CSS.

Vous aurez également besoin de consulter A List Apart plus sur CSS et IE. Il y a aussi de grands articles sur la mise en page avec CSS tableless, la manipulation du bogue de la hauteur dans IE, etc. Bonne chance - IE 6 suce vraiment quand il s'agit CSS

.

Answer 5

Certainement pas. Si vous vous assurez qu'ils rendent la page en mode « standard », par opposition au mode « bizarreries » un grand nombre des problèmes communs IE CSS sont résolus. Pour ce faire, vous devez fournir une déclaration DOCTYPE valide en haut de la page, tels que

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Comme d'autres l'ont souligné, une autre bonne idée est de commencer votre feuille de style avec un extrait qui élimine tous les rembourrages et les marges comme ceci:

*,html {
margin: 0;
padding: 0;
}

Enfin, un problème commun avec des mises en page CSS dans IE est que la compensation des flotteurs ne se produit pas lorsque vous vous attendez. Est de faire avec une propriété d'objets cachés dans IE appelé « hasLayout »; Seuls les objets « ont mise en page » sera correctement enrouler autour et enfermer les objets enfants flottés. Il est facile de faire en sorte que vos conteneurs « ont mise en page » en spécifiant simplement au moins une dimension pour eux:

height: 1%;
width: 100%;
zoom: 1;

Je ne personnellement utiliser les feuilles de style conditionnel IE sauf pour une chose simple: remplacer les milieux PNG avec GIFs dans IE <7 - trouver il n'y a rien de mal à les utiliser, je ne complique unnescessarily choses quand vous devez définir l'apparence du même objet en deux endroits différents. Avec les trois conseils ci-dessus et un peu de patience, vous devriez être en mesure de créer des mises en page CSS en utilisant une seule feuille de style qui rendent tout aussi bien dans IE 6/7 comme ils le font dans Mozilla / Webkit.

Bonne programmation!

Answer 6

IE 6 ne limite vraiment ce que nous pouvons faire.

Il est le manque de soutien pour les sélecteurs avancés (et héritera - IE 7 ne supporte pas non plus) qui me fait. Il suffit d'avoir le sélecteur d'enfant et les sélecteurs d'attribut serait bien, ce serait vraiment réduire la quantité de code que nous devons écrire et à maintenir. Vous ne pouvez vous mettre fin à tout travail autour du manque de soutien pour eux en dupliquant vos styles, donc jusqu'à avoir à coder comme si elles n'existaient pas.

Soupir.

Answer 7

Ne suivez des tutoriels en ligne CSS qui est rendu correctement avec IE6 et Chrome (ou Webkit). Si elle regarde droit dans les deux, il semble probable droit dans (presque) tous les navigateurs.