CSS einbinden - Anfänger frage

G.P.

Legendäres Mitglied
In eine seite binde ich 2 CSS Dateien wie folgt ein:

CODE <link rel='stylesheet' type="text/css" media="all" href='$output_url[domain]/css/datei1.css?ver=1.2'/>
<link rel='stylesheet' type="text/css" media="all" href='$output_url[domain]/css/datei2.css'/>


Um die Anzahl der aufgerufenen Dateien zu reduzieren, möchte ich beide Dateien in einer Zusammenfassen.
Daher habe ich den Inhalt von datei2.css NACH dem Inhalt der datei1.css in eingefüht und nur noch datei1.css aufgerufen

Rufe ich jetzt nur die neu erstellte CSS auf, wird mein Design total zerhauen - mit 2 speraten Dateien (identischer Inhalt) funktioniert alles einwandfrei.

Hat jemand eine Ahnung woran das liegen kann?
Gibt es irgendwelche CSS Codes die nur funktionieren wen sie in einem seperaten Files sind?
 
Hallo, wie Du geschildert hast, sollte es funktionieren, das einzigste was mir auffällt bei Deiner code oben ist dass ein Teil der Anführungsstriche "doppelt-Anführungsstriche" sind, aber der href dann in 'single-Anführungsstrichen' steht. Versuch mal alles, auch den href mit: " zu schreiben.
 
" und ' sind inmho hier equivalent. Aber Versuch schadet nie ;-).

QUOTE Gibt es irgendwelche CSS Codes die nur funktionieren wen sie in einem seperaten Files sind?


Nein. Würde mich wundern. Aenderst Du Designvorgaben aus File 1 in File 2 um? Nutzt Du inherit? Oder initial? Vielleicht hast Du ein Problem mit der Vererbung? Tritt der Fehler in jedem Marktgängigen Browser auf? Etc. zuviele Fragen.

Na ja:
wie gross sind die Files?

Wenn Du File 1 und File 2 mal beibehältst und dann von File 2 immer nur eine Zeile in File 1 rüberkopierst kannst Du ja parsen, ab WANN der Fehler auftritt.


QUOTE Um die Anzahl der aufgerufenen Dateien zu reduzieren, möchte ich beide Dateien in einer Zusammenfassen.

Ja. Wobei das nur die neuen Besucher erfreut. Bei wiederholten Besuch/Seitenaufruf sind CSS-Dateien ja zwischengespeichert.
 
Hoi Zämma

Ich habe seid 2 Jahren definitiv aufgehört die CSS in einem separaten Files zu versorgen.
Die 4 - 5 Kilo mehr oder weniger binde ich direkt in meinen Seiten ein, denn nicht jeder auf der Welt kann die CSS sauber abrufen. Es hängt vom PC, vom Provider des Users, vom Server der Webseite und vom Browser ab, ob man die CSS sauber herunterladen kann. Das sind eindeutig zu viele Unsicherheiten.

Ich verstehe @G.P. , dass er die CSS in nur einem File will, aber wenns funktioniert, so empfehle ich die CSS im Header der Webseite einzubinden.

Von hier aus, in den Philippinen, vermag ich fast keine deutsche News-Seite sauber abzurufen. Immer wieder fehlen die CSS. Einfach nur Ärgerlich. Und das bei vielen Profi-News-Seiten.
ohmy.gif
 
Für Dein Philippinen-Problem gäbe es eine verdammt einfache Lösung:

die statische CSS-Datei auf einem CDN hosten. Punkt. Dann lädt die CSS unter Umständen schneller als der eigentliche Content. Muss halt jeder selber wissen, wie "international" er seinen Content ausrichten will. Ich sähe jetzt keine Priorität irgendeinem Auslandschweizer eine Deutschsprachige Webseite stabil auszuliefern. Zumal ich persönlich nicht verantwortlich für die dortigen Netze bin
tongue.gif


Wie schnell eine Seite aufgebaut wird hängt z.B. auch davon ab, wo die externe CSS im Code eingebaut wird (zuerst), ob man Bilder und Elemente mit konkreten Höhen und Breiten-Angaben versieht etc.

Na ja: eine überladene Nachrichten-Seite sollte inmho nicht als Referenz dienen. Da könnten Fehler enthalten sein, die ein Neu-Rendering erzwingen.

Ob CSS in den Quelltext geschrieben werden sollte:
ja warum nicht. Je länger das ist, desto mehr Vorteil hat halt die externe CSS, weil die gechached wird. Wobei zwei externe CSS-Dateien nicht sinnvoll sind, da das beim Erstaufruf Verzögerungen verursacht und im schlimmsten Fall die zweite CSS im hintenansteht (10 Files parallel). Man kann sogar kleine Bilder (Base64) direkt in den Code schreiben.

Hier noch ein Tool, um Geschwindigkeiten zu messen: http://www.dotcom-monitor.com/WebTools/web...speed-test.aspx
 
QUOTE (Peter Schneider @ Mo 23.06.2014, 11:59) Für Dein Philippinen-Problem gäbe es eine verdammt einfache Lösung:

die statische CSS-Datei auf einem CDN hosten. Punkt. Dann lädt die CSS unter Umständen schneller als der eigentliche Content. Muss halt jeder selber wissen, wie "international" er seinen Content ausrichten will. Ich sähe jetzt keine Priorität irgendeinem Auslandschweizer eine Deutschsprachige Webseite stabil auszuliefern.
.............
Ob CSS in den Quelltext geschrieben werden sollte:
ja warum nicht. Je länger das ist, desto mehr Vorteil hat halt die externe CSS, weil die gechached wird. Wobei zwei externe CSS-Dateien nicht sinnvoll sind, da das beim Erstaufruf Verzögerungen verursacht und im schlimmsten Fall die zweite CSS im hintenansteht (10 Files parallel).

Hoi Peter

Zum grössten Teil hast Du vollkommen recht. Aber mein Problem entsteht als USER von deutschen Newsseiten. Nicht als Webmaster von schweizerischen Webseiten.

D.h. ICH sehe den Grossteil der deutschen Webseiten hier nur chaotisch, weil die CSS fehlen. Meistens sind es ein halbes Dutzend CSS-Dateien die fehlen .....
sad.gif


Hingegen meine Seiten, in Italienisch, Deutsch, Spanisch und englisch sind auf schweizerischen Servern.

Beispiel: Von Guatemala, dass ein bitterarmes Land ist und schlechte Server hat, verdiene ich ca. 30 Dollar im Monat. Da liefere ich denen gerne die "nur" 2 Kilo CSS im Header der Webseite. So bin ich mir sicher, dass alles ankommt.

In meinen deutschsprachigen und italienischen Webseiten arbeite ich sowieso mit HTML 4.01. Da kann ich noch mit TABLE die genauen Grenzen setzen und auch ältere Browser verarbeiten dies sehr gut. So kann ich die CSS aufs Nötigste kürzen und komme mit nur gerade 1 Kilo aus. Das beschleunigt das Laden enorm.

Muss Dir aber trotzdem recht geben wenn man mit längeren CSS innerhalb des deutschsprachigen Raumes arbeiten will, und zudem eventuelle Nachfolgeseiten die gleichen CSS gebrauchen. Da lohnt es sich diese auszulagern.
 
QUOTE (G.P. @ Do 19.06.2014, 17:36) In eine seite binde ich 2 CSS Dateien wie folgt ein:


CODE <link rel='stylesheet' type="text/css" media="all" href='$output_url[domain]/css/datei1.css?ver=1.2'/>
<link rel='stylesheet' type="text/css" media="all" href='$output_url[domain]/css/datei2.css'/>


Um die Anzahl der aufgerufenen Dateien zu reduzieren, möchte ich beide Dateien in einer Zusammenfassen.
Daher habe ich den Inhalt von datei2.css NACH dem Inhalt der datei1.css in eingefüht und nur noch datei1.css aufgerufen

Rufe ich jetzt nur die neu erstellte CSS auf, wird mein Design total zerhauen - mit 2 speraten Dateien (identischer Inhalt) funktioniert alles einwandfrei.

Hat jemand eine Ahnung woran das liegen kann?
Gibt es irgendwelche CSS Codes die nur funktionieren wen sie in einem seperaten Files sind?

wahrscheinlich werden vererbte styles nicht richtig gezogen bzw überschrieben.

sowas habe ich bislang auch nur mühselig mit nem dev tool machen können:

bei 2 files sollte es aber nicht so dringlich sein aber solltest du irgendwann mehr zeit haben würde ich die styles in einer datei zusammenfassen:
- backup ziehen und lokal einrichten
- mit chrome devtool beide seiten vergleichen bzw dessen styles und in einer file zusammenfassen (wenn du glück hast sind es ja nicht so viele stellen an denen du anpacken musst)
- zusammengefasst css file hochladen und fertig

ist aber wirklcih umständlich und langatmig.... hat mir damals keinen spaß gemacht aber bei mir gab es einfach zu viele styles die vererbt worden sind.

gruß
Sheine

 
Zurück
Oben