Developpez.com

Plus de 2 000 forums
et jusqu'à 5 000 nouveaux messages par jour

Developpez.com - CSS
X

Choisissez d'abord la catégorieensuite la rubrique :


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 à ....

Commentez cet article : Commentez Donner une note à l'article (0)

    
Viadeo Twitter Facebook Share on Google+        



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 :

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 :


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 :

Elle n'est cependant pas absolument à proscrire. Il y a certaines circonstances où il n'est pas possible de faire autrement, on peut penser au cas des mails : voir le tutoriel sur la fr compatibilité des propriétés CSS dans les mails.


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).


info 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 non respect de ces règles va aboutir à ce que la feuille de style ne sera pas reconnue et le style ne sera donc pas appliqué. Voyez l'exemple 04 sur l'utilisation de la méthode at-rule @import et de ses différentes syntaxes.

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;/* mistyrose */
}

@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;/* gold */
}

@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;/* mistyrose */
}
</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;/* gold */
}

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;/* mistyrose */
}
</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;/* gold */
}
warning 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.

info 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");

/* d'autres règles CSS */
Second fichier CSS 'style2.css' liant un troisième fichier CSS via une règle @import :
@import url("style003.css");

/* d'autres règles CSS */
Troisième fichier CSS 'style3.css' liant un quatrième fichier CSS via une règle @import :
@import url("style004.css");

/* d'autres règles 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.

info 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 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
info 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">
/* le code CSS ici présent s'applique uniquement au document imprimé */
</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">
/* le code CSS ici présent s'applique au document affiché sur un écran d'ordinateur et au document imprimé */
</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.

warning 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 à ....

Commentez cet article : Commentez Donner une note à l'article (0)

 

            
Tous les articles de cette série sur CSS :
Le sommaire

Introduction aux CSS
La syntaxe d'une règle CSS


(1) Pour plus d'informations sur ces notions, voir : fr Les bases du HTML
(2) Un exemple pour insérer un favicon : faq Comment insérer une icône dans l'URL de la barre de navigation avant le http ?
(3) Pour accéder à la source et aux exemples : en Pourquoi ne pas utiliser la règle @import : impacts sur les performances et exemples.
(4) Source : en les bonnes pratiques selon Yahoo : inconvénient de la méthode @import.
(5) Le mode "Petit écran" a disparu depuis la version 10.50 d'Opera.

Valid XHTML 1.0 TransitionalValid CSS!

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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Responsable bénévole de la rubrique CSS : Xavier Lecomte -