Maîtriser les formats d'affichage selon les types de terminaux
Les feuilles de style CSS permettent d'adapter la présentation des contenus à plusieurs types de terminaux. Des modes de publication qui sont regroupés selon différentes catégories définies par le W3C.
Les applications Web sont aujourd'hui utilisées sur différents supports (ordinateur, téléphone mobile, notebook...) qui ont chacun des contraintes d'affichage. Les CSS (2.1) permettent de gérer la présentation du contenu en fonction des caractéristiques de ces écrans. L'accessibilité Web introduit aussi d'autres formats d'affichage à prendre en compte (dispositifs braille, outils de synthèse vocale...).
Le W3C a regroupé les formats couverts par les CSS en différentes catégories. Certains appartiennent à plusieurs groupes, car ils gèrent à la fois du son, de l'image, du texte... Le type de format aural, à destination des appareils à synthèse vocale n'appartient à aucun groupe.
Le type braille est utilisé pour les appareils reconnaissant et interprétant le braille. Une plage braille est un dispositif que l'on connecte sous le clavier et qui restitue ce qui est affiché dans ce format. Il appartient aux groupes continus, tactiles, en grille, interactifs et statiques. Embossed concerne les matériels permettant d'imprimer en braille. Ce format se retrouve parmi les groupes paginés, tactiles, en grille et statiques.
Le type handheld est un format pour les appareils portatifs à petit écran. Il fait partie des groupes paginés, continus, audio, en grille, interactifs et statiques. Print est le format dédié à l'impression et appartient aux groupes paginés, visuels, bitmap et statiques.
Projection concerne tout le matériel de projection (rétroprojecteurs...). Il se retrouve dans les groupes paginés, visuels, bitmap et interactifs. Le type screen est le format classique, pour une utilisation à l'écran (ordinateur). Il fait partie des groupes continus, audio, speech, bitmap, interactifs et statiques.
Le type tty s'adresse aux appareils avec une taille d'affichage des caractères fixe (terminaux). Il appartient aux groupes visuels, en grille et statiques. Tv prend en charge l'affichage sur une télévision. Il se retrouve dans les groupes paginés, continus, audio, bitmap et statiques. Le type all convient pour tous les types de médias.
Le type de média utilisé est à spécifier dans les règles de style des CSS. Il se précise dans l'élément <link> de la page HTML. Il est possible d'indiquer plusieurs médias.
<link rek= "stylesheet" type="text/css" media="screen, print, aural" href="styles.css">
La règle @import est un autre moyen d'indiquer le média visé.
@import url('styles.css') screen;
Une troisième méthode est de mettre en place une règle @media.
@media screen {
body{
background-color: #FFFFFF;
font-size: 12 pt;
}
}
@media print {
body{
background-color: #FF00FF;
font-size: 10 pt;
}
}
Gérer les formats facilite la lecture de l'utilisateur en fonction de son support. Les types de média intègrent la notion d'accessibilité Web, aujourd'hui un enjeu majeur pour assurer un accès équitable à l'information, quel que soit son âge ou son handicap.