Unterschied zwischen @import und Link in CSS

117

Ich lerne etwas CSS, um meine Projektvorlage zu optimieren. Ich bin auf dieses Problem gekommen und habe im Internet keine klare Antwort gefunden. Gibt es einen Unterschied zwischen der Verwendung von @import oder Link in CSS?

Verwendung von @import

<style>@import url(Path To stylesheet.css)</style>

Verwendung von Link

<link rel="stylesheet" href="Path To stylesheet.css">

Was ist der beste Weg, um es zu tun? und warum? Vielen Dank!

css import hyperlink Omar Abid
quelle

Antworten:

141

Theoretisch besteht der einzige Unterschied zwischen ihnen darin, dass @importder CSS-Mechanismus ein Stylesheet enthält und <link>der HTML-Mechanismus. Browser behandeln sie jedoch unterschiedlich und bieten <link>einen klaren Vorteil in Bezug auf die Leistung.

Steve Souders schrieb einen ausführlichen Blog-Beitrag, in dem er die Auswirkungen von beiden <link>und @import(und allen möglichen Kombinationen davon) mit dem Titel " Don't use @import " verglich . Dieser Titel spricht so ziemlich für sich.

Yahoo! Erwähnt es auch als eine ihrer Best Practices für die Leistung (von Steve Souders mitverfasst): Wählen <link>Sie @import

Mithilfe des <link>Tags können Sie außerdem "bevorzugte" und alternative Stylesheets definieren . Das kann man nicht machen @import.

Mercator
quelle
Danke - nette Hyperlinks - besonders der erste.
Faisal Vali
6

Mit dem Befehl import können Sie ein anderes CSS in eine CSS-Datei importieren, was mit dem Befehl link nicht möglich ist. Wirklich alte Browser können die Importfunktionen nicht (IE4, IE5 teilweise) verarbeiten. Darüber hinaus können einige Bibliotheken, die Ihr xhtml / html analysieren, den Import des Stylesheets nicht durchführen. Bitte beachten Sie, dass Ihr Import vor allen anderen CSS-Deklarationen erfolgen sollte.

Merkuro
quelle
6

Kein wirklicher Unterschied heute, wird aber @importvon älteren Browsern (Netscape 4 usw.) nicht korrekt behandelt, sodass der @importHack verwendet werden kann, um CSS 2-Regeln vor diesen alten Browsern zu verbergen.

Auch hier gibt es keinen Unterschied, es sei denn, Sie unterstützen wirklich alte Browser.

Wenn ich Sie wäre, würde ich die <link>Variante jedoch auf Ihren HTML-Seiten verwenden, da Sie damit beispielsweise den Medientyp (Druck, Bildschirm usw.) angeben können.

Zenazn
quelle
5
Das Angeben des Mediums ist auch für @ import-Anweisungen möglich.
Georg Schölly
"Ja wirklich?" Ich denke, Sie könnten einen Medientyp auf Ihr Style-Tag setzen, aber das scheint mir ein bisschen ein Hack zu sein.
Zenazn
5
Sie können zB "@import url (style.css) screen, print" ausführen, obwohl IE7 und früher die Medientypen nicht unterstützen.
Mercator
5

Mit der <link> -Anweisung können mehrere CSS geladen und asynchron interpretiert werden.

Die @ import-Direktive zwingt den Browser * zu warten, bis das importierte Skript inline in das übergeordnete Skript geladen wird, bevor es von der Engine korrekt verarbeitet werden kann, da es sich technisch gesehen nur um ein Skript handelt.

Viele CSS-Minimierungsskripte (und Sprachen wie less oder sass) verketten verknüpfte Skripte automatisch mit dem Hauptskript, da dies weniger Übertragungsaufwand verursacht.

* (abhängig vom Browser)

Affe-inago
quelle
2

Dieser Artikel kann hier von Nutzen sein: 4 Methoden zum Hinzufügen von CSS zu HTML: Verknüpfen, Einbetten, Inline und Importieren

Matthew James Taylor
quelle
1
Zitat: "Stellen wir uns vor, wir haben eine 1000-Seiten-Website und verlinken von jeder Seite der Website aus auf eine CSS-Datei. Stellen wir uns nun vor, wir möchten allen diesen Seiten eine zweite CSS-Datei hinzufügen. Wir könnten alle 1000 HTML-Dateien und bearbeiten Fügen Sie einen zweiten CSS-Link hinzu, oder ein viel besserer Weg wäre, die zweite CSS-Datei aus der ersten Datei zu importieren. Wir haben uns gerade viele Stunden Arbeit gespart! "
Casebash
1

Wenn ich die @ import-Regel verwende, wird im Allgemeinen ein Stylesheet in ein vorhandenes Stylesheet importiert (obwohl ich es zunächst nicht gerne mache). Aber um Ihre Frage zu beantworten: Nein, ich glaube nicht, dass es einen Unterschied gibt. Stellen Sie einfach sicher, dass die URL in doppelte Anführungszeichen gesetzt wird, um gültigem XHTML zu entsprechen.

Barry Gallagher
quelle
1

@import soll im Allgemeinen in einem externen Stylesheet verwendet werden und nicht wie in Ihrem Beispiel inline. Wenn Sie ein Stylesheet wirklich vor sehr alten Browsern verbergen möchten, können Sie dies als Hack verwenden, um zu verhindern, dass sie dieses Stylesheet verwenden. 

Insgesamt wird das <link>Tag schneller verarbeitet als die @ import-Regel (die für die CSS-Verarbeitungs-Engine anscheinend etwas langsam ist).

Gabriel Hurley
quelle
0

Microsoft Internet Explorer 9 (MSIE9) scheint @import nicht richtig zu handhaben. Beachten Sie diese Einträge aus meinem Apache-Protokoll (IP-Adresse versteckt, aber angegeben, whoisdass sie Microsoft selbst gehört): der Haupt-HTML-Code, der mit screen.css verknüpft ist

@import url("print.css") print;
@import url("speech.css") aural;

Ich werde jetzt zu linkElementen im HTML wechseln , da MSIE9 anscheinend zwei falsche Anforderungen an den Server ausgibt und 404 Fehler erhält, auf die ich verzichten könnte:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

Es gab danach ordnungsgemäße Anfragen für diese Dateien, aber wir können auf diese urlLogik "zuerst auf den Server schießen, danach analysieren " verzichten.

Silas S. Brown
quelle