Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Anzeige
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.
Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.
händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.
Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.
xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>
Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.
E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.
Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.
Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.
Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.
bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.
Das Weblog wird angetrieben von WordPress und aktuell gibt es 886 Beiträge, 16217 Kommentare in 14 Kategorien und 448 Tags.
Das Blog wird liebevoll mit xHTML & CSS in Handarbeit gestaltet.
Design und Code ist unter Copyright
© 2001 - 2010 bueltge.de [by:ltge.de]
9. April 2009 um 22:36
gut dass ich weder das eine noch das andere kenne, geschweigedenn verstehe, worum es da geht
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.
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...
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
10. April 2009 um 02:16
Schade, nur wieder was für Leute mit guten Englisch-Kenntnissen.
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.
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.
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.
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.
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.
12. April 2009 um 16:48
Ich hab auch schon immer Link verwendet. Damals lernte es mich so mein Lehrer.
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. April 2009 um 11:58
wieder was gelernt... und das am ostermontag. vielen dank!
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.
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.
14. April 2009 um 12:51
Zu Performance Tipps möchte ich noch die folgende Seite von Yahoo empfehlen, sowie deren Firebug Plugins YSlow.
16. April 2009 um 16:40
Ich habe bis jetzt oft @import verwendet. Nun weiß ich, dass link auch eine gute Alternative ist.
15. September 2009 um 18:46
warum fügst du dann in deinem Basic-Theme das Layout style Sheet mit @import ein????
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.