Comment insérer des règles CSS dans un document (X)HTML
Date de publication : 29 juin 2011.
Par
Christophe F. (Ma page personnelle)
Ce troisième article de la série sur les feuilles de style en cascade va aborder les différentes méthodes pour lier le
CSS aux documents (X)HTML. Après avoir étudié la syntaxe d'une règle CSS, nous pouvons passer à l'étape suivante : ajouter
des règles CSS à un document (X)HTML.
Les règles CSS peuvent soit être intégrées directement à la page (X)HTML, soit mises dans un fichier CSS externe et liées
à la page (X)HTML via la balise <link> ou via la propriété CSS
@import.
Nous allons étudier ces différentes méthodes et en analyser leurs avantages et inconvénients.
Ces différentes méthodes d'insertion de règles CSS permettent également de spécifier un ou plusieurs types de médias auxquels
s'appliqueront les styles. Vous pouvez ainsi spécifier une feuille de style pour les écrans d'ordinateurs, une pour le mode
impression, une pour les écrans de petite taille, etc.
Cet article est le troisième d'une série consacrée à CSS, retrouvez les autres articles de cette série dans
le sommaire ou dans l'encadré bleu
en bas de page.
Tous mes remerciements vont à ....
Comment insérer des règles CSS dans un document (X)HTML
A. Application directe de déclarations CSS dans les balises (X)HTML via l'attribut style
B. Insérer des règles CSS directement dans l'en-tête du document via la balise style
C. Insérer des feuilles de style externes via la balise link ou la règle @import
1. Insérer une feuille de style externe grâce à la balise link
2. Insérer une feuille de style externe grâce à la règle @import
3. Laquelle des deux méthodes choisir : avantages et inconvénients de chacune
D. Attribuer un type de média aux feuilles de style
1. Insérer un type de média avec les balises style et link
2. Insérer un type de média avec la règle @import
3. Insérer un type de média avec la règle @media
Remerciements
Comment insérer des règles CSS dans un document (X)HTML
Il existe quatre méthodes pour appliquer du CSS à un document (X)HTML. Chacune a ses avantages et ses inconvénients.
De ces quatre méthodes on peut dégager deux manières de procéder :
-
la première consiste à intégrer le code CSS directement dans le document (X)HTML :
- soit directement dans chaque balise, via l'attribut style ;
- soit dans l'en-tête du document via les balises <style></style>.
-
la seconde consiste à créer un document CSS distinct. Les deux méthodes qui en découlent se différencient simplement par
la manière employée pour lier le document (X)HTML et le fichier CSS :
- la première utilisant la balise (X)HTML <link> ;
- la seconde utilisant la propriété CSS @import.
Nous allons étudier ces quatre cas successivement.
Vous verrez enfin qu'il est possible de limiter l'application des règles de style en fonction du média qui affiche la page.
A. Application directe de déclarations CSS dans les balises (X)HTML via l'attribut style
Cette méthode intervient directement dans le document (X)HTML. On insère dans la balise (X)HTML souhaitée, via l'attribut
style, les déclarations que l'on veut voir appliquer à cette balise. Cet attribut
style ne prend donc comme valeur que des déclarations (c'est-à-dire le couple :
propriété: valeur). Voici deux exemples :
| Insérer des déclarations CSS a l'aide de l'attribut style : |
<p style="background-color:#add8e6;border:1px dashed red;padding:2px;">
Du texte...
</p>
<div style="font-size:1.2em;width:70%;letter-spacing:1em;font-style:italic;">
Un autre exemple...
</div>
|
On aborde là des notions (X)HTML, l'attribut style étant une propriété (X)HTML et non
CSS. En particulier, l'attribut style est séparé du contenu de sa valeur par le caractère
égal (=) et non par le caractère deux-points comme en CSS. Par contre la valeur en elle-même de cet attribut, c'est-à-dire
la ou les déclarations, répondent aux règles du vocabulaire CSS.
| Principe de déclaration de l'attribut style dans une balise (X)HTML : |
<balise style="propriété: valeur;propriété: valeur;">
|
Cet attribut peut s'appliquer à la plupart des éléments se trouvant entre les balises <body>
</body>. Mais sera interdit pour la plupart des éléments pouvant être positionnés entre les balises
<head> </head> qui n'ont de toute façon pas vocation à s'afficher. Concrètement
l'attribut style est autorisé pour tous les éléments sauf :
- html
- head
- title
- meta
- base
- script
- param
- style
- basefont
Cette méthode a l'avantage d'être rapide à mettre en œuvre. Il faut cependant limiter son usage à des interventions
ponctuelles, pour effectuer des tests par exemple. Cette méthode ne doit en effet, en aucun cas, être la syntaxe principale,
car elle empêche de tirer avantage de tout le potentiel du CSS :
-
il faut définir le style pour chaque balise, même s'il est identique, il y a donc répétition du code ;
-
il n'y a plus de séparation entre le contenu et la mise en forme ;
-
il est impossible d'attribuer un style identique à plusieurs pages différentes.
B. Insérer des règles CSS directement dans l'en-tête du document via la balise style
Avec cette seconde méthode on intervient également directement dans le document (X)HTML. Il existe une balise (X)HTML (et
non plus un attribut
(1)
comme dans la précédente méthode) qui permet en la plaçant dans l'en-tête du document, c'est-à-dire entre les balises
<head> </head>, d'insérer du code CSS dans le fichier (X)HTML. Ce sont les
balises
<style> </style>.
| Insérer des règles CSS dans l'en-tête du document (X)HTML : |
<head>
...
<style type="text/css">
<!--
p.centre {
text-align : center;
}
-->
</style>
</head>
|
La balise <style> nécessite l'ajout d'un attribut type
ayant comme valeur 'text/css', comme vous pouvez le constater ci-dessus. Cet attribut permet d'indiquer au navigateur
le type de syntaxe inclus entre les balises <style>. La valeur à y indiquer pour
faire comprendre au navigateur que c'est du CSS est 'text/css'. Cet attribut est nécessaire si vous voulez avoir
un code (X)HTML valide.
Vous pouvez aussi remarquer que le code CSS à l'intérieur des balises <style> </style>
est entouré de commentaires (X)HTML. Ces commentaires sont optionnels, ils ne sont donc pas nécessaires. Leur but est de
masquer les règles CSS aux navigateurs qui ne les supportent pas : ces navigateurs vont ignorer le texte entre les commentaires
(X)HTML. Au contraire les navigateurs pouvant interpréter les feuilles de style savent que le texte entre les balises
<style> correspond à du code CSS qu'il faut interpréter malgré les commentaires (X)HTML.
Ce système est rapide à mettre en place. L'avantage est que le code s'applique à toute la page, mais c'est aussi son principal
inconvénient en ce que le code ne s'applique qu'à cette page et qu'il faut donc le copier sur les autres pages.
C. Insérer des feuilles de style externes via la balise link ou la règle @import
Nous venons de voir comment insérer des règles CSS dans un ficher (X)HTML. Mais il existe encore une autre méthode
permettant d'obtenir bien d'autres avantages. Cette méthode nécessite la création d'un nouveau fichier qui portera l'extension
.css.
Un fichier CSS ne pourra être constitué que de règles ou de commentaires CSS ; aucune balise (X)HTML n'y est autorisée, y
compris les balises <style> </style>.
C'est la meilleure méthode car le navigateur va mettre le fichier .css en cache, il ne le téléchargera donc qu'une fois.
Le fond et la forme sont séparés, cela implique que le fichier (X)HTML est plus léger, le chargement des pages sera donc
plus rapide. Enfin, un des grand avantage de cette méthode par rapport aux précédentes est qu'elle permet d'appliquer
les mêmes règles à un nombre illimité de documents (X)HTML.
Voyons maintenant comment lier cette feuille de style externe au document (X)HTML. Pour ce faire, il existe deux méthodes
qui ont chacune leurs avantages et inconvénients :
1. Insérer une feuille de style externe grâce à la balise link
Il est possible de lier une feuille de style externe à un document (X)HTML grâce à la balise <link>.
Cette balise <link> est à insérer dans l'en-tête du document. Elle dispose de plusieurs
attributs qu'il convient de détailler ici.
| Balise link pour appeler un fichier CSS dans un document (X)HTML : |
<link href="style.css" type="text/css" rel="stylesheet" />
|
L'attribut
href sert à indiquer le lien hypertexte vers le fichier CSS. Cet attribut
accepte un chemin
absolu
ou
relatif vers la
feuille de style.
L'attribut
type permet d'indiquer
le type MIME du
fichier externe. La valeur à y indiquer est identique à celle de la balise
<style>,
c'est-à-dire
'text/css'.
L'attribut rel permet de définir la relation entre le document externe (fichier CSS) et
le document appelant (fichier (X)HTML). La valeur 'stylesheet' indique que le document externe est une feuille de
style (en anglais Cascading Style Sheets).
 |
Cette balise n'est pas exclusivement prévue pour cet usage (exemple : favicon, flux RSS...
(2)).
|
2. Insérer une feuille de style externe grâce à la règle @import
Cette méthode est basée sur le même principe que la méthode <link>. Il y a
cependant une différence de syntaxe et de nature.
Au niveau de la syntaxe, la règle @import commence toujours par le mot-clé "@import",
suivi par le mot-clé "url" qui permet d'indiquer entre parenthèses et guillemets le chemin vers le fichier CSS. Il est
aussi possible de faire abstraction du mot-clé "url" et des parenthèses en indiquant directement le chemin vers le
fichier entre guillemets.
| Les syntaxes possibles d'une règle @import : |
@import url("chemin/vers/le/fichier.css");
@import url(chemin/vers/le/fichier.css);
@import "chemin/vers/le/fichier.css";
|
Si vous n'indiquez pas le mot-clé "url", alors le chemin doit se trouver entre guillemets (seul Internet Explorer, dans ses
versions 6 et 7, reconnaît le chemin sans guillemets). Dans le cas où vous indiquez le mot-clé "url" il ne faudra pas non
plus oublier les parenthèses.
Le chemin d'accès au fichier CSS peut être soit
relatif, soit
absolu.
La règle @import peut être insérée soit directement dans tout fichier (X)HTML, entre les
balises <style> </style>, soit dans tout fichier CSS. Dans les deux cas la
règle @import doit être la première règle déclarée, seule la règle @charset
ou une autre règle @import peut être déclarée avant.
Exemple de déclaration non valide :
| Déclaration @import non valide dans l'en-tête d'un document (X)HTML : |
<style type="text/css">
ul li {
list-style-type : circle;
background-color : #ffe4e1;
}
@import url("chemin/vers/le/fichier.css");
</style>
|
| Déclaration @import non valide dans un fichier CSS : |
ul li {
list-style-type : square;
background-color : #ffd700;
}
@import url("chemin/vers/le/fichier.css");
|
Ces deux exemples ne sont pas valides car la règle @import est précédée d'une règle CSS
autre que @charset ou @import.
Par contre ces exemples sont correctes :
| Déclaration @import valide dans l'en-tête d'un document (X)HTML : |
<style type="text/css">
@import url("chemin/vers/le/fichier.css");
ul li {
list-style-type : circle;
background-color : #ffe4e1;
}
</style>
|
| Déclaration @import valide dans un fichier CSS : |
@import url("chemin/vers/le/fichier.css");
ul li {
list-style-type : square;
background-color : #ffd700;
}
|
Ainsi que ceux-ci, étant donné que @charset est le seul élément autorisé avant
@import :
| Déclaration @import associée à une règle @charset dans l'en-tête d'un document (X)HTML : |
<style type="text/css">
@charset "ISO-8859-15";
@import url("chemin/vers/le/fichier.css");
ul li {
list-style-type : circle;
background-color : #ffe4e1;
}
</style>
|
| Déclaration @import valide associée à une règle @charset dans un fichier CSS : |
@charset "ISO-8859-15";
@import url("chemin/vers/le/fichier.css");
ul li {
list-style-type : square;
background-color : #ffd700;
}
|
 |
Cependant le premier exemple va poser problème. En effet une règle @charset incluse dans
l'en-tête d'un document (X)HTML est inutile et déconseillée. Les règles qui suivent peuvent alors ne pas s'appliquer dans
Safari jusqu'à sa version 4, Google Chrome jusqu'à sa version 3 et Opera 8 (à l'exclusion des versions ultérieures).
|
Au niveau de la nature de cette méthode, la règle @import est fondamentalement différente
de l'élément <link>. En effet @import est une
règle CSS 2, alors que <link> est une balise (X)HTML. Cela va avoir une influence
sur le choix de la méthode que l'on va utiliser, point que nous allons aborder maintenant.
3. Laquelle des deux méthodes choisir : avantages et inconvénients de chacune
Comme indiqué il y a quelques instants, @import est une règle issue des spécifications
CSS 2, tandis que <link> est un élément (X)HTML plus ancien. Cela va avoir pour
conséquence que la méthode @import ne sera pas gérée par tous les navigateurs. Les navigateurs
ne supportant pas CSS 2 ne comprennent pas cette règle, ils n'importeront donc pas la feuille de style. C'est le cas d'Internet
Explorer 4, de Netscape 4 et de toutes leurs versions antérieures. Au contraire, l'élément <link>
est pris en charge par tous les navigateurs.
Cette limitation pourrait être prise comme un inconvénient, il faut au contraire la voir comme un avantage : cela permet
en effet de masquer les feuilles de style à d'anciens navigateurs qui ne connaissent pas certains éléments s'y trouvant
et qui pourraient aller jusqu'à interrompre l'affichage de la page en leur présence. Sans aller aussi loin, il est
préférable qu'un agent utilisateur n'interprétant pas correctement les feuilles de style affiche la page sans les appliquer.
Un tel agent utilisateur pourrait en effet rendre le site illisible en interprétant les CSS. La page sera au moins
correctement consultable en tenant uniquement compte du style inhérent aux éléments (X)HTML. On peut penser en particulier
aux agents utilisateurs qui implémentent CSS 1 mais pas CSS 2. Pour ces motifs il peut être préférable de privilégier la
méthode @import.
|
Il faut cependant relativiser cette affirmation, car les navigateurs dont il s'agit n'ont plus qu'une audience extrêmement
réduite voire nulle auprès des internautes.
|
Un autre intérêt de la méthode @import est lié au fait que cette règle permet d'importer
des feuilles de style depuis d'autres feuilles de style. Pour bien comprendre il faut tout d'abord indiquer le contexte :
il peut être judicieux, dans le cas de feuilles de style volumineuses, de ne pas déclarer l'ensemble des règles dans un seul
fichier CSS, mais de les répartir sur plusieurs en fonction de critères qu'il vous appartiendra de définir (ex. : structure
de la page : une feuille de style pour chaque partie (en-tête, menus, corps...)).
Imaginons, dans cette hypothèse, que vous utilisiez la balise <link>. Alors, dans
chaque document (X)HTML vous devrez mettre un lien vers les différents fichiers CSS. Or, si un jour vous vous rendez compte
qu'il faut modifier l'appel aux feuilles de styles (modifier leur nom, rajouter ou supprimer des fichiers CSS, etc.) il
vous faudra reprendre toutes vos pages (X)HTML pour effectuer les corrections.
Pour parer à ce problème vous pouvez lier toutes vos pages (X)HTML à une seule feuille de style (via la balise
<link> ou la règle @import), dans le but de
centraliser dans celle-ci l'appel à toutes les autres feuilles de style. Si, par la suite, vous devez ajouter ou supprimer
une feuille de style, vous n'aurez qu'un seul fichier à modifier.
Exemple :
| Appel d'un seul fichier CSS dans le document (X)HTML : |
<link href="style.css" type="text/css" rel="stylesheet" />
|
| Appel de tous les fichiers CSS dans le document style.css : |
@import url("style-entete.css");
@import url("style-menu.css");
@import url("style-corps.css");
@import url("style-pied.css");
|
Cet exemple a, par contre, l'inconvénient de multiplier les requêtes au serveur, ce qui peut être une des causes du
ralentissement de l'affichage d'une page web.
Vous aurez déjà pu lire sur le net que le nombre d'imports est limité, c'est-à-dire que l'utilisation de la règle
@import permet d'importer un certain nombre de fichiers et qu'au delà ils ne sont plus
importés. Pour en avoir le cœur net, vous pouvez consulter
l'exemple
11 sur la limite du nombre d'imports utilisables, dans lequel on importe 146 fichiers, soit exactement le nombre
de mots-clé de couleur disponibles dans CSS 3.
Vous constaterez que seul Internet Explorer, dans toutes ses versions, limite le nombre d'imports à 31 fichiers. Les autres
navigateurs importent correctement les 146 fichiers CSS.
Une autre possibilité est de procéder à des imports par niveaux : c'est-à-dire qu'on peut insérer dans un fichier CSS une
règle @import qui appelle un second fichier CSS, dans lequel on appelle une troisième feuille de style via la règle
@import, etc.
| Un premier fichier CSS 'style1.css' liant un second fichier CSS via une règle @import : |
@import url("style002.css");
|
| Second fichier CSS 'style2.css' liant un troisième fichier CSS via une règle @import : |
@import url("style003.css");
|
| Troisième fichier CSS 'style3.css' liant un quatrième fichier CSS via une règle @import : |
@import url("style004.css");
|
Là encore c'est Internet Explorer qui est le mauvais élève : il n'autorise qu'une profondeur de quatre niveaux d'imports.
Les autres navigateurs ne connaissent pas ces limites et importent les fichiers CSS jusqu'à une profondeur de 146 niveaux
au moins.
Vous n'aurez, en règle générale, pas besoin d'utiliser une telle profondeur d'imports. Cependant la restriction d'Internet
Explorer dans ce domaine risque de vous faire atteindre très rapidement ces limites, d'où l'intérêt de tenir compte de
cette information.
|
Ne suivez surtout pas ces exemples, qui sont une aberration du point de vue de l'utilisation d'un code pertinent, rapide
et facile à maintenir. Ce ne sont que deux exemples pour mettre en évidence des points précis.
|
La règle
@import a aussi ses inconvénients : elle est, par exemple, désavantagée par
rapport à la méthode
<link> dans le domaine des performances : quand il y a différentes
feuilles de style et que certaines sont importées grâce à la règle
@import, elles ne
sont pas téléchargées concomitamment mais successivement, ce qui ralenti l'affichage de la page. Les navigateurs ne sont pas
tous égaux face à ce comportement, et particulièrement Internet Explorer est en retrait vis-à-vis de ses concurrents.
Il existe plusieurs combinaisons entre l'utilisation de
<link> et
@import
qui vont chacune conduire à des comportements différents, voici l'impact sur les performances de ces différentes combinaisons :
(3)
- en utilisant plusieurs règles @import dans un document
(X)HTML il n'y a aucun impact notable sur les performances : les fichiers CSS sont alors téléchargés en parallèle ;
- en utilisant les méthodes <link> et
@import dans le même document (X)HTML, les deux feuilles de style qui en résultent ne
seront pas téléchargées concomitamment, mais successivement. Cela ne se produit qu'avec Internet Explorer dans toutes ses
versions. Les autres navigateurs ne rencontrent pas ce problème ;
- en utilisant la méthode @import dans un fichier CSS
inclus par la méthode <link>, cela va également conduire à un téléchargement successif
des différentes feuilles de style, mais cette fois-ci dans tous les navigateurs. Contrairement au précédent, ce comportement est
tout à fait logique et normal : en effet, il faut d'abord que le navigateur télécharge le premier fichier CSS et l'interprète
pour constater qu'il y a un appel à un autre fichier CSS dans celui-ci ;
- en utilisant la méthode <link> pour plusieurs fichiers,
et que dans l'un d'eux on fait appel à la méthode @import, alors Internet Explorer ne commencera
le téléchargement du fichier introduit par la méthode @import qu'à la fin du téléchargement du
dernier fichier CSS inclus par la méthode <link>, et ce même si le fichier dans lequel se
trouve l'appel à la feuille de style insérée par @import, a été téléchargée plus rapidement que
les autres fichiers CSS inclus grâce à la balise <link> ;
- en utilisant la méthode @import en même temps que l'insertion
d'autres fichiers, comme du JavaScript, Internet Explorer ne respecte plus l'ordre dans lequel les fichiers sont spécifiés. Le
fichier JavaScript sera, par exemple, téléchargé avant les fichiers CSS. Cela peut causer des problèmes si le JavaScript a besoin
d'éléments qui sont déclarés dans les feuilles de style insérées avec la méthode @import.
En résumé, et d'après les 'bonnes pratiques Yahoo'
(4),
avec Internet Explorer, utiliser la méthode
@import reviens à utiliser la méthode
<link> en la plaçant au bas de la page.
Par contre l'utilisation de la méthode <link> va permettre de télécharger les feuilles
de style concomitamment, et ce dans tous les navigateurs. C'est donc la méthode à privilégier du point de vue des performances.
Un autre inconvénient de la méthode @import est que le navigateur Internet Explorer (versions
6 et 7) ne supporte pas l'utilisation de cette méthode quand on précise le média auquel on souhaite que la feuille de style
s'applique. Ce bug a été corrigé dans la version 8. J'aborde là une nouveauté que nous n'avons pas encore eu le loisir de voir
et qui fait l'objet du sujet de la section suivante.
D. Attribuer un type de média aux feuilles de style
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). Voici les différents types de médias :
| Mot-clé |
Description |
| all |
tous les appareils |
| braille |
appareils braille à retour tactile |
| embossed |
appareils à impression braille |
| handheld |
appareils portatifs |
| print |
imprimante et documents vus à l'écran en mode aperçu avant impression |
| projection |
présentation en projection |
| screen |
moniteurs couleur |
| speech / aural |
synthétiseur de parole (aural dans les spécifications CSS 2, et speech dans les
spécifications CSS 2.1) |
| Tty |
télétypes, terminaux ou appareils portatifs aux capacités d'affichage réduites |
| Tv |
appareils de type télévision |
|
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"
(5)
et 'speech' avec son mode "Voix".
|
Préciser un type de média permet par exemple de créer une feuille de style spécifique pour l'impression de la page, dans
laquelle vous pourrez utiliser les mesures absolues plus adaptées aux situations qui nécessitent une mesure physique,
comme nous allons le voir dans un prochain article. Dans laquelle vous pourrez
également désactiver certaines zones comme les menus, qui n'ont pas d'intérêt à être imprimés. Etc.
Il vous sera encore possible de créer un design spécifique et adapté aux appareils disposant de petits écrans tels que les
téléphones portables et autres PDA, en créant une feuille de style attribuée au média 'handheld'.
La plupart des méthodes d'insertion du code CSS vus précédemment permettent de préciser le type de média auquel ils doivent
s'appliquer. Seul l'attribut style qui sert à insérer du code CSS directement dans les
balises (X)HTML ne permet pas de préciser un type de média.
Voyons maintenant comment procéder avec les différentes méthodes d'insertion de code CSS :
1. Insérer un type de média avec les balises style et link
Si vous utilisez la balise <style> ou la balise <link>
insérée dans l'en-tête du document, il vous suffit de préciser l'attribut media et de
lui donner la valeur voulue :
| Attribuer un type de média lors de l'appel d'une feuille CSS dans l'en-tête du document (X)HTML : |
<link href="style.css" type="text/css" rel="stylesheet" media="all" />
...
<style type="text/css" media="print">
</style>
|
La feuille de style 'style.css' s'appliquera à l'ensemble des agents utilisateurs qui vont accéder à la page puisqu'on a
précisé le type de média 'all'. Le style déclaré entre les balises <style>
ne s'appliquera que si vous imprimez la page, vu que le type de média spécifié est 'print'.
Vous n'êtes pas limité à un seul média, vous pouvez en indiquer plusieurs, il suffit de séparer la liste des médias avec
des virgules :
| Attribuer plusieurs types de médias à un même ensemble de règles CSS : |
<link href="style.css" type="text/css" rel="stylesheet" media="print, handheld" />
...
<style type="text/css" media="screen, print">
</style>
|
2. Insérer un type de média avec la règle @import
Vous pouvez aussi indiquer un type de média si vous utilisez la règle @import, et ce
de la manière suivante :
| Attribuer un type de média avec l'utilisation de la règle @import : |
@import url("style1.css") screen;
@import url("style2.css") print, handheld;
|
La feuille de style "style1.css" sera appliquée lors de l'affichage de la page web sur un moniteur d'ordinateur, tandis
que "style2.css" sera appliqué à l'affichage de la page sur les appareils portatifs et lors de l'impression de la page web.
|
Internet Explorer jusqu'à la version 7 ne sera pas capable d'importer une feuille de style appelée grâce à la méthode
@import si vous ajoutez un type de média à celle-ci, car il ne sais pas gérer les médias
via cette règle. Ce bug a été corrigé dans la version 8. L'exemple ci-dessus ne fonctionnera pas et les styles 'style1.css'
et 'style2.css' ne seront donc pas importés avec Internet Explorer. Il n'est donc pas conseillé d'attribuer un type de média
à une feuille de style importée via la règle @import pour des raisons de compatibilité.
|
Peu importe que vous utilisiez la règle @import dans un fichier (X)HTML entre les balises
<link>, ou dans un fichier CSS
externe. Dans les deux cas vous pouvez spécifier un type de média à la règle @import.
3. Insérer un type de média avec la règle @media
Enfin, il vous est aussi possible, à l'intérieur d'une feuille de style, de faire des distinctions fondées sur le média.
La règle @media permet de préciser à sa suite un type de média qui aura pour effet que
l'ensemble du code à l'intérieur des accolades ne s'appliquera qu'au média spécifié.
| Attribuer un type de média à l'intérieur d'une feuille de style avec la règle at-rule @media : |
@media print {
#menu {
display : none;
border : 0 none;
}
p {
background-color : none;
}
}
@media screen, handheld {
#menu {
border : 1px solid red;
}
p {
background-color : blue;
}
}
|
Dans cet exemple la première règle @media ne s'appliquera que si vous imprimez le document
web auquel est lié cette feuille de style. La seconde règle @media vous montre aussi qu'il
est possible de déclarer plusieurs types de médias pour une règle @media.
La règle @media peut être appelée soit dans un fichier CSS externe, soit entre les balises
<style> d'une page (X)HTML.
Remerciements
Le prochain article sera consacré à l'étude des sélecteurs (à venir).
Tous mes remerciements vont à ....
Copyright © 2011 Christophe F..
Aucune reproduction, même partielle, ne peut être faite
de ce site ni de l'ensemble de son contenu : textes, documents, images, etc.
sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à
trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
compatibilité des propriétés CSS dans les mails.
Comment insérer une icône dans l'URL
de la barre de navigation avant le http ?
Pourquoi ne pas utiliser la règle @import : impacts sur les performances et exemples.
