Dienstag, 27. März 2007

HTML CSS

Include von CSS-Dateien via CSS

Jeder Webentwickler oder Webdesigner stellt sich irgendwann die Frage: Kann ich CSS-Dateien innerhalb von andern CSS-Dateien includen?

Innerhalb von CSS kann man auch in weitere CSS-Dateien inkludieren. Der Befehl dazu lautet: @import

Der Syntax lautet also folgendermaßen:

Download Code!

  1.  
  2. @import "extra.css";
  3. @import url("extra.css") all;
  4.  

Nach dem @import gibt man den Namen der CSS-Datei in Anführungzeichen ein. Alternativ, kann man auch das Konstrukt mit url() verwenden. Wahrscheinlich geht das erste nicht bei extrenen CSS-Dateien, wobei ich das jetzt noch nicht überprüft habe.

Wenn man die Version mit url() benutzt um eine CSS-Datei einzubinden, muss man einen Medientyp angeben. Als Medientyp kann man verschiedene angeben. Wem die Medientypen nicht bekannt sind, hier: Auflistung aller Medientypen.

PS. Der Internet Explorer hat Probleme mit dem Medientyp. So soll der Internet Explorer 5.x nur die Ausgabemedien screen und all unterstützen.

Achtung bei @import

Wie wiimaster in den Kommentare hinweist, müssen die @import Anweisungen vor allen anderen Zuweisungen stehen.

Hinweis zur Ladegeschwindigkeit bei @import

Ikkez bemerkt in den Kommenataren, dass beim Nutzen von @import die Ladezeit "verlängert" wird. Hierzu gibt es auch ein Test von Steve Souders

Bewertung: 4 von 5, 1 Stimme(n) 12380 Klicks
Von Mr.Foo in HTML CSS am 27.03.07@16:01 Uhr

Trackbacks
Trackback für spezifische URI dieses Eintrags

Keine Trackbacks

6 Kommentare
Ansicht der Kommentare: (Linear | Verschachtelt)

wiimaster - #1 - 14.05.2008 09:30 - (Antwort)

Es ist noch zu erwähnen, dass der import Befehl vor allen anderen Definitionen stehen muss. Das ist leider oft etwas hinderlich.

Mr. Foo - #1.1 - 16.05.2008 23:14 - (Antwort)

Danke,

hab deinen Hinweis dem Eintrag hinzugefügt.

ikkez - #2 - 20.05.2008 12:59 - (Antwort)

das es diese Methode gibt ist gut und schön, doch sollte man dennoch den normalen import benutzen, da @import auf die Performance beim rendern der Seite drückt.

read: www.stevesouders.com/examples/rule-css-top.php

ikkez - #3 - 20.05.2008 13:00 - (Antwort)

das es diese Methode gibt ist gut und schön, doch sollte man dennoch den normalen import benutzen, da @import auf die Performance beim rendern der Seite drückt.

read: stevesouders.com

Mr. Foo - #3.1 - 21.05.2008 00:04 - (Antwort)

Standartmäßig sollte man das nicht machen - ich habe den Text entsprechend ergänzt.

Bei dynamisch generiertem CSS kann die Lösung aber ziemlich elegant sein.

Jürgen - #4 - 03.02.2009 22:02 - (Antwort)

Der Internetexplorer 7 kann nicht mal die Medientypen, bei der Anweisung @import url("extra.css") all; ignoriert er den import komplett, bei mir funktionierte lediglich @import "extra.css";


Kommentar schreiben

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Sie können [geshi lang=LANG][/lang] Tags verwenden um Quellcode abhängig von der gewählten Programmiersprache einzubinden