« Le langage CSS/Interface HTML » : différence entre les versions
Contenu supprimé Contenu ajouté
→Voir aussi : modif lien |
→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
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:
* à 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:
* <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é.
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>:
<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>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▼
* 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>:
@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="
<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="
Les principales valeurs de type de média sont, pour celles qui sont actuellement implémentées par les navigateurs:
▲
*<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>)
Deux autres types de médias sont plus rarement reconnus par les logiciels de rendu, et sont encore peu exploités actuellement:
▲
*<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:
▲
▲
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 ==
|