HTML et CSS, 2 langages pour une page Web

 

Pourquoi faut-il deux langages (HTML et CSS) pour encoder une page Web ? C'est un difficile problème à saisir pour les non-professionnels du Web.

Les raisons sont multiples et convergentes :

  1. L'interopérabilité du Web
  2. Le Web comme base de données documentaires
  3. L'accessibilité du Web
  4. L'allègement du code et maintenance du code

Parce que depuis quelques années le consortium W3C impose l'interopérabilité : une même page de code HTML doit pouvoir être lu par

  1. un navigateur,
  2. un téléphone,
  3. une synthèse vocale,
  4. un clavier Braille.

Cette interopérabilité a conduit à séparer le HTML du CSS

 

Entrons dans le vif du Sujet

I L'interopérabilité

Définition
Interopérabilité :

Capacité que possède un produit ou un système, à fonctionner avec d'autres produits ou systèmes existants ou futurs et ce sans restriction d'accès ou de mise en œuvre (définition du groupe de travail Interop de l'AFUL)

Depuis plusieurs années le consortium W3C impose l'interopérabilité : une même page de code HTML doit pouvoir être lu par différents outils de consultation.

  1. un navigateur,
  2. un téléphone,
  3. une synthèse vocale,
  4. un clavier Braille.
Référence CSS

Ces outils sont déclinés en CSS2.1, un style différent pour chaque outil peut être prévu par le mot clé @media

all
tous supports
braille
plage braille
handheld
appareils portables
print
imprimante
projection
projecteur video
screen
écran d'ordianteur
speech
synthèse vocale
tty
périphériques dont les caractères sont de taille fixe (terminaux informatiques)
tv
televiseur

II Le web, base documentaire

Un document web est avant tout une source d'informations et pratiquement un élément d'une base de données. Il est donc nécessaire qu'une page Web soit structurée par un balisage porteur de sens (à l'image du SGML, ancêtre du HTML).

III Comment rendre interopérable : en séparant fond et forme

Voici la conduite à tenir selon le fondateur du Web, Tim Berners-lee :

Le fond sera commun à tous, la forme s'adaptera à l'outil de consultation.
Le fond sera structuré en HTML, la forme sera défini par le CSS.

Le contenu informatif de la page (le fond) bien structuré, doit être séparé de la mise en forme qui prendra, elle , en charge l'outil de consultation.

Il faut abandonner de toute balise de mise en forme au profit des seules balises porteuses de sens (en gardant les conteneurs génériques <span> et <div>). Il faut renonce aux <font>, <center> et autres balises de mise en page.

La mise en forme des documents se fera dans un second temps à l'aide du CSS et des feuilles de styles qui viendront habiller les pages Web.

IV Première conséquence de l'interopérabilité : l'accessibilité

Les personnes handicapées doivent pouvoir comprendre, naviguer, interagir avec le web, et y contribuer.

Séparer l'information de sa présentation permet d'adapter le même contenu aux différents contexte lié au handicap et à la variété des périphériques d'entrée et de sortie (aides techniques, claviers alternatifs et commutateurs, systèmes braille, synthèse vocale)

V Autres conséquences de la séparation du contenu structuré et de sa mise en forme

1) Un code allégé

En utilisant le CSS au lieu de formater la page à l'aide de tableaux, il est possible de diminuer la taille des documents HTML de moitié.

2) Un code maintenable

Comme le contenu n'est plus encombré par la présentation, il est facile de repèrer les éléments à mettre à jour

3) Notion de feuille de style : partager le même style pour l'ensemble d'un site.

La charte graphique sera décrite par des feuilles de style CSS communes aux pages Web. Par cette séparation, le style pourra évoluer facilement.

VI Historique, CSS en quelques dates et quelques errements

Décembre 1996 :
Les spécifications des feuilles de style deviennent une recommandation du consortium W3C sous l'appellation CSS1 pour Cascading Style Sheets, level 1.
1998 :
Conjointement élargissent des spécifications sous la forme CCS2, nouvelles précisions. Des styles différents pour les médias différents (écran, impression, synthétiseur de parole, braille...) ; les polices de caractères téléchargeables ;
le positionnement des éléments HTML (appelé par ailleurs CSS-P).
Janvier 1999 :
Nouvelles recommandations sur CSS1
2001 :
Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à partir de 2001 une version révisée CSS 2.1 (« CSS Level 2, Revision 1 »), sur la base de ce qui était effectivement adopté par les différents navigateurs :
  • de maintenir la compatibilité avec les parties de CSS2 qui sont largement acceptées et mises en application.
  • d'incorporer dans la norme tous les errata CSS2 déjà publiés.
  • Lorsque les implémentations diffèrent profondément de la spécification CSS2, de modifier la spécification pour qu'elle soit en accord avec les pratiques généralement admises.
  • de supprimer les dispositifs CSS2 qui ont été refusés par la communauté CSS, vu leur manque d'implémentation. CSS 2.1 vise à refléter les mécanismes CSS qui ont été raisonnablement et largement implémentés pour les langages HTML et XML en général (plutôt que pour un langage XML en particulier, ou pour HTML seul).
  • de supprimer les mécanismes CSS2 qui seront rendus obsolètes par CSS3, et encourager ainsi l'adoption de mécanismes CSS3 à leur place.
  • d'ajouter un (très) petit nombre de nouvelles valeurs de propriétés, lorsque l'expérience d'implémentation a montré qu'elles répondaient à un besoin pour la mise en application de CSS2.
juillet 2007 :
Après avoir connu 8 versions successives, CSS 2.1 est en une recommandation candidate, c'est-à-dire le standard que doivent suivre les implémentations.
dès 1999,
Le développement du troisième niveau des feuilles de styles en cascade en parallèlement à celui de CSS 2.1.
2007
Certains des modules CSS3 atteignent le stade de "recommandation candidate", mais, hélas, suite à des difficultés mises à jour lors de l'appel à implémentation, ils sont ramenés au stade de document de travail . C'est par exemple le cas du module de typographie « CSS Text ».
En 2008,
aucun module n'est considéré comme terminé par le W3C, et l'implémentation dans les navigateurs est donc marginale, souvent à titre de test, comme les fonctions -moz-xxx du moteur Gecko, dont le préfixe limite l'utilisation aux seuls navigateurs basés sur Gecko.
Dès 2010,
Débute l'écriturede CSS4, parallèlement aux modules CSS3.

Références

Les recommandations sont consultables sur le site du W3C aux adresses suivantes :

Cascading Style Sheets, level 1,
Recommandation du W3C, 17 décembre 1996, revu le 11 janvier 1999
traduction non officielle : Les feuilles de style en cascade, niveau 1,
Cascading Style Sheets, level 2, CSS2 Specification
Recommandation du W3C, 12 mai 1998
traduction non officielle : Les feuilles de style en cascade, niveau 2, Spécification CSS2
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Recommandation candidate du W3C, 19 juillet 2007
Cascading Style Sheets Current Work,
état d'avancement des travaux du Cascading Style Sheets Working Group, dont le développement de CSS3

De même qu'il existe un validateur HTML sur le site du W3C, il y est également possible de valider une feuille de style.

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Pourquoi la balise <center> a (presque) disparu des pages html ?