Comptabilité css avec les anciens navigateurs.

Bonjour à tous,

Alors voila, j'ai vraiment pris l'habitude maintenant de travailler en xhtml-css, et ai laisé tomber depuis longtemps les bidouillages html et pages construites en tableaux (quelle horreur ).

Seulement je me pose une question pour un site que je dois faire, et qui doit être visible sur des navigateurs assez anciens je pense. Il faudrait que je me renseigne pour avoir les infos exactes, mais je crois que beaucoup d'utilisateurs iront voir ce site avec une version pas spécialement à jour de leur navigateur, puisqu'il s'agit de fonctionnaires qui n'ont pas toujours un outil "à la pointe".

Donc je voudrais juste savoir si vous aviez des conseils concernant la réalisation de ce type de travail, je n'ai pas envie de changer ma façon de travailler et de refaire des pages tableaux-html pour ça, je suppose qu'ily a moyen de bien utiliser le css tout de même. Mais je n'en sais pas beaucoup sur la compatibilité, en fait j'ai peur de réaliser quelque chose qui fonctionne bien sur mon ordi mais qui deviendrait un chaos sur un navigateur un peu ancien. comment éviter ce genre d'ennui?

D'avance merci, et puis bonne année à tous ^^

Bonjour,

On admet aujourd'hui généralement un support convenable jusqu'à Internet Explorer 6. Les versions antérieures (dont la 5.5) sont maintenant résolument obsolètes.
Si c'est faisable, renseigne-toi par acquis de conscience sur les outils utilisés par tes clients.

Merci de ta réponse

Ce qui veut dire que a partir de internet explorer 5 je peux concevoir un site xhtml-css sans problème?
Modifié par Ernie (01 Jan 2008 - 19:09)

Ernie a écrit :
a partir de internet explorer 5

À partir d'Internet Explorer 6 plutôt. De toute manière, la part de marché des versions d'IE antérieures à 6 est aujourd'hui négligeable (0,12% pour Microsoft Internet Explorer 5.5 à l'heure actuelle selon Market Share).

Ernie a écrit :
je peux concevoir un site xhtml-css sans problème?

Ça, je n'ai pas dit.
En gardant en tête les limitations d'Internet Explorer 6 (essentiellement au niveau des sélecteurs) et en ayant connaissance des quelques bugs maintenant largement documentés, la construction de ta maquette devrait se faire en douceur.
Si ton design impose certaines techniques inopérantes sur Internet Explorer 6 (la position fixe par exemple), il sera bon de ne pas se limiter et de supprimer la fonctionnalité pour tes les butineurs mais plutôt de recourir au principe de dégradation gracieuse.
Modifié par Benjamin D.C. (01 Jan 2008 - 19:37)

Bonsoir,

Quelques éléments de base, rapides:

- travailler en CSS2.1 ne signifie pas, actuellement, ne plus faire de tableaux de présentation. Ceux restent nécessaires pour les navigateurs récents dans différents cas de design, qui peuvent être de toute façon présents dans le projet concerné.

- "puisqu'il s'agit de fonctionnaires qui n'ont pas toujours un outil "à la pointe"" est une supposition très hasardeuse, et ici un point à vérifier concrètement pour connaître les contraintes éventuelles du projet.

- développer en CSS2.1, avec ou sans le renfort de tableaux de mise en page, est tout à fait possible dans IE5.0 et 5.5 Windows. Cela demande principalement quelques compétences sur ce que l'on appelle le "haslayout" (faire une recherche ici sur le sujet).

- le support des IE5.0 peut également consister en un rendu HTML brut, par filtrage de ce navigateur via la syntaxe de liaison des feuilles de styles (ce n'est en revanche pas possible pour IE5.5, idem, faire une recherche ici).

- les commentaires conditionnels sont un outil incontournable, qu'il s'agisse de rectifier une CSS pour compenser les bugs d'IE5.x ou de transparence PNG (idem).

- d'une manière générale, développer en CSS sans disposer de ces anciennes versions des navigateurs pour y tester son travail est... léger, disons.
Modifié par Laurent Denis (01 Jan 2008 - 19:45)

Il faudrait effectivement cerner clairement les contraintes du projet. Est-ce qu'on s'adresse à un parc identifié de machines avec IE 5.0 ou IE 5.5? Vu le renouvellement des postes bureautique tous les 5 ans en général dans les entreprises -- à voir pour les administrations! --, ça devient de moins en moins probable.

Un autre paramètre à prendre en compte: l'ampleur (et le budget) du projet. Un site destiné à plusieurs centaines de milliers d'utilisateurs justifiera plus facilement d'un temps conséquent passé sur la compatibilité avec IE 5.x qu'un site plaquette qui espère quelques centaines de visites mensuelles.

Au final, on devrait pouvoir être en mesure de se situer par rapport à:
- la démarche «je regarde vaguement si ça passe dans IE5.0 et IE 5.5, je fais peut-être un ou deux correctifs pour ces versions, mais dans l'ensemble tant que ça n'explose pas à la figure de l'utilisateur ça va»;
- la démarche «je travaille en profondeur la compatibilité avec IE 5.0 et IE 5.5».

d'accord, en tous les cas je dois me renseigner sur la version d'explorer la plus utilisée par les clients, si ça se trouve je me fais du souci pour rien. enifn, la question m'intéresse de toute façon ^^

Merci pour vos réponses

Laurent Denis a écrit :
Bonsoir,
- travailler en CSS2.1 ne signifie pas, actuellement, ne plus faire de tableaux de présentation. Ceux restent nécessaires pour les navigateurs récents dans différents cas de design, qui peuvent être de toute façon présents dans le projet concerné.

D'accord, mais je veux dire ne pas utiliser de tableaux pour créer toute la page, comme je le faisais à l'époque ou j'ai appris le html (sans css). Pour moi un avantage de xhtml-css est, outre la séparation du contenu et de la structure, le fait qu'on ne s'embrouille plus dans des pages construites en tableaux alambiqués, avec des cellules dans des cellules dans des cellules...

Mais des tableaux pour faire des .... tableaux, oui

Ernie a écrit :
Mais des tableaux pour faire des .... tableaux, oui

Oui, mais tu peux aussi utiliser ponctuellement un tableau de mise en page sans renoncer aux avantages globaux d'une mise en page avec les CSS. Il s'agit juste de les utiliser très ponctuellement, sur des cas particuliers, lorsqu'ils sont vraiment utiles.

Par exemple:

1. Je galère avec l'apprentissage du positionnement CSS, la gestion des flottants, les bugs avec les flottants dans Internet Explorer 6, etc. Moi, j'ai juste besoin de faire une mise en page simple avec deux colonnes, sans que ça n'explose (deuxième colonne qui passe à la ligne!) avec tel ou tel navigateur. En attendant de mieux maitriser le positionnement CSS, je me contenterai d'un tableau de mise en page (une ligne, deux cellules).

2. Je maitrise le positionnement CSS, mais je dois faire le menu suivant: horizontal, prenant toute la largeur, avec une bonne répartition de tous les items et des écarts proportionnés. En plus, certains items ont un intitulé sur une ligne, et d'autres un intitulé sur deux lignes de texte... et tout ça doit être centré verticalement. Solution: un tableau de mise en page, avec une ligne et autant de cellules que d'items pour le menu (pas de cellules vides à priori).

Etc.

Salut,

Bon alors ie5.5 date de 1999, et ie6 de 2001; donc franchement considérer ie6 comme une base me semble tout à fait "tolérant", et "responsable" d'autant plus quand on regarde le pourcentage que représente ces navigateurs.
D'autre part, même dans les administrations où ils ne sont pas toujours "à la pointe", ils avancent quand même : j'ai personnellement provoqué le basculement d'un certain nombre de postes d'une grosse administration sous ie6 de façon prématurée (car c'était prévu), en expliquant simplement que SI je devais prendre deux fois plus de temps pour développer leur appli pour qu'elle marche aussi sous un navigateur qui avait 7 ans, ça leut coûterait AUSSI 2 fois plus cher.
Maintenant, il est tout aussi évident que tu dois t'adapter à ton public cible : si tu as face à toi un parc non négligeable de machines sous ie < 6, et que tu n'y peux rien, ben va falloir faire avec.

ok, merci bien pour vos réponses qui, quoi qu'il en soit par rapport aux versions d'IE auxquelles je serai confrontées, m'ont déja bien été utiles

Florent V. a écrit :

Oui, mais tu peux aussi utiliser ponctuellement un tableau de mise en page sans renoncer aux avantages globaux d'une mise en page avec les CSS. Il s'agit juste de les utiliser très ponctuellement, sur des cas particuliers, lorsqu'ils sont vraiment utiles.

Par exemple:

1. Je galère avec l'apprentissage du positionnement CSS, la gestion des flottants, les bugs avec les flottants dans Internet Explorer 6, etc. Moi, j'ai juste besoin de faire une mise en page simple avec deux colonnes, sans que ça n'explose (deuxième colonne qui passe à la ligne!) avec tel ou tel navigateur. En attendant de mieux maitriser le positionnement CSS, je me contenterai d'un tableau de mise en page (une ligne, deux cellules).

2. Je maitrise le positionnement CSS, mais je dois faire le menu suivant: horizontal, prenant toute la largeur, avec une bonne répartition de tous les items et des écarts proportionnés. En plus, certains items ont un intitulé sur une ligne, et d'autres un intitulé sur deux lignes de texte... et tout ça doit être centré verticalement. Solution: un tableau de mise en page, avec une ligne et autant de cellules que d'items pour le menu (pas de cellules vides à priori).

Etc.

ok pour le point 1.
Pour le 2, ce style de menu est vraiment si tordu à faire en css?

Ernie a écrit :
Pour le 2, ce style de menu est vraiment si tordu à faire en css?

En voulant obtenir un résultat réellement robuste, et en l'absence de support de display: table-cell par le principal navigateur du marché? Oui.

La solution «HTML sémantique et CSS pur boeuf» serait la suivante:

[b]HTML:[/b]
<ul id="nav">
	<li><a href="...">Lien 1</a></li>
	<li><a href="...">Lien 2</a></li>
	...
	<li><a href="...">Lien N</a></li>
</ul>

[b]CSS:[/b]
ul#nav {
	display: table;
	width: 100%;
}
ul#nav li {
	display: table-cell;
	vertical-align: middle;
	padding: 4px 6px;
}

Mais ça n'est pas compatible IE6 et 7 (ça devrait l'être pour IE8, ce qui sera à vérifier), donc on se rabat sur l'utilisation d'un tableau... qui en l'occurrence ne sera pas du tout problématique. Quant à la «perte» de sémantique, elle ne nous empêchera pas de dormir la nuit.
Modifié par Florent V. (09 Jan 2008 - 22:44)

ok, merci