Exemple 13 : Quels sont les types de médias reconnus par les navigateurs communs

Explications :

Le langage CSS permet de spécifier un ou plusieurs types de médias auquel une feuille de style s'appliquera. Par média on entend le type d'agent utilisateur qui va accéder à la page web, et qui entre autre, va l'afficher, mais pas seulement (synthétiseur de parole par exemple).

Les navigateurs PC et MAC ne reconnaissent logiquement que les valeurs 'screen', 'print' et 'all'. Seul Opera reconnaît également les médias 'handheld' avec son mode "Petit écran" et 'speech' avec son mode "Voix".

Si votre navigateur reconnait le média spécifié pour chaque ligne ci-dessus, le texte sera en gras et de couleur rouge.

Pour permettre l'application du média 'print', il vous faut le tester en mode 'Aperçu avant impression'. Pour ce faire allez dans le menu Fichier, puis sélectionnez "Aperçu avant impression".

Vous constaterez aussi que Opera gère en plus les médias 'handheld' et 'speech'. Pour le premier sélectionnez le menu 'Afficher' puis 'Petit écran'. Et pour le second il faut que le navigateur soit adapté, c'est-à-dire que vous aillez téléchargé le plugin nécessaire au programme.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

<!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 13 : Quels sont les types de médias reconnus par les navigateurs communs</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 all {
        p#media-all {
                font-weight :      bold;
                color :            red;
        }
}
@media braille {
        p#braille {
                font-weight :      bold;
                color :            red;
        }
}
@media embossed {
        p#embossed {
                font-weight :      bold;
                color :            red;
        }
}
@media handheld {
        p#handheld {
                font-weight :      bold;
                color :            red;
        }
}
@media print {
        p#print {
                font-weight :      bold;
                color :            red;
        }
}
@media projection {
        p#projection {
                font-weight :      bold;
                color :            red;
        }
}
@media screen {
        p#screen {
                font-weight :      bold;
                color :            red;
        }
}
@media speech {
        p#speech {
                font-weight :      bold;
                color :            red;
        }
}
@media tty {
        p#tty {
                font-weight :      bold;
                color :            red;
        }
}
@media tv {
        p#tv {
                font-weight :      bold;
                color :            red;
        }
}
</style>
</head>

<body>

<h1>
Exemple 13 : Quels sont les types de médias reconnus par les navigateurs communs
</h1>

  <p id="media-all">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media all.
  </p>

  <p id="braille">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media braille.
  </p>

  <p id="embossed">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media embossed.
  </p>

  <p id="handheld">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media handheld.
  </p>

  <p id="print">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media print.
  </p>

  <p id="projection">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media projection.
  </p>

  <p id="screen">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media screen.
  </p>

  <p id="speech">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media speech.
  </p>

  <p id="tty">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media tty.
  </p>

  <p id="tv">
Ce texte sera en gras et en rouge si le navigateur réponds positivement au media tv.
  </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.