zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Frage zum Buch Little boxes

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 24.10.2008, 14:26
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Vorausgesetzt, ihre Spezifität ist mindestens genauso hoch
Stimmt. Genau genommen:
Vorausgesetzt sie haben
  • denselben Ursprung (Browser-, Autoren- oder Benutzer-Stylesheet)
  • dieselbe Wichtigkeit (!important)
  • dieselbe Spezifität
Dann erst kommt die Reihenfolge des Auftretens dran
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 24.10.2008, 15:30
Benutzerbild von Magellan
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.02.2007
Ort: Zurzeit noch Meerane in Sachsen
Beiträge: 97
Magellan befindet sich auf einem aufstrebenden Ast
Standard

Nun ja, wenn ich eure antworten so lese, bewegen sich meine grauen Zellen und erinnern mich daran, das ich das doch alles vor gar nicht so langer zeit erst in den Büchern gelesen habe.

Alzheimer ist echt ne Plage. Aber dennoch danke für eure Bemühungen.

LG Manfred

Ps. Ich hab da noch ne Frage.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 24.10.2008, 21:43
Benutzerbild von Curtains
(Schlafen||Programmieren)
XHTMLforum-Mitglied
 
Registriert seit: 27.08.2008
Beiträge: 198
Curtains befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mantiz Beitrag anzeigen
HTML-Code:
<link rel="stylesheet" type="text/css" href="fundament.css" media="screen" />
Zitat:
Zitat von pmmueller Beitrag anzeigen
Code:
@import url(fundament.css);
Eine kleine Bemerkung am Rande
Es gibt zwei verschiedene Möglichkeiten, um CSS-Dateien einzubinden. Obwohl beide Varianten den gleichen Zweck erfüllen, werden sie im IE unterschiedlich behandelt.
Gemäss Yahoo's Performance Studie sollten Stylesheets zuoberst im HEAD eingebunden werden, damit ein progressives Rendern der Webseite möglich ist und der User den Eindruck gewinnt, die Seite würde sich schneller laden.
Würde man die Stylesheets weiter unten im BODY einfügen, dann wäre das Rendern blockiert, und der User müsste während des Ladens eine weisse Fläche betrachten.
Jetzt ist es so, dass im IE der @import-Befehl sich gleich verhält, wie ein <link> ganz unten im BODY.
Daher lautet der Leitsatz von Yahoo: "Choose <link> over @import"
Mit Zitat antworten
  #14 (permalink)  
Alt 25.10.2008, 04:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Curtains Beitrag anzeigen
Jetzt ist es so, dass im IE der @import-Befehl sichvgleich verhält, wie ein <link> ganz unten im BODY.
Könnte man denken, ist aber nicht so (auch Yahoo irrt da). Der Punkt dabei ist ein anderer: Flash of Unstyled Content (FOUC)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #15 (permalink)  
Alt 25.10.2008, 19:46
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Curtains Beitrag anzeigen
Daher lautet der Leitsatz von Yahoo: "Choose <link> over @import"
Allerdings gilt es zu berücksichtigen, dass die von dir zitierte @import-Regel in einem Stylesheet und daher die Alternative <link ...> nicht wirklich zur Verfügung steht

Yahoo schreibt übrigens den Großteil des CSS schon bei der Erzeugung der Seite in einen <style>-Block in den Head der Seite, weil das Laden eines externen Stylesheets auch wenn es per link eingebunden immer zu einer Verzögerung führt.

Allerdings ist das wirklich nur auf einer High-Performance Site wie Yahoo von Belang. Im Alltag der meisten Sites da draußen sind diese Zehntelsekunden höchstens von akademischem Interesse.

Grüße aus Groningen
Peter
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #16 (permalink)  
Alt 26.10.2008, 00:23
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Wenn es darum geht, daß die styles beim ersten Rendern zur Verfügung stehen,
sollten die a la Yahoo includet werden. @import oder <link> lösen doch eigentlich
nur eine weitere HTTP-Abfrage innerhalb derer die das HTML holt, aus ? Oder ?
Oder wird das irgendwie priorisiert ?
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #17 (permalink)  
Alt 26.10.2008, 10:14
Benutzerbild von Curtains
(Schlafen||Programmieren)
XHTMLforum-Mitglied
 
Registriert seit: 27.08.2008
Beiträge: 198
Curtains befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Könnte man denken, ist aber nicht so (auch Yahoo irrt da). Der Punkt dabei ist ein anderer: Flash of Unstyled Content (FOUC)
Danke für den Link. Dieses Aufblitzen ("FOUC") der unformatierten Webseite war mir nicht bekannt.
Möglicherweise bezieht sich Yahoo aber nicht auf diesen FOUC-Effekt, sondern auf ein allgemeines Verzögern (weisse Fläche) des Inhalts.
Das Ziel ist es, (Teil-)Inhalte so schnell wie möglich auszugeben, obwohl die Seite noch nicht fertig geladen ist. Dies erweckt den Eindruck einer kürzeren Ladezeit.

Zitat:
Zitat von pmmueller Beitrag anzeigen
Allerdings gilt es zu berücksichtigen, dass die von dir zitierte @import-Regel in einem Stylesheet und daher die Alternative <link ...> nicht wirklich zur Verfügung steht
Die Möglichkeit, @import-Regeln in externen Stylesheets einzusetzen, war mir gar nicht bewusst. Dadurch könnten theoretisch ganze Baumstrukturen eingebunden werden.
Bei meinen Webanwendungen habe ich schon seit längerem ein organisatorisches Problem mit den CSS-Dateien. Vielleicht könnte ich mit dieser Technik Ordnung schaffen.

Zitat:
Zitat von pmmueller Beitrag anzeigen
Allerdings ist das wirklich nur auf einer High-Performance Site wie Yahoo von Belang. Im Alltag der meisten Sites da draußen sind diese Zehntelsekunden höchstens von akademischem Interesse.
Vermutlich ist das direkte Einbetten des CSS sogar nachteilhaft für viele Seiten, da ein separates Cachen der Styles für den Browser nicht mehr möglich wäre. Inhalte verändern sich für gewöhnlich häufiger, als ihre Formatierung.
Nach Yahoo's Messungen besuchen 40-60% aller täglichen Besucher ihre Webseite mit einem leeren Cache.
Diese Einbettung des CSS (und auch JS) reduziert die Anzahl der HTTP Requests. Bei grossen Besucherzahlen wird wohl dadurch der Webserver deutlich entlastet.

Zitat:
Zitat von Scheppertreiber Beitrag anzeigen
@import oder <link> lösen doch eigentlich
nur eine weitere HTTP-Abfrage innerhalb derer die das HTML holt, aus ? Oder ?
Oder wird das irgendwie priorisiert ?
Genau. Bei leerem Browsercache ist jede eingebundene Komponente (CSS, Bilder, JS, ..) ein separater HTTP-Request.
Yahoo hat 34 "Best Practice" Regeln gesammelt, um die Performance von Webseiten zu erhöhen. Die Reduktion der Anzahl HTTP-Requests sehen sie als eine der wichtigsten Prioritäten an.
In 'yslow' (Firefox Plugin) ist die Regel "Make fewer HTTP requests" als Erste aufgelistet.
Mit Zitat antworten
  #18 (permalink)  
Alt 26.10.2008, 12:51
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Genau deswegen

Zitat:
Zitat von Curtains Beitrag anzeigen
Genau. Bei leerem Browsercache ist jede eingebundene Komponente (CSS, Bilder, JS, ..) ein separater HTTP-Request.
Yahoo hat 34 "Best Practice" Regeln gesammelt, um die Performance von Webseiten zu erhöhen. Die Reduktion der Anzahl HTTP-Requests sehen sie als eine der wichtigsten Prioritäten an.
In 'yslow' (Firefox Plugin) ist die Regel "Make fewer HTTP requests" als Erste aufgelistet.
würde ich davon

Zitat:
Zitat von Curtains Beitrag anzeigen
Die Möglichkeit, @import-Regeln in externen Stylesheets einzusetzen, war mir gar nicht bewusst. Dadurch könnten theoretisch ganze Baumstrukturen eingebunden werden.
Bei meinen Webanwendungen habe ich schon seit längerem ein organisatorisches Problem mit den CSS-Dateien. Vielleicht könnte ich mit dieser Technik Ordnung schaffen.
Abstand nehmen.

Letztes Jahr hatte ich damit mal ein wenig experimentiert, was mich dann dazu gebracht hat, dass ich (momentan) nur noch 1-3 CSS-Dateien verwende. Screen, falls nötig Screen-IE und evtl. Print.

Auch wenn die CSS-Dateien gecached werden, muss zwischendurch mal abgefragt werden, ob die Dateien im Cache aktuell sind, was ebenfalls einen HTTP-Request auslöst.

Letztes hat hier im Forum aber jmd. einen Link gepostet, wo mit Hilfe von PHP einzelne CSS-Dateien aneinander gehängt wurden und somit Übersichtlichkeit (mehrere CSS-Dateien) und wenige HTTP-Request möglich sind. Leider etwas Overhead durch PHP, aber der ist imo vernachlässigbar gering.

Selbst habe ich das aber (noch) nicht ausprobiert.
Mit Zitat antworten
  #19 (permalink)  
Alt 26.10.2008, 13:00
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

Das mit dem PHP ist recht Simpel.

Am Anfang header mit richtigen Mime Type und dann die Dateien Einbinden. Ggf. Kommentare und Tags entfernen und Los gehts.
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 26.10.2008, 13:04
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Und zusätzlich alle LF, CR, überflüssige Blanks ausmerzen. Spart auch noch mal (je nach Einrückungen) 10 bis 50 %.
Gegenüber der Übertragung (HTTP-Verbindung aufbauen, Routing durch die NSA, Finden des Hostst) fällt die Laufzeit
im Server nicht ins Gewicht.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Little Boxes Dieter Ressourcen 43 15.11.2011 04:05
Little Boxes Teil 1: Crashkurs zu HTML und CSS online lesen pmmueller Ressourcen 6 25.02.2010 16:17
Bescheid: Little Boxes - Teil 0 (Null) pmmueller Ressourcen 29 28.12.2008 16:54
Little Boxes - Varianten FloZen Offtopic 14 03.06.2008 12:10
Suche PHP Buch ala Little Boxes Zen5656 Serveradministration und serverseitige Scripte 2 17.02.2007 14:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:58 Uhr.