Pour une page Web essentiellement en HTML, il y a souvent de nombreux éléments qui ne présentent pas d’intêret quand le navigateur est un mobile ou PDA, ou qu’il ne gère pas le Javascript, ou lors de l’impression.
Sur les profils de LiFE-LiNE, les différents composants de l’interface et les contenus sont regroupés dans des blocs DIV à qui sont attribué des noms de classe CSS qui définissent le contexte d’affichage…
Tout d’abord, la page charge 3 feuilles de style dont chacune est dédiée soit à l’écran d’un ordinateur (média « screen »), l’écran d’un mobile ou PDA (média « handheld »), ou pour l’impression (média « print »).
Toutes ces feuilles contiennent les déclarations des classes Screen, HandHeld, Print, et Javascripting qui comportent la propriété « display: none » sauf pour celle propre au média qui aura « display: block ».
Ensuite, dans le code source HTML de la page, il suffit d’appliquer une ou plusieurs de ces classes aux blocs DIV selon le contexte où ils doivent s’afficher.
Exemple: class= »Screen Print » pour un contenu dédié à l’écran d’un PC qui est aussi imprimable.
La classe Javascripting est particulière dans le sens où c’est un script au chargement de la page qui va ré-afficher les blocs cachés. Ce qui est trés facile à faire en utilisant la ressource getElementsByClassName* de Jonathan Snook et Robert Nyman… Ces blocs seront donc visibles seulement si le navigateur gère ET accepte le Javascript.
(*) c’est aussi la pièce – maitresse – de l’interface de navigation de LiFE-LiNE.
Olivier D. ze kat 