« Le langage CSS/Structure et syntaxe » : différence entre les versions

→‎Adapter les styles au périphérique de sortie : -allusion aux lecteurs d''écran (?), hors sujet et + exemple plus pertinent des mobiles. Correction exemple pour différencierscreen et print.
(→‎Déclaration de styles : + précision sur filtrage via @import (à illustrer))
(→‎Adapter les styles au périphérique de sortie : -allusion aux lecteurs d''écran (?), hors sujet et + exemple plus pertinent des mobiles. Correction exemple pour différencierscreen et print.)
==== Adapter les styles au périphérique de sortie ====
 
Le périphérique de sortie de la page web n'est pas forcément l'écran de l'ordinateur. Il peut être simplementégalement l'imprimante pour faire un tirage papier, maisn aussiprojecteur unpour équipementune mobileprésentation ougrand adaptéformat, àou desun personnesnavigateur présentant certains handicaps (de vue notamment !)mobile. Les styles définis pour l'écran peuventne doncconviennent negénéralement pas convenir pour d'autres périphériquesmédias. L'exemplePour classiqueprendre estdeux le menu latéral de gaucheexemples fréquents: est-il vraiment utile à l'impression ? Généralement non, il faudrait donc le faire disparaître dans ce cas.
* le menu latéral de gauche : est-il vraiment utile à l'impression ? Généralement non, il faudrait donc le faire disparaître dans ce cas.
* la disposition en colonne: est-elle appropriée à un écran réduit tel que celui d'un mobile ? Dans ce cas, il convient d'opter pour une présentation linéaire.
 
Ceci est possible dans les feuilles de styles grâce à la mention du ''media'' de sortie. On trouvera la liste des média possibles à la page [[Programmation CSS/Interface HTML#D.C3.A9finir une feuille de style pour diff.C3.A9rents m.C3.A9dias|Interface Html]]. Il existe à nouveau deux techniques : la mention directement dans la feuille ou la mention à l'importation d'une feuille externe. Dans le premier cas, les styles CSS contiennent un passage de ce type :
<nowiki><html>
<head>
</nowiki>'''<link rel="stylesheet" type="text/css" href="styles.css" media="allscreen" />'''
'''<link rel="stylesheet" type="text/css" href="print.css" media="print" />'''<nowiki>
</head>
</html></nowiki>
 
Dans cet exemple, la feuille ''styles.css'' contient le style dedestiné baseà du site, celui qui est affichél'affichage à l'écran dans un navigateur courant, et laune seconde feuille ''print.css'' modifiespécifique ce style pourà l'impression.
 
=== Dans un document Xml ===
147

modifications