Ist es möglich, eine CSS-Datei in eine andere einzubinden?
In einigen Fällen ist es möglich, @import "file.css" zu verwenden, und die meisten modernen Browser sollten dies unterstützen, ältere Browser wie NN4 werden leicht verrückt.
Hinweis: Die Import-Anweisung muss vor allen anderen Deklarationen in der Datei stehen. Testen Sie die Datei auf allen Zielbrowsern, bevor Sie sie in der Produktion verwenden.
Ja, verwenden Sie @import
ausführliche Infos leicht zu googeln, eine gute unter http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
Die "@import"-Regel kann mehrere Stildateien aufrufen. Diese Dateien werden vom Browser oder User Agent bei Bedarf aufgerufen, z. B. wenn HTML-Tags das CSS aufrufen.
<!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>Die CSS-Datei "main.css" enthält die folgende Syntax:
@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);Zum Einfügen in ein Stilelement verwenden Sie createTexNode verwendet kein innerHTML sondern:
<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> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
33 Stimmen
Nur zur Information: Dadurch wird keine HTTP-Anfrage gespeichert. Es erspart Ihnen lediglich, die importierte .css-Datei an anderer Stelle einzubinden.
2 Stimmen
Das wäre fast dasselbe wie die Einbindung eines anderen CSS vor und nicht die beste aller Praktiken