Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Directive @import

@import est une directive du langage CSS, qui permet d'insérer des styles à partir d'une autre feuille de styles, facilitant ainsi l'organisation du code CSS en le répartissant sur plusieurs fichiers.

Description de la directive @import.

@import permet d'insérer le contenu d'autres feuille de styles. Cette directive est pratique pour organiser les styles lorsque ceux-ci sont très nombreux.

La directive @import doit se trouver avant la définition des styles, donc au début de la feuille de styles, mais après une éventuelle directive @charset.

Les styles importés sont traités exactement comme s'ils avaient été écrits à l'endroit où se trouve la directive @import. Si des chemins relatifs figurent dans la feuille de styles importée, ils seront donc résolus par rapport à l'emplacement du fichier où figure @import.

Syntaxes pour @import.

  • @import url('styles/fichier.css');

    Une url, désignant le fichier à charger.

  • @import 'styles/fichier.css';

    Une chaîne de caractères, entre apostrophes ou entre guillemets. Cette syntaxe est équivalente à la précédente. La fonction url() et donc facultative.

  • @import url('styles/fichier.css') print,screen and (min-width:900px);

    L'url, ou le nom du fichier, peut être suivi d'une liste de médias, avec éventuellement des critères sur les caractéristiques du terminal (média-queries). Reportez vous à la directive @media pour une description plus complète des médias autorisés et de la syntaxe des média-queries.

    Cette option vise à optimiser les chargements, le navigateur peut ne télécharger que les fichiers correspondant au média actuel.

  • Voir aussi...

    Structuration du code - Directives.

    • @apply : Applique un groupe de propriétés préalablement définies.
    • @media : Affectation de règles CSS en fonction du périphérique (smartphone, écran de bureau, etc...).
    • @supports : Teste la compatibilité du navigateur.