Types de supports de CSS

Le type de dispositif montrait une page Web telle qu'un �cran d'ordinateur s'appelle Media. Comme concevoir votre site Web devient plus que juste un jeu de navigateur, mais avec de plus en plus les dispositifs non traditionnels tels qu'un tenu dans la main, un t�l�phone portable ou m�me votre montre voulant acc�der au Web.

Vous voulez que votre page Web regarde � travers les dispositifs multiples. Le processus est aucun o� aussi intimidant qu'il apparaissent, avec le soutien du niveau 2 de CSS des types de supports �tre parmi les outils simples toi peut employer pour aider � rendre votre emplacement vue-amical � travers des m�dias

3 mani�res d'indiquer des types de supports de CSS

Il y a trois mani�res d'attacher un type de supports � la feuille de mod�le, ainsi notre CSS est appliqu� seulement quand les m�dias d'un d�tail (IE : tenu dans la main) est employ� pour regarder la page :

1) Feuilles li�es de mod�le :

Code de CSS

Avec la d�claration ci-dessus, � print.css � sera seulement appliqu� � la page comme il a imprim� (ou vu en mode de pr�vision d'impression dans votre navigateur). Vous pouvez ajouter les feuilles li�es additionnelles de mod�le visant d'autres types de supports �galement. Comme note lat�rale, pour des documents de XML, l'�quivalent de ce qui pr�c�de sera :

Le nom de l'�tat est la � pseudo classe � qui d�finit comment les �l�ments de HTML devraient appara�tre, selon lesquels l'�tat il est po. Au-dessous de est un exemple de changer � lien �, � visit� �tat �, et le de � vol plan� �. Noter l'ordre qui sont d�finis, car il est la commande appropri�e pour faire un lien de fonctionnement de CSS.

Code d'�quivalent de XML

<?xml-stylesheet type="text/css" media="print" href="print.css" ?>

2) Feuilles import�es de mod�le :

Code de CSS

Les feuilles import�es de mod�le utilis�es ici a l'avantage car il �tant conditionnellement t�l�charg�, signifiant la feuille de mod�le sera seulement t�l�charg� si les matchs de legs qui ont indiqu� dans l'attribut de m�dias. Dans de bas dispositifs de largeur de bande tels que tenu dans la main, n'importe quelle �pargne dans la largeur de bande inutile pourrait significatif. L'inconv�nient de cette technique est actuellement le manque de � technique relative 1 de soutien de navigateur/dispositif) en haut.

3) Feuilles int�gr�es de mod�le, par la r�gle de @media :

Code de CSS

Vous pouvez voir, quelque d�clarations de CSS que vous souhaitez �tre appliqu� en cas de � projection � devrait �tre envelopp� autour dans le bloc de @media.

La r�gle de @media

Au-dessous de l'exemple d'�chantillon de la r�gle de @media

Code de CSS

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html>

Les 10 types de supports suivants sont soutenus :

Pseudo-class	Purpose
all	Suitable/intended for all devises (default).
aural	Intended for speech synthesizers.
braille	Intended for braille tactile feedback devices.
embossed	Intended for paged braille printers.
handheld	Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print	Intended for printed documents (applies to docs viewed in print preview mode too).
projection	Intended for projected presentations (ie: projectors or print to transparencies).
screen	Intended for computer screens.
tty	Intended for media using a fixed-pitch character grid (ie: teletypes or terminals).
tv	Intended for television-type devices.