Verschiedene Websites enthalten ihre externen Cascading Style Sheets auf unterschiedliche Weise – entweder mithilfe des @import-Ansatzes oder durch einen Link zu dieser CSS-Datei. Was ist der Unterschied zwischen @import und link for CSS, und wie entscheiden Sie, welches für Sie besser ist?
Der Unterschied zwischen @import und Link
Das Verlinken ist die erste Methode, um ein externes Stylesheet in Ihre Webseiten einzubinden. Es soll Ihre Seite mit Ihrem Stylesheet verknüpfen. Es wird dem Kopf Ihres hinzugefügt HTML-Dokument.
Beim Importieren können Sie ein Stylesheet in ein anderes importieren. Dies unterscheidet sich geringfügig vom Verknüpfungsszenario, da Sie Stylesheets innerhalb eines verknüpften Stylesheets importieren können.
Aus Sicht der Standards gibt es keinen Unterschied zwischen dem Verknüpfen mit einem externen Stylesheet oder dem Importieren desselben. Beide Methoden sind richtig und funktionieren in den meisten Fällen gleich gut. Es gibt jedoch einige Gründe, warum Sie möglicherweise einen über den anderen verwenden möchten.
Warum @import verwenden?
Vor vielen Jahren wurde der häufigste Grund für die Verwendung von @import stattdessen (oder zusammen mit) angegeben, dass ältere Browser @import nicht erkannten, sodass Sie Stile vor ihnen verbergen konnten. Durch den Import Ihrer Stylesheets würden Sie diese im Wesentlichen für modernere, standardkonforme Browser verfügbar machen und sie gleichzeitig vor den ältere Browserversionen.
Eine weitere Verwendungsmöglichkeit für die @import-Methode besteht darin, mehrere Stylesheets auf einer Seite zu verwenden, während nur ein einzelner Link in den Kopf Ihres Dokuments eingefügt wird. Ein Unternehmen kann beispielsweise für jede Seite der Site ein globales Stylesheet haben, wobei Unterabschnitte zusätzliche Stile enthalten, die nur für diesen Unterabschnitt gelten. Durch Verknüpfen mit dem Stylesheet des Unterabschnitts und Importieren der globalen Stile oben in diesem Stil Sie müssen kein riesiges Stylesheet mit allen Stilen für die Site und alle anderen pflegen Unterabschnitt. Die einzige Voraussetzung ist, dass alle @import-Regeln vor den restlichen Stilregeln stehen müssen. Erbe kann immer noch ein Problem sein.
Warum Link verwenden?
Der Hauptgrund für die Verwendung verlinkter Stylesheets besteht darin, Ihren Kunden alternative Stylesheets zur Verfügung zu stellen. Browser wie Firefox, Safari und Opera unterstützen das Attribut rel="alternate stylesheet" und wenn eines verfügbar ist, können die Betrachter zwischen ihnen wechseln. Sie können auch einen JavaScript-Umschalter verwenden, um zwischen Stylesheets im IE zu wechseln – am häufigsten verwendet mit Zoom-Layouts aus Gründen der Barrierefreiheit.
Einer der Nachteile bei der Verwendung von @import besteht darin, dass Ihre Seiten beim Laden möglicherweise einen "Flash von unformatiertem Inhalt" anzeigen, wenn Sie einen sehr einfachen Kopf mit nur der @import-Regel haben. Eine einfache Lösung hierfür besteht darin, sicherzustellen, dass Sie mindestens ein zusätzliches Link- oder Skriptelement in Ihrem Kopf haben.
Was ist mit dem Medientyp?
Viele Autoren behaupten, dass Sie den Medientyp verwenden können, um Stylesheets vor älteren Browsern auszublenden. Oft wird diese Idee als Vorteil für die Verwendung von @import oder erwähnt, aber Sie können die Medien festlegen Geben Sie mit beiden Methoden ein, und ältere Browser, die Medientypen nicht unterstützen, werden sie auch nicht anzeigen Fall.
Welche Methode sollten Sie also verwenden?
Die meisten Entwickler verwenden heute Link und importieren dann Stylesheets in externe Stylesheets. Auf diese Weise haben Sie nur eine oder zwei Codezeilen, die Sie in Ihren HTML-Dokumenten anpassen müssen. Aber unter dem Strich liegt es an Ihnen. Wenn Sie sich mit @import wohler fühlen, dann machen Sie es! Beide Methoden sind standardkonform und wenn Sie nicht planen, wirklich alte Browser zu unterstützen, gibt es keinen triftigen Grund für die Verwendung.