Responsive CSS: richtige Aufteilung in CSS Dateien

[Marcus Lantz]

Moinsen, ich habe derzeit eine Webseite, die schon responsive ist. Allerdings meckert PageSpeed Insights, dass mein Aufbau nicht optimal sei, da nach dem Laden das Aussehen noch einmal verändert wird. Dabei werden folgende CSS Dateien eingebunden:

1. allgemeine CSS für Desktop-Version
2. Änderung/Anpassung des allgemeinen CSS für Tabelts
3. Anpassung für Handys

Dass Google da jetzt Probleme macht, macht für mich auch Sinn. Ich frage mich nur, wie ich alles sinnvoll aufteilen soll. Mir fallen da folgende Varianten ein:

• Für jede Webseite-Version eine eigene CSS-Datei,
• Für jede Version eine eigene Datei plus eine CSS Datei für alle Versionen mit allgemeinen Definitionen

[Nachtrag] Wie würde ich das mit den Media-Queries machen, max-width 480, max-width 1000 und min-width? Das Problem sehe ich dabei in einem Fall-Back für Geräte, die kein CSS 3 können. Hier müsste ja wieder ein extra Stylesheet eingebunden werden, wobei wir dann wieder bei dem Problem von PageSpeed Insights wären, oder?

[MrMurphy1]

Hallo,

deine Vorgehensweise ist grundsätzlich nicht sinnvoll.

Es gibt keine passenden Breitenangaben für Tablets und Handys.

Deshalb sollten die Breitenangaben der Media Queries sich nach dem Inhalt richten der Container richten.

Gruss

MrMurphy

[Auge]

Hallo

ich habe derzeit eine Webseite, die schon responsive ist. Allerdings meckert PageSpeed Insights, dass mein Aufbau nicht optimal sei, da nach dem Laden das Aussehen noch einmal verändert wird. Dabei werden folgende CSS Dateien eingebunden:

1. allgemeine CSS für Desktop-Version
2. Änderung/Anpassung des allgemeinen CSS für Tabelts
3. Anpassung für Handys

Der erste Punkt ist die Anzahl der zu ladenen Dateien. Für jede muss ein Request erfolgen, was bei zunehmender Anzahl auf die Ladezeit geht. Bedenke dabei, dass zur Seite und diesen drei Dateien noch JS-Ressourcen und Bilder dazukommen (können). Eine CSS-Datei für alle Regeln spart im konkreten Fall zwei Requests ein.

Der zweite Punkt ist die Reihenfolge der Regeln, gerade im Zusammenhang mit den im folgenden erwähnten Media Queries. Es ist besser zuerst alle Regeln, die immer gelten, zu notieren und dann von schmalen zu breiteren Viewports zu gehen und dabei unpassende Regeln zu überschreiben.

Dass Google da jetzt Probleme macht, macht für mich auch Sinn.

Google macht da keine Probleme, sondern gibt Hinweise auf Verbesserungspotential, ohne dabei auf die Umstände im speziellen Fall zu achten. Du bist nicht verpflichtet, jedem der Hinweise nachzukommen, nur weil sie erwähnt werden.

Ich frage mich nur, wie ich alles sinnvoll aufteilen soll. Mir fallen da folgende Varianten ein:

• Für jede Webseite-Version eine eigene CSS-Datei,
• Für jede Version eine eigene Datei plus eine CSS Datei für alle Versionen mit allgemeinen Definitionen

Eine Seite mit einem CSS-Regelwerk in einer Datei ist auch noch im Angebot. Im Hinblick auf die Sache mit der Anzahl der Requests ist diese Variante zu bevorzugen.

[Nachtrag] Wie würde ich das mit den Media-Queries machen, max-width 480, max-width 1000 und min-width?

Da du eh nicht wissen kannst, wie die vielen konkreten Darstellungen der Geräte aussehen, solltest du in dieser Hinsicht die Einheit Pixel vergessen. Benutze stattdessen EM für die Minimalbreitenfestlegung.

Das Problem sehe ich dabei in einem Fall-Back für Geräte, die kein CSS 3 können. Hier müsste ja wieder ein extra Stylesheet eingebunden werden, wobei wir dann wieder bei dem Problem von PageSpeed Insights wären, oder?

Welche Browser meinst du? Selbst wenn dir ein solcher Browser begegnen sollte, geht der stumpf alle Regeln durch und benutzt die letzte gefundene, also die für Desktop-Browser, was mit an Sicherheit grenzender Wahrscheinlichkeit passen sollte.

Tschö, Auge

[Marcus Lantz]

Hi, alles klar, danke für die ausführliche Antwort.

[Vollzitat]