@import – Les CSS importés
Vous pouvez utiliser les CSS importés.
Cela se fait en mettant la balise @import dans un fichier CSS ou dans un fichier HTML 5. Et automatiquement, le chargement d’un autre fichier CSS sera lancé. Dans les gros sites Internet complexes, si vous mettez tout dans le même fichier CSS, il va être énorme et vous n’allez plus vous y retrouver dans tout votre code.
Alors qu’avec @import URL(le nom de votre CSS.css) dans un fichier CSS, vous allez pouvoir créer plusieurs fichiers CSS. un pour l’en-tête de votre page, un autre pour votre pied de page, encore un autre pour le contenu de vos articles, pour votre menu… Et vous allez ensuite ajouter des @import URL, ou vous pouvez utiliser la balise link avec href=”monFichierCss.css”, selon votre préférence.
Exemple dans une page HTML5 :
<style type="text/css">
@import url(monFichierCss.css);
</style>Il y a des priorités dans les fichiers CSS. Lorsqu’il y a plusieurs éléments provenant de plusieurs feuilles de style, de plusieurs CSS, il y a des priorités. Par ordre croissant de priorité, de la plus basse à la haute, vous avez :
- Les propriétés du navigateur
- Les feuilles de style externes
- Les feuilles de style internes
- Les feuilles de style en ligne
La priorité la plus haute, c’est les feuilles de styles en ligne, ce que je vous conseille justement, d’utiliser.
Sinon, vous avez la balise !important, elle veut dire qu’il est carrément possible de passer outre toutes ces priorités, en utilisant la valeur !important.
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 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. On peut utiliser @import:
-
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 même 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.
Étiquette :balise HTML, balises HTML, CSS, CSS 3, CSS3, fichier CSS, HTML 5, style d'une balise
