Est-il possible d'inclure un fichier CSS dans un autre?

782

css

— Gaizka Allende
source

26

Juste un fyi, cela ne sauvegarde pas une requête HTTP. Cela vous évite d'avoir à inclure le fichier .css importé ailleurs.

— T. Brian Jones

1

Je serais presque la même chose que d'inclure un autre CSS avant et pas les meilleures pratiques

— Gaizka Allende

1087

Oui:

@import url("base.css");

Remarque:

La @importrègle doit précéder toutes les autres règles (sauf @charset).
Les @importinstructions supplémentaires nécessitent des demandes de serveur supplémentaires. Vous pouvez également concaténer tous les CSS dans un seul fichier pour éviter plusieurs requêtes HTTP. Par exemple, copiez le contenu de base.csset special.cssdans base-special.csset référence uniquement base-special.css.

— Kevin Read
source

143

Oui. L'importation d'un fichier CSS dans un autre fichier CSS est possible.

Il doit s'agir de la première règle de la feuille de style utilisant la règle @import .

@import "mystyle.css";
@import url("mystyle.css");

La seule mise en garde est que les anciens navigateurs Web ne le prendront pas en charge. En fait, c'est l'un des «hack» CSS pour masquer les styles CSS des anciens navigateurs.

Reportez-vous à cette liste pour la prise en charge du navigateur.

— Ronnie Liew
source

42

le @import url("base.css"); fonctionne très bien , mais gardez à l' esprit que chaque @importdéclaration est une nouvelle requête au serveur. Ce n'est peut-être pas un problème pour vous, mais lorsque des performances optimales sont requises, vous devez éviter le @import.

— Gène
source

2

les fichiers CSS ne sont-ils pas mis en cache? Il ne demandera donc le fichier qu'une seule fois? semble insignifiant.

— endolith

1

Si vous ne réduisez pas votre CSS en un seul fichier, alors vous avez raison, mais une fois que c'est le cas, vous appelez simplement un fichier CSS. Corrigez-moi si je me trompe bien sûr.

— mjwrazor

27

La @importrègle CSS fait exactement cela. Par exemple,

@import url('/css/common.css');
@import url('/css/colors.css');

— Sören Kuklau
source

16

Oui.

@import "your.css";

La règle est documentée ici .

— Gordon Wilson
source

11

Dans certains cas, il est possible d'utiliser @import "file.css", et la plupart des navigateurs modernes devraient le prendre en charge, les navigateurs plus anciens tels que NN4, deviendront légèrement fous.

Remarque: l'instruction import doit précéder toutes les autres déclarations du fichier et la tester sur tous vos navigateurs cibles avant de l'utiliser en production.

— seanb
source

8

Oui, utilisez @import

informations détaillées faciles à rechercher sur Google, une bonne à http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

— DarenW
source

6

oui c'est possible en utilisant @import et en fournissant le chemin du fichier css par exemple

@import url("mycssfile.css");

ou

@import "mycssfile.css";

— vidhi
source

6

@import("/path-to-your-styles.css");

C'est le meilleur moyen d'inclure une feuille de style CSS dans une feuille de style CSS en utilisant CSS.

— Floyd
source

6

La règle "@import" peut appeler dans plusieurs fichiers de styles. Ces fichiers sont appelés par le navigateur ou l'agent utilisateur en cas de besoin, par exemple les balises HTML appellent le CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

Le fichier CSS "main.css" contient la syntaxe suivante:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Pour insérer dans un élément de style, utilisez createTexNode, n'utilisez pas innerHTML mais:

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>

— Chetabahana
source

Juste pour souligner, alors que @hylp souligne qu'il est possible de remplacer les classes des importations (classes projectionet screen?), Ce n'est généralement jamais une bonne chose à faire. ;)

— Tcll

2

@import url('style.css');

Contrairement à la meilleure réponse, il n'est pas recommandé d'agréger tous les fichiers CSS en un seul morceau lors de l'utilisation de HTTP / 2.0

— peterC_
source

2

Importez bootstrap avec altervista et wordpress

J'utilise ceci pour importer bootstrap.css dans altervista avec wordpress

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

et cela fonctionne très bien, car il supprimerait le code rel de lien html si je le mettais dans une page

— Giovanni G. PY
source

1

Oui, vous pouvez importer facilement un CSS vers un autre (n'importe où sur le site Web). Vous devez utiliser comme:

@import url("url_path");

— NARGIS PARWEEN
source

1

Pour une raison quelconque, @import n'a pas fonctionné pour moi, mais ce n'est pas vraiment nécessaire, n'est-ce pas?

Voici ce que j'ai fait à la place, dans le html:

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

Notez que media = "print" a 2 feuilles de style: myap-print.css et myap-screen.css. C'est le même effet que d'inclure myap-screen.css dans myap-print.css.

— Colin Keenan
source

Non, ce n'est pas correct. Cela inclut plusieurs fichiers CSS à partir d'un fichier HTML, pas un fichier CSS à partir d'un autre fichier CSS.

— TylerH

0

chantez la règle CSS @import ici

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

— Pocky_Thailand
source

0

J'ai créé le fichier main.css et y ai inclus tous les fichiers css.

Nous ne pouvons inclure qu'un seul fichier main.css

@import url('style.css');
@import url('platforms.css');

— Dinesh Vaitage
source

-3

Je suis tombé sur cela et je voulais juste dire S'IL VOUS PLAÎT NE PAS UTILISER @IMPORT EN CSS !!!! L'instruction d'importation est envoyée au client et le client fait une autre demande. Si vous souhaitez diviser votre CSS entre différents fichiers, utilisez Less. Dans Less, l'instruction d'importation se produit sur le serveur et la sortie est mise en cache et ne crée pas de pénalité de performances en forçant le client à établir une autre connexion. Sass est également une option que je n'ai pas explorée. Franchement, si vous n'utilisez pas Less ou Sass, vous devriez commencer. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
source

1

Le client fera une autre demande, pas une autre connexion. Et pour la qualité, c'est un bon moyen d'utiliser le CSS d'importation. Il vaut bien mieux avoir ces importations au lieu d'un gros fichier css qui grandit et grandit avec le projet ...

— YvesR

3

C'est la recommandation de Google ( developers.google.com/speed/docs/best-practices/… ) et de Yahoo ( developer.yahoo.com/performance/rules.html#csslink )

— WillSeitz

1

Pourtant - c'est juste une demande de plus. Sur potentiellement des centaines pour un chargement de page complet.

— Steve Bennett

8

Droite?! Une demande de plus ne justifie guère les signes de non-respect de la main et les majuscules. Une demande n'est pas une mauvaise pratique. -1 à la réponse - culte du fret LESS et SASS.

— Chris Baker du

Eh bien, ce n'est qu'une seule demande de plus .. mais vous pouvez importer plus de CSS dans une seule et ils sont téléchargés en parallèle.

— wh1sp3r