« Le langage CSS/Interface HTML » : différence entre les versions
Contenu supprimé Contenu ajouté
typo |
|||
Ligne 49 :
== Définir une feuille de style selon le mé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 :
* à l'écran d'ordinateur de bureau
* à la projection en grand écran
Ligne 56 :
* 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.
Ligne 62 :
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> :
<link rel="stylesheet" href="styles.css" media="screen" />
Ligne 70 :
</style>
* 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;
Ligne 78 :
}
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="styles.css" media="screen, projection, handheld" />
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="global.css" />
<link rel="stylesheet" href="global.css" media="all" />
Les principales valeurs de type de média sont, pour celles qui sont actuellement supportées par les navigateurs :
*<code>all</code> : quel que 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)
Ligne 92 :
*<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 une résolution moyenne
*<code>speech</code> : pour le rendu via une synthèse vocale (actuellement disponible dans Opera. Ce type de média n'est en revanche pas pris en compte 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 de support par les agents utilisateurs :
*<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>braille</code> : lorsque le document sera rendu sur une tablette braille
Ligne 107 :
Les feuilles de styles alternatives permettent de proposer un choix de plusieurs rendus différents pour un même document (X)HTML. Ce choix s'apparente à celui d'un thème graphique.
Un lien vers une feuille de style alternative se définit comme le lien vers la feuille de style par défaut. Cependant :
* l'attribut <code>rel</code> change et devient <code>alternative stylesheet</code>.
* L'attribut <code>title</code> permet de définir et de différencier chaque présentation alternative. En présence de styles alternatifs, une feuille de stylé dénuée d'attribut <code>title</code> devient ''permanente'', et s'applique quelque-soit le style alternatif choisi.
Ligne 113 :
<link rel="alternative stylesheet" href="une_feuille_alternative.css" title="titre" media="screen" />
Un exemple avec trois feuilles alternatives : une simple, par défaut. Une autre, à dominantes noire. Une dernière, à dominantes bleues. Notez également la première feuille de style, permanente, qui s'appliquera
<link rel="stylesheet" href="common.css" />
| |||