Ces paragraphes devraient avoir un arrière plan aquamarine et une bordure de 3 pixels de couleur mediumslateblue lors de l'affichage à l'écran.
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.
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'.
<!
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
-
ex
16
.
css
"
) screen;
@import
url
("
style2
-
ex
16
.
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
>
p {
background-color
:
#
7fffd4
;/*
aquamarine
*/
border
:
3px
dotted
rgb
(123
,
104
,
238
);/*
mediumslateblue
*/
padding
:
8px
;
}
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.