« Le langage CSS/Interface HTML » : différence entre les versions

Contenu supprimé Contenu ajouté
→‎Voir aussi : modif lien
LgD (discussion | contributions)
→‎Définir une feuille de style pour différents médias : refonte, corrections diverses, compléments
Ligne 45 :
</p></pre>
 
== Définir une feuille de style pourselon différentsle médiasmédia ==
 
CSS permet de différencier la présentation d'un même document (X)HTML en fonction du média visé, par exemple pour l'adapter:
Pour chaque liaison, il faut préciser le média. Le média est précisé dans l'attribut <code>media</code> de l'élément <code><link></code>. Cet attribut est indispensable.
* à l'écran d'ordinateur de bureau
* à la projection en grand écran
* au rendu sur l'écran réduit d'un mobile ou PDA
* à l'impression papier
* au rendu sonore via une synthèse vocale
 
La plupart des propriétés CSS peuvent s'appliquer à tous les médias. Cependant, il existe également des propriétés spécifiques à un ou à certains médias. Par exemple:
Voici les valeurs que le paramètre <code>media</code> peut prendre : chacun détermine le support sur lequel le document va s'afficher ou s'imprimer. Cette liste donne pour chaque valeur l'ensemble des médias de sortie à laquelle la feuille de style doit s'appliquer :
* <code>display</code> permet d'inclure ou d'exclure du rendu un contenu (X)HTML quel que soit le media (y compris donc une lecture par une synthèse vocale).
* à l'inverse, <code>voice-family</code> permet d'indiquer les familles de voix utilisées par une synthèse vocale lisant le contenu du document, tandis que <code>font-family</code> indique les familles de polices de caractères utilisées pour son affichage à l'écran ou son impression papier.
 
Chaque feuille de style devrait donc se limiter aux seules propriétés et valeurs adaptées à un ou plusieurs médias, et être accompagnée de la mention du ou des types de média visés. Ceci permettra notamment d'éviter le téléchargement de styles inexploitables ou produisant un résultat inapproprié selon le navigateur et le média concerné.
;<code>valeur_de_media</code> : la feuille de style s'applique...
 
Le ou les types de médias visés peuvent être indiqués:
* soit lors de la liaison HTML, grâce à l'attribut <code>media</code> des éléments <code>link</code> et <code>style</code>:
<link rel="stylesheet" href="defautstyles.css" media="screen" />
 
<style type="text/css" media="screen">
;<code>all</code> : ...quelque soit le média de sortie
@import url(styles.css);
;<code>print</code> : ...lors de l'impression
</style>
;<code>aural</code> : ...pour les logiciels ou matériels de restitution vocale
;<code>handheld</code> : ...pour l'affichage sur des ordinateurs très petits (de type PDA)
;<code>projection</code> : ...quand le document est projeté
;<code>screen</code> : ...quand le document s'affiche sur un écran
;<code>tty</code> : ...si le document est consulté par une application en mode texte (utile pour consulter les documentations lors de l'administration d'un serveur)
;<code>tv</code> : ...quand le document est affiché sur un appareil de type télévision, caractérisé par se faible résolution et par la présence d'équipement sonore et vidéo
;<code>braille</code> : ...lorsque le document sera rendu sur une tablette braille
;<code>embossed</code> : ...pour l'impression braille.
Ces deux derniers sont notamment exploités pour faciliter l'accessibilité des sites aux aveugles.
 
* soit dans la feuille de style elle même en précisant le type de média visé par une règle <code>@import</code>, ou en regroupant plusieurs styles dans une règle <code>@media</code>:
Par exemple :
@import url(styles.css) screen;
@media screen {
body {...}
p {...}
}
 
Lorsqu'une feuille de style s'applique à une sélection de plusieurs médias, ceux-ci sont alors séparés par une virgule:
<link rel="stylesheet" href="defaut.css" media="screen" />
<link rel="stylesheet" href="texte_simplestyles.css" media="auralscreen, projection, handheld" />
 
<link rel="stylesheet" href="impression.css" media="print" />
En l'absence de mention du média, une feuille de style s'applique par défaut à tous les médias. La mention du type de média <code>all</code> a le même effet:
<link rel="stylesheet" href="basse_resolution.css" media="handheld, tv, projection, tty" />
<link rel="stylesheet" href="accessibiliteglobal.css" media="braille, embossed" />
<link rel="stylesheet" href="impressionglobal.css" media="printall" />
Les principales valeurs de type de média sont, pour celles qui sont actuellement implémentées par les navigateurs:
;*<code>all</code> : ...quelque soit le média de sortie (reconnu par tous les navigateurs Web traditionnels)
*<code>screen</code> : écrans d'ordinateur de bureau (reconnu par tous les navigateurs Web traditionnels)
*<code>print</code> : pour l'impression papier (reconnu par tous les navigateurs Web traditionnels)
*<code>handheld</code> : écrans de très petite taille (mobiles, PDA. Cependant, de nombreux navigateurs pour mobiles reconnaissent également le type de média <code>screen</code>)
;*<code>projection</code> : ...quand le document est projeté (Opera en mode plein écran)
 
Deux autres types de médias sont plus rarement reconnus par les logiciels de rendu, et sont encore peu exploités actuellement:
;*<code>tv</code> : ...quand le document est affiché sur un appareil de type télévision, caractérisé par se faibleune résolution et par la présence d'équipement sonore et vidéomoyenne
*<code>speech</code> : pour le rendu via une synthèse vocale (actuellement implémentée par Opera. Ce type de média n'est en revanche pas implémenté par les logiciels de lecture d'écran actuels utilisés en particulier par les personnes handicapées visuelles)
 
Certains type de média restent théoriques, fautes d'implémentations:
;*<code>tty</code> : ...si le document est consulté par une application en mode texte (utile pour consulter les documentations lors de l'administration d'un serveur)
;*<code>screenbraille</code> : ...quandlorsque le document s'affichesera rendu sur unune tablette écranbraille
;*<code>printembossed</code> : ...lors depour l'impression braille.
 
Enfin, l'ancien type de media <code>aural</code>, destiné aux synthèses vocales, a été déprécié et remplacé depuis CSS2.1 par <code>speech</code>.
 
== Les feuilles de styles alternatives ==