Sidebar
ein-/ausblenden

Link vs. @import

Die Implementierung von Stylesheets kann man mit unterschiedlichen Anweisungen machen und ich bekomme immer wieder die Frage, warum ich mich für <link entschieden habe und nicht via @import die Stylesheets einbinde.
Gerade in meinem Basis-Theme für WordPress scheint das aufzufallen und diverse Nutzer zu stören.

Der klare Umschwung ist bei mir nach dem Lesen des Buches „High Performance Websites“ von Steve Souders, Chief Performance Yahoo! bei Yahoo!, gefallen und ich löse nun alles per <link.
Nun ist mir aber die öffentlich zugängliche Seite des Buchautors wieder unter gekommen und dort publiziert Steve einen Beitrag zum Thema. Diesen Link möchte ich damit einfach mal als Begründung, Rechtfertigung oder Lesetipp hier präsentieren.

Die klare Aussage: Kein @import nutzen.

Spannender Artikel, der sicher bei dem einen oder anderen Veränderungen hervorruft. Daher der Tipp, den Beitrag don’t use @import zum Buch zu lesen.

Artikel #934, 9. April 2009 · CSS, xHTML, JS, Webküche · 19 Kommentare
Tags: CSS, Linktipp, Performance, StyleSheet, Webdeveloper
Kommentar-Feed zum Artikel · Kommentare und Pings sind nicht erlaubt. · Kurzlink

19 Kommentare zu „Link vs. @import“

1
Kommentar von mandfred
9. April 2009 um 22:36
gut dass ich weder das eine noch das andere kenne, geschweigedenn verstehe, worum es da geht
2
Kommentar von flöschen
9. April 2009 um 22:46
Persönlich nutze ich immer LINK, denn wer auch einmal eine Stylesheet-Einbindung per PHP realisiert, ist dann einfacher am Ziel.

Ausserdem verursacht @import mehr Code im HEAD-Tag, was ich übersichtsmässig doof finde.
3
Kommentar von Matti
9. April 2009 um 23:24
Ich weiß ja nicht ob Du gerade an deinem Blogdesign arbeitest aber falls nicht und Du es noch nicht bemerkt hast: Das Design ist komplett weg und die Seite wird nur noch als Text angezeigt. Jedenfalls bei mir. Im Firefox und auch im IE...
4
Kommentar von Matti
9. April 2009 um 23:27
Ah, vergiss meinen vorigen Kommentar. Das kommt davon wenn man über den Feed quer einsteigt... Habs eben auf der Startseite gesehen Sorry
5
Kommentar von Aro
10. April 2009 um 02:16
Schade, nur wieder was für Leute mit guten Englisch-Kenntnissen.
6
Kommentar von Ralf
10. April 2009 um 14:40
Pseudowissenschaft par excellence. Der Autor gibt sich alle Mühe zu beweisen wie schlecht performant und wie fehleranfällig das Einbinden von Stylesheets mittels @import ist. Kann den Gegenbeweis, dass LINK besser ist, jedoch nicht antreten.

Grundsätzlich fehlen die Scripte die verwendet wurden um das Ergebnis für seine eigene Arbeit nachzuprüfen. Zusätzlich spricht der Autor immer nur von "IE" und "other browsers". Welche Browser sind denn diese "other browser"?
Vor allem der aufwändige Test um zu zeigen das 8 mal @import so viel Zeit benötigt, hätte dringend eine Überprüfung mit 8 mal Link benötigt. Das gleiche gilt für das Laden von JavaScript und @import. Der Fehler kann genauso bei der Methode mit LINK auftreten. Wenn das JavaScript startet bevor alle Stylesheets geladen sind, kann es zu Fehlern kommen. Egal ob @import oder LINK. Darüber hinaus ist es nicht nachvollziehbar warum der verwendete Browser (IE?) erst das JavaScript geladen hatte anstatt die Stylesheets. Dies dürfte eine Macke des verwendeten Browsers sein. Intern scheint das Laden von JS eine höhere Priorität zu bekommen als das Laden von Stylesheets. An dem Punkt wäre es sehr interessant zu sehen ob das JavaScript auch dann vor den Stylesheets geladen wird, wenn es am Ende des HTML-Dokumentes eingebunden wird.

8 mal ein Stylesheet per LINK einbinden bedeutet fast 4 mal so viele Zeichen zu übermitteln. In Anbetracht der Bandbreite ist die LINK-Methode also wesentlich schlechter. Werden alle Stylesheets mittels @import eingebunden, dürfte wesentlich weniger Overhead erzeugt werden als wenn sie mittels LINK eingebunden werden. Lustigerweise zeigt der Autor genau das im ersten Beispiel: "always using @import is okay"

Letzen Endes dürfte das Ergebnis lediglich auf den IE übertragbar sein. Es ist stark abhängig davon wie der jeweilige Browser die Stylesheets und das HTML-Dokument verarbeitet. Ist z.B. ein Browser in der Lage 8 parallele Verbindungen gleichzeitig aufzubauen, kann der Autor seine Erkenntnisse gleich in die Tonne kloppen. Denn dann dürfte es unerheblich sein ob man @import oder LINK benutzt. Alle 8 Stylesheets werden gleichzeitig geladen.

Das Resümee dieses Artikels dürfte also nicht lauten "@import vs. LINK", sondern "Niemals @import und Link vermischen. Entweder oder".
Für mich lässt der Artikel wesentlich mehr Fragen offen als das er beantwortet. Leider kann man die Ergebnisse nicht nachvollziehen da man weder die Scripte/Stylesheets kennt, noch die verwendeten Werkzeuge zur Messung. Hier würde ich mir mehr wissenschaftliche Standards wünschen, bei denen zur Veröffentlichung von Ergebnissen immer dazu gehört das man auch die Testumgebung und die Werkzeuge nennt. So ist dies alles reines Behauptung, unterstrichen von einem bekannten Namen eines Web-Anbieters.
7
Kommentar von funkygog
10. April 2009 um 18:19
Wo ist denn eigentlich der bessere Platz für eine Verlinkung? Im Header oder in der Style.css?

Habe das jetzt so im Header eingebunden:
<link rel='stylesheet' href="<?php bloginfo('stylesheet_directory'); ?>/plugz.css" >
eigentlich hätte ich eine schließende Klammer am Ende erwartet /> aber es funktioniert.
8
Kommentar von Frank Bültge
10. April 2009 um 21:08
@funkydog: Der Syntax ist ok, damit aber nicht valide in xhtml, daher gehört das abschließende Slash dazu.

@Ralf: wie immer von dir, kritisch auseinander genommen. Ich für meinen Teil habe es auch so verstanden, aber ich kann nicht entscheiden, was für ein Browser der Nutzer hat und daher ist vorerst Link besser; vermischen ist in jedem Fall tabu, keine Frage, schon vom Markup her.
9
Kommentar von funkygog
10. April 2009 um 21:27
Danke Frank für die Antwort. Hatte mir das mit schließenden Slash schon gedacht, bin nur dem Beispiel von Steve Souders gefolgt.
Kannst Du noch etwas zu der besten Platzierung sagen header.php oder style.css zum Einbinden von weiteren Styling-Angaben.
10
Kommentar von Wishu
11. April 2009 um 14:38
Ich habe eigentlich schon immer link verwendet. Bisher konnte ich mich nie mit import im HTML anfreunden. Auch weil ich meist nur ein Stylesheet benutze. Und sollte ich mal der Übersichtlichkeit halber mehrere benutzen importiere ich sie meist im Hauptstylesheet.
11
Kommentar von Paul
12. April 2009 um 16:48
Ich hab auch schon immer Link verwendet. Damals lernte es mich so mein Lehrer.
12
Kommentar von Monika
12. April 2009 um 21:53
die import Methode im html header war früher ein sehr beliebter Browserhack bei WebDesignern - ist jedoch heute wirklich nicht mehr nötig - außer es surfen noch unendlich viele mit Netscape 4 , Amaya oder IE 4

lg
13
Kommentar von zrche zrce
13. April 2009 um 11:58
wieder was gelernt... und das am ostermontag. vielen dank!
14
Kommentar von Das A-Team
13. April 2009 um 20:53
Vor dem gleichen Problem habe ich auch gestanden. Da ich selbst Stylesheets benutze und das ganze Layout darauf beruht, ist es eine elementare Frage gewesen. Letztendlich habe ich mich für <link entschieden, da es eine besseren Eindruck machte und ich keine Probleme hatte. @import habe ich daher nicht ausprobiert.
15
Kommentar von Dieter
14. April 2009 um 12:03
Die Schlussfolgerung aus Performancegründen niemals link und @import gemeinsam für eine Webseite zu verwenden, ist nachvollziehbar.

Allerdings nutze ich auf meiner privaten Website dieter-welzel.de bisher @import als Browserweiche für veraltete Browser (IE 4, NS 4) und versorge diese zudem mit einem rudimentären CSS per link. Geschwindigkeitsprobleme habe ich dort bislang nicht feststellen können, verwende jedoch hauptsächlich den Firefox.
16
Kommentar von naden
14. April 2009 um 12:51
Zu Performance Tipps möchte ich noch die folgende Seite von Yahoo empfehlen, sowie deren Firebug Plugins YSlow.
17
Kommentar von Viktor
16. April 2009 um 16:40
Ich habe bis jetzt oft @import verwendet. Nun weiß ich, dass link auch eine gute Alternative ist.
18
Kommentar von Adrian
15. September 2009 um 18:46
Die klare Aussage: Kein @import nutzen.

warum fügst du dann in deinem Basic-Theme das Layout style Sheet mit @import ein????
19
Kommentar von Frank Bültge
16. September 2009 um 10:47
@Adrian: das WP Basis Theme ist eine Grundlage, kein Theme was nur CSS benötigt. Der Hintergrund für die @-Regel ist hier, dass ich damit die Struktur sauber und übersichtlich halten kann, ohne die header.php zu ändern. Unter anderem hat das Theme ja ein Beispiel-CSS, was eine Ausgabe ermöglicht und in einem neuen Theme benötigt man nur die style.css im Root. Eventuell denke ich darüber nochmal nach, aber dazu müsste ich eben in der header.php viel erweitern, was dann in der Nutzung wieder raus muss.