Exemple 17 : Exemple d'utilisation de la règle at-rule @media pour insérer un style en fonction du type de média

Explications :

Il vous est aussi possible, à l'intérieur d'une feuille de style, de faire des distinctions fondées sur le média. La règle at-rule @media permet de préciser à sa suite un type de média qui aura pour effet que l'ensemble du code à l'intérieur des accolades ne s'appliquera qu'au média précisé.

Dans cet exemple la première règle @media ne s'appliquera que si vous imprimez le document web auquel est lié cette feuille de style (média 'print'). La seconde règle @media vous montre aussi qu'il est possible de déclarer plusieurs types de média pour une règle @media : en effet elle s'applique lors d'un affichage à l'écran et sur un appareil portatif (médias 'screen' et 'handheld').

Pour activer le média 'print' accédez au mode "Aperçu avant impression" que vous trouverez dans le menu "Fichier", puis sélectionnez "Aperçu avant impression". Pour voir les effets du média 'handheld' il vous faudra tester avec Opera en sélectionnant le menu 'Afficher' puis 'Petit écran'.

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 17 : Exemple d'utilisation de la règle at-rule @media pour insérer un style en fonction du 
type de média</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
@media print {

        #exempl #menu {
                display :      none;
                border :       0 none;

        }
        #exempl p {
                color :        red;
        }
}

@media screen, handheld {

        #exempl #menu {
                border :       1px solid #ff4500;/* orangered */
                padding :      10px;
                font :         bold 1.2em "Times New Roman", serif;
        }

        #exempl p {
                padding :      10px;
                color :        blue;
        }
}
</style>
</head>

<body>
<h1>
Exemple 17 : Exemple d'utilisation de la règle at-rule @media pour insérer un style en fonction du type 
de média
</h1>
  <div id="menu">
Cet élément est affiché en mode screen et handheld avec une bordure, des marges internes et un style de 
police. Mais il est caché en mode impression.
  </div>
  <p>
Cet élément dispose d'une police de couleur rouge en mode impression et bleu lors de l'affichage à l'écran.
  </p>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.