Comment appeler une feuille de styles: <link /> ou @import?

Astuce par Florent V. (Chef de projet, intégrateur web, Lyon, France)
Mis à jour le 09 Janvier 2009. 6888 lectures.
Tags : css, compatibilité, navigateurs, xhtml, link, @rules

Une question fréquemment posée: vaut-il mieux lier sa feuille de style avec l'élément link ou utiliser la règle @import dans un élément style?

Rappelons brièvement à quoi ressemblent ces deux méthodes:

<head>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<style type="text/css">
		@import url(styles.css);
	</style>
</head>

L’élément HTML link

link est un élément HTML qui n'est pas uniquement prévu pour lier des feuilles de styles. On peut aussi l'utiliser pour faire indiquer une ressource externe comme par exemple un flux RSS ou Atom, ou une favicon, etc. Dans tous les cas, un élément link présente au moins deux attributs: rel (type de relation) et href (ressource liée).

Dans le cas d'une feuille de styles, on retrouve aussi les attributs type (avec la valeur text/css) et media (pour indiquer le type de média de restitution: screen, print, handheld, etc.). On peut aussi retrouver un attribut title dans le cas de feuilles de styles persistantes et alternatives.

Exemple:

<link rel="stylesheet" type="text/css" media="screen" href="/styles/habillage.css" />

La règle CSS @import

@import est une propriété CSS2 qui doit être suivie de l'URL d'une feuille de styles à importer. On peut utiliser @import:

  1. entre les balises <style> et <style> dans le head d'une page HTML;
  2. au début d'un fichier .css, pour inclure une ou plusieurs autres feuilles de styles;

Cette deuxième possibilité est intéressante car elle permet de créer des feuilles de styles plus évolutives (on lie un seul fichier depuis la page HTML, et on gère l'import des feuilles de styles directement depuis ce fichier CSS racine). Problème: ce fonctionnement peut légèrement ralentir le chargement des styles et donc de la page, et il est déconseillé dans une démarche d'optimisation des performances client.

Exemple d'utilisation:

<style type="text/css">
	@import url(/styles/habillage.css);
</style>

On peut ajouter, de façon optionnelle, une liste de médias. Mais attention, Internet Explorer 6-7 ne comprend pas cette syntaxe, et n'importera pas du tout la feuille de style correspondante! (Internet Explorer 8 corrige ce problème.)

<style type="text/css">
	@import url(/styles/habillage.css) screen;
</style>

Faut-il préférer link ou @import?

En pratique, le résultat est exactement le même.

L'intérêt de @import peut être, dans certains cas précis, de servir de filtre pour certains navigateurs très minoritaires et vieillissants.

On a vu qu'Internet Explorer 6 et 7 (et les versions précédentes pour être complet) ne comprenait pas la syntaxe avec le type de média indiqué derrière le chemin du fichier CSS. Il y a d'autres syntaxes un peu plus subtiles qui permettent de filtrer des navigateurs plus anciens encore.

En voici quelques-unes, données sans garanties (à tester avant de les utiliser aveuglément!):

/* Filtre utile no 1: filtre IE4, NN4, et IE5 Mac.
   Sera lu par IE5 Win, IE6+, et les navigateurs récents. */
@import 'styles.css';

/* Filtre utile no 2: filtre IE4, NN4, IE5 Mac et IE 5.01 Win.
   Sera lu par IE 5.5, IE6+, et les navigateurs récents. */
@import'styles.css';

L'avantage de link sur @import, maintenant, est qu'il est peut-être un peu plus compact qu'un style placé dans le head… mais là, c'est surtout une question de gout. ;)

Ressources