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


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


682
2017-09-29 04:23


origine


Réponses:


Oui:

@import url("base.css");

Remarque:

  • le @import règle doit précéder toutes les autres règles (à @charset règle); et
  • Additionnel @import les instructions nécessitent des demandes de serveur supplémentaires.

Agréger CSS dans un fichier pour éviter plusieurs requêtes HTTP. C'est, copier le contenu de base.css et special.css dans base-special.css et référence seulement base-special.css).

En 2008, tous les navigateurs ne sont pas supportés @import (voir Compatibilité du navigateur).


953
2017-09-29 04:29



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

Ce doit être la première règle de la feuille de style utilisant le @import rule.

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

Le seul inconvénient est que les anciens navigateurs web ne le supporteront pas. En fait, c'est l'un des 'hack' CSS pour cacher les styles CSS des navigateurs plus anciens.

Faire référence à cette liste pour le support du navigateur.


125
2017-09-29 05:31



le @import url("base.css"); fonctionne bien, mais gardez à l'esprit que chaque @import instruction 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 @import.


37
2017-09-29 07:06



Le CSS @import règle fait juste cela. Par exemple.,

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

23
2017-09-29 04:29



Oui.

@import "your.css";

La règle est documentée ici.


14
2017-09-29 04:33



Dans certains cas, il est possible d'utiliser @import "file.css", et la plupart des navigateurs modernes devraient supporter cela, les anciens navigateurs comme NN4, deviendront un peu fous.

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


9
2017-09-29 04:31



Oui, utilisez @import

informations détaillées facilement googlé pour, un bon à http://webdesign.about.com/od/beginningcss/f/css_import_link.htm


7
2017-09-29 04:33



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";

5
2018-01-22 17:18



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

C'est la meilleure façon d'inclure une feuille de style css dans une feuille de style css en utilisant css.


5
2017-07-27 03:22



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 ex. 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 l'utilisation de l'élément de style createTexNode n'utilise 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>

3
2018-04-08 17:33