Médias

 

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

Cette page revient sur le but et la structure des feuilles de style CSS.

Information : les médias

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site.

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

@media print {
  #nav-area {display: none;}
  }

Voici certains des types de média courants :

screen Écran d'ordinateur en couleurs
print Média paginé
projection Projection sur un écran
all Tous les médias (la valeur par défaut)

 

Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles.

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

 

Impression

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté :
@page {margin: 2cm;}

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

h1 {page-break-before: always;}

 

Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS.

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

 

Interfaces utilisateur

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

Il n'y a pas de type de média spécial pour ce type de périphériques.

Voici les cinq sélecteurs spéciaux :

Selecteur Sélectionne
E:hover Tout élément E survolé par le pointeur
E:focus Tout élément E ayant le focus du clavier
E:active Tout élément E impliqué dans l'action courante de l'utilisateur
E:link Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visited Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

Valeur Indique
pointer Indique un lien
wait Indique que le programme n'accepte aucune interaction pour le moment
progress Indique que le programme fonctionne, mais peut toujours accepter une autre commande
default Le curseur par défaut (habituellement une flèche)


Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : [disabled] ou [readonly].

 

Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui :
.bouton-vert {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.bouton-vert[disabled] {
  background-color:#cdc;
  color:#777;
  }

.bouton-vert:active {
  border-style: inset;
  }

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

Cliquez ici Cliquez ici Cliquez ici
 
disabled normal active

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS.

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

Action : impression d'un document

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Exemple à imprimer</TITLE>
<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
</HEAD>

<BODY>
<H1>Section A</H1>
<P>Ceci est la première section...</P>

<H1>Section B</H1>
<P>Ceci est la seconde section...</P>

<DIV id="en-tete-impression">
Titre pour les médias paginés
</DIV>

<DIV id="pied-de-page-impression">
Page : 
</DIV>

</BODY>
</HTML>

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

/*** Exemple d'impression ***/

/* Réglages par défaut pour l'écran */
#en-tete-impression,
#pied-de-page-impression {
  display: none;
  }

/* Uniquement pour l'impression */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#en-tete-impression {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#pied-de-page-impression {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#pied-de-page-impression:after {
  content: counter(page);
  counter-increment: page;
  }

} /* fin des paramètres pour l'impression */

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

Titre
Section A
Ceci est la première section...
Page : 1
Titre
Section B
Ceci est la seconde section...
Page : 2

 

Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé.

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

 

Pour continuer

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : teoli, grandoc, Verruckt, BenoitL
 Dernière mise à jour par : teoli,