Exemple 16 : Préciser le type de média lors d'insertion de style par la règle @import et incompatibilité de cette méthode avec Internet Explorer

Explications :

Vous pouvez indiquer un type de média si vous utilisez la règle @import, il vous suffit alors de préciser le type de média après l'appel au fichier CSS. Vous pouvez aussi en déclarer plusieurs en séparant les différents types de média par une virgule.

Ainsi, dans cet exemple, le premier fichier CSS sera pris en compte pour l'affichage à l'écran (media 'screen'). Tandis que le second sera pris en compte lors de l'impression du document (media 'print') et lors de son affichage sur un appareil portatif (media 'handheld').

Ces exemples ne fonctionneront cependant pas avec Internet Explorer (versions 6 et 7) qui ne reconnait pas la règle @import lorsqu'on lui adjoint un type de média. Internet Explorer 8 a réglé ce problème.

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

<!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 16 : Préciser le type de média lors d'insertion de style par la règle @import et 
incompatibilité de cette méthode avec Internet Explorer</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">
@import url("style1-ex16.css") screen;
@import url("style2-ex16.css") print, handheld;
</style>
</head>

<body>

<h1>
Exemple 16 : Préciser le type de média lors d'insertion de style par la règle @import et 
incompatibilité de cette méthode avec Internet Explorer
</h1>

  <p>
Ces paragraphes devraient avoir un arrière plan aquamarine et une bordure de 3 pixels de couleur 
mediumslateblue lors de l'affichage à l'écran.
  </p>
  <p>
Ces couleurs disparaissent cependant lors de l'affichage pour l'impression et pour les appareils 
portatifs (handheld). Dans ce cas le texte sera de couleur rouge et en gras.
  </p>

</body>
</html>

Code CSS fichier 1 :

1
2
3
4
5

p {
        background-color : #7fffd4;/* aquamarine */
        border :           3px dotted rgb(123,104,238);/* mediumslateblue */
        padding :          8px;
}

Code CSS fichier 2 :

1
2
3
4
5

p {
        font-weight :      bold;
        color :            red;
        border :           1px solid black;
}

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.