Vaut-il mieux lier sa feuille de styles CSS avec la balise <link> ou utiliser la règle @import dans un bloc <style> ? C'est une question fréquemment posée, car les deux techniques aboutissent apparemment au même résultat.
La balise <link>
<link> est une balise HTML qui n'est pas uniquement prévue pour lier des feuilles de styles, mais qui peut aussi faire référence à d'autres pages HTML sur le site, liées par une hiérarchie. Par exemple, il est possible d'indiquer la page suivante dans une série de documents, ou bien la page parente, pour remonter d'un niveau dans la navigation. On peut aussi l'utiliser pour faire indiquer une ressource externe comme par exemple un flux RSS ou Atom, ou une favicon. Dans tous les cas, un élément <link> présente au moins deux attributs: rel (type de relation) et href (ressource liée).
Voici un récapitulatif des attributs spécifiques, dans le cas d'une utilisation avec une feuille de styles :
-
rel="stylesheet", pour indiquer que la relation liant le document HTML à ce fichier est celui d'une feuille de styles -
type="text/css", afin d'indiquer son type MIME, -
éventuellement
media="le type de média destination"pour l'exploiter selon un média de consultation ou l'autre (screen,print...) -
voire de l'attribut
titledans le cas de feuilles de style persistantes et alternatives.
Exemple :
<link rel="stylesheet" href="habillage.css" type="text/css" media="screen" />
<link rel="stylesheet" href="texte.css" type="text/css" media="screen" />
<link rel="stylesheet" href="impression.css" type="text/css" media="print" />
La règle @import
@import est une propriété CSS2 qui doit être suivie de l'URL d'un fichier qui contiendra des styles à appliquer en plus de la feuille de style en cours.
-
entre les balises
<style>et<style>dans la section<head>d'une page HTML; - 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 :
<style type="text/css">
@import url(/styles/habillage.css);
@import url(/styles/texte.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" media="print">
@import url(impression.css);
</style>Cette propriété permet en outre d'importer des feuilles de style dans d'autres feuilles de style. Cela offre des possibilités pour créer des feuilles de style dynamiques sans avoir à recopier plusieurs fois le meme code.
Dans la pratique, quelles sont les différences ?
En pratique, le résultat pour la présentation du document HTML est exactement le même, mais il y a deux subtilités importantes :
- @import (CSS2) n'est pas reconnu par les très vieux navigateurs qui ne sont pas encore aux normes au niveau des CSS, par conséquent les styles seront appliqués partout sauf sur ces navigateurs dinosaures. Quel intérêt ? Tout simplement de permettre aux utilisateurs de ces dinosaures de consulter le site sans trop de problème. En effet, sans feuille de style le site reste mieux visible qu'avec des styles interprêtés n'importe comment. C'est donc une technique recommandée pour l'interopérabilité et la compatibilité ascendante.
- Sur certains navigateurs @import réduit sérieusement les performances, car cette technique ne permet pas un chargement parallélisé de plusieurs feuilles de style en même temps, ce qui ralentit le rendu de la page et fait patienter le visiteur un peu plus que nécessaire. Pour en savoir plus à ce sujet, consultez l'article original Don't use @import par Steve Souders.
On pourra donc retenir, par précaution, qu'il vaut mieux n'utiliser @import qu'en connaissance de cause et en dernier recours.