Utilisation de feuilles de style

Comme chacun sait, tous les navigateurs interprètent HTML, javascript et CSS de la même façon. Mais pas toujours...
Pour CSS, il existe au moins une page de tests Compatibility, Quirks/Strict Mode, CSS hacks, Conditional comments... utilisant une feuille de style qui règle la majorité des problèmes connus (IE, NN, Opera...), une page avec des tests CSS avec des solutions CSS hacks, floats, popups, containers, margins, centering, layouts..., un tableau CSS1, CSS2 et CSS d'Internet Explorer avec le niveau de respect des règles affichant le niveau de compatibilité des instructions CSS et des pages de bugs.

Cette page utilise des feuilles de style en cascade.
Elle n'utilise pas la balise <table>.

Son menu dans la colonne de gauche n'utilise que CSS et dépend du navigateur identifié et des préférences de l'utilisateur.

Tout navigateur récent doit pouvoir la lire.
Elle est beaucoup plus facile à lire par les navigateurs brailles ou vocaux.
Elle doit s'adapter aux caractéristiques de l'écran bien que l'utilisation de polices proportionnelles génère souvent des problèmes d'alignements.

En fait, elle a été modifiée depuis que j'ai installé les dernières versions d'Internet Explorer (6 SP1 - en 2002) et Netscape 7.0 car MSIE 6 effectue des calculs différents quand le texte est justifié et parce que plusieurs règles n'acceptent plus les mêmes déclarations (p:first-letter par exemple) et comme Netscape n'accepte pas certaines règles de multi-colonage, une partie du site s'est retrouvée avec des tableaux.
Pour un aperçu des problèmes de calcul d'un navigateur, modifiez la taille du texte (Affichage / Taille du texte, Afficher / Zoom texte, View /Zoom, Ctrl +, ...).
Quelques problèmes de compatibilité sont détaillés dans la page sur les navigateurs.
Si cela vous intéresse, vous avez ici une procédure pour construire une feuille de style sans tableaux et sans javascript.
La réalisation de pages compatibles avec les navigateurs récents ainsi que les solutions récentes sont détaillées sur un site consacré à CSS.

L'autre version du site a une feuille de style plus ancienne et normalement sans gros problème (une feuille remplaçant les tailles en pourcentage de cellules de tableaux par des tailles fixes aurait été souhaitable).


Cette page utilise deux feuilles de style avec quelques "hacks" afin d'assurer un affichage à peu près identique avec les navigateurs qui interpètent CSS :
pagecssbnn4.css pour une éventuelle compatibilité avec Netscape 4.
pagecssb.css pour les dernières versions des navigateurs.
L'autre version de cette page utilise deux à quatre feuilles de style après détection du navigateur  (cette méthode est à déconseiller car une seule feuille peut suffire).
Pour le style par défaut :
style_old_nn4.css pour une éventuelle compatibilité avec Netscape 4 et les pages du site partiellement converties.
style2.css pour les dernières versions des navigateurs - les instructions placées ici bloquent ou plantent les anciens navigateurs. Depuis que les balises optionnelles (balises de fermeture, balises XHTML) ont été ajoutées (en 2002), NN4 ne plante plus et il ne reste que peu d'instructions qui ne concernent que l'affichage.
style2ie.css si vous utilisez MSIE 5, 5.5 ou 6.
style2ie5.5.css si vous utilisez MSIE 5 ou 5.5 afin de régler les problèmes avec la balise <p> et les boîtes.
not_msie.css si vous utilisez un navigateur récent autre que MSIE.
Un style pour les problèmes ou avantages spécifiques à une version de navigateur est ensuite ajouté.
Une autre feuille de style aurait été nécessaire avec Opera 5 pour éviter les problèmes déja cités et pour l'alignement du menu de gauche.
Cette accumulation de feuilles de styles - à éviter - éloigne beaucoup de l'objectif de CSS : simplifier la conception d'un site.
Quelques "hacks", filtres ou techniques ont réduit cette liste à deux feuilles.
L'utilisation de CSS dynamique - autre méthode à déconseiller - peut en faire au moins autant.
Cette page existe aussi avec une seule feuille, mais Netscape 4 ne sera pas en mesure de l'afficher.

Si vous utilisez Mozilla ou Firefox, vous pouvez changer la feuille de style de cette page.
Si votre navigateur ne bloque pas le "referrer" ("HTTP_REFERER") et s'il accepte les cookies, deux autres feuilles de styles (et un popup en CSS) sont disponibles sous le menu de gauche.

Le choix de l'identificateur aura donc des conséquences sur une capture de site.

Voici les éléments de style les plus utiles avec quelques commentaires :

Voici le squelette de la page html avant que les menus soient inclus dans un fichier javascript pour les navigateurs récents :

Comme les feuilles de style (style_old_nn4.css, style2.css) ont beaucoup évolué, vous pouvez les trouver ainsi que le javascript dans le cache d'Internet Explorer ou en capturant ces fichiers dans le site.
Si cela vous intéresse, j'ai mis en ligne une procédure pour construire une feuille de style sans tableaux et sans javascript avec la majorité des navigateurs ou les navigateurs récents.
Pour plus d'explications, vous pouvez aussi consulter The CSS Know-How Site, tutorial - look ma! no tables, CSS Creator, css /edge ou A list apart en anglais.
Egalement en anglais, plusieurs sites proposent des feuilles de style compatibles avec NN4 :

Dans sa version actuelle en PHP (à peu près déboguée), le site utilise toujours les mêmes feuilles de style et beaucoup moins de javascript.

Et si vous souhaitez un logiciel pour créer et tester des feuilles de style, essayez TopStyle Lite pour Windows ou cssed pour Linux.
Afin de trouver les erreurs de syntaxe dans vos feuilles de style, vous pouvez utiliser le service de validation du W3C.
Pour déboguer ces feuilles, le plus pratique avec Firefox ou Mozilla, ce sont les extensions "Web Developer" et Firebug.

Il est possible de tester localement des feuilles de style avec Internet Explorer 5.01, 5.5 et 6 à l'aide des versions disponibles sur le site tredosoft malgré quelques restrictions détaillées sur le site ou à l'aide de Internet Explorer Collection (Internet Explorer 5.01, 5.5, 7 and 8).

Avec javascript

W3C XHTML 1.0
W3C CSS
création de pages sans tableaux