Optimierungen mit CSS media queries

Optimierungen mit CSS media queries

Über die berühmten CSS Media Queries haben wir ja schon viel gehört und gelesen. Mitunter werden sie unnütz für das mobile Web angesehen und ohne eine nennenswerte Zusammenarbeit mit Javascript wird man wohl auch nicht auskommen. Damit wissen wir ja schon einiges. Hier im Blog sind sie seit den letzten kosmetischen Korrekturen im Einsatz (einfach mal die Fenstergröße anpassen oder Codecandies auf dem Kindle 3 aufrufen), sehr schön kann man das auch bei den iAs anschauen.

Was Jason Grigsby vor allem kritisiert ist, dass man um eine Anpassung bspw. für mobile Clients zu erreichen, mehr anstatt weniger Code hinzufügt:

The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution.

Das wäre natürlich kontraproduktiv und ist für große Websites, die sowieso schon immer mit ihrem Gewicht zu kämpfen haben auch tatsächlich keine Alternative. Zudem hat man ja auch keine Unterscheidung für die ausgelieferten Medien, bspw. Bilder. Große hochaufgelöste Bilder braucht man bspw. für das iPad, aber nicht für das kleine Display eines Mobiltelefons. Smartphones wie das iPhone4 fallen aus dieser Kritik aber eher heraus, lechzt es doch nach noch höher aufgelösten Bildern als der Desktopwebbrowser. Hier müsste dann je nach Nutzungssituation unterschieden werden.

Allen Lösungen gemein ist im Moment, dass die mit media queries spezialisierten Seiten, nur wenige kleine Effekte anbieten, bspw. schmalere Spalten, verkleinerte Bilder etc. Was aber, wenn die Seiten für das iPad und später auch das iPhone wirklich komplett anders aussehen sollen? Versucht man sämtlichen CSS-Code zu überschreiben, landet man schnell in der Codinghölle und das Gewicht der Seite explodiert. Ich habe mich nun gefragt, mal in Bezug auf das iPad (und andere Tablets) gesehen, deren Nutzung ich weniger als mobile Nutzung betrachte, wie man mit den media queries nun zwar genug, aber eben möglichst wenig CSS-Daten an die Browser schicken kann. Mein derzeitiger Lösungsansatz sieht so aus siehe Update am Ende des Artikels:

[html]<!–[if IE]>
<link rel="stylesheet" href="css/base.css" type="text/css" />
<![endif]–>
<link media="only screen and (min-device-width: 769px)" rel="stylesheet" href="css/base.css" type="text/css" />
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" />[/html]

Zur Erklärung: Zunächst mal werden die IEs bedient, die derzeitig nicht in der Lage sind media queries auszuwerten. Der bekommt ganz normal sein CSS geliefert. Die restlichen Stylesheets ignoriert ein IE dann geflissentlich. Alle anderen Browser widerum ignorieren die conditional comments und falls sie eine min-device-width größer 769px haben, laden und zeigen sie das normale base.css. Hernach folgt dann das CSS für das iPad, mit einem Query auf seine Werte abgestimmt.

Soweit zur Theorie. In der Praxis scheint das so zu funktionieren. Lädt man viele verschiedene CSSse, kann das allerdings schnell unübersichtlich werden, da alle nichtmobilen CSSse doppelt aufgeführt werden müssen.

Anregungen und andere Ideen sind mehr als willkommen.

Update: Zwei Tatsachen haben inzwischen dazu geführt, dass ich selbst nicht mehr so überzeugt von dieser Lösung bin: 1. werden ob mit media queries oder ohne immer alle Dateien vom Browser gezogen. Man spart aber ggf. durch weniger CSS-Überschreiben, je nach Art und Größe der Styles; 2. wichtige Info: schon Firefox 3.0 kann keine CSS media queries.

14 Gedanken zu „Optimierungen mit CSS media queries

  1. Media-Queries sind wie IE6 Hacks. Wessen Leserschaft eine gewisse Anzahl IE6 übersteigt, wird – wenn er nicht Google ist – anpassen. Jetzt für einen Bruchteil Tablet/Smarthphone Nutzer, komplette Stylesheets großer Seiten parallel zu verwalten, ist Zeitverschwendung. Die Zukunft ist nicht jetzt und wer sauber arbeitet, der muss nicht für kleine Displays optimieren und bekommt trotzdem ein relativ gutes Ergebnis auf Tablets und Smartphones. Der Wasserkopf bei Media-Queries rechtfertigt meiner Meinung nach den Aufwand noch nicht. Um es zynisch zu formulieren: wer möchte zusätzlichen Aufwand, um ein, im Vergleich zur Desktop Variante, schlechteres Ergebnis zu bekommen? Ganz, ganz wenige Fanatiker.

  2. Hallo.

    > Lädt man viele verschiedene CSSse, kann das
    > allerdings schnell unübersichtlich werden, da alle
    > nichtmobilen CSSse doppelt aufgeführt werden
    > müssen.

    Diese Aussage verstehe ich nicht ganz. Welche nichtmobilene CSS müssen denn doppelt aufgeführt werden? Die Standards, die eigentlich, so lange unverändert, für alle Formate gelten, werden doch in der base.css definiert?

    Welche CSS brauchen wir denn?
    – Anpassungen für IE
    – max-device-width: 480px
    – min-device-widht: 768px & max-device-width: 1024
    – min-device-width: 769px

    Das ist doch noch recht übersichtlich, finde ich. Sicherlich kann man jetzt noch ein iPhone 4 CSS erstellen. Jedoch lassen sich die notwendigen Bilder in die vorhandenen CSS-Files einbinden, lediglich die Pixel-Ratio (x2) wird noch abgefragt. Aber das geht doch in den vorhandenen Dateien? Oder übersehe ich hier etwas?

    lg
    H.

  3. @Holger: bei meiner Lösung oben wird ja das normale CSS für das iPad unsichtbar gemacht (Zeile 4). Dadurch wird es aber auch für die IEs unsichtbar, deswegen kriegt es nochmal das normale CSS via conditional comment (1-3). Hat man mehrere CSS die nicht für iPad etc. sind, sondern sozusagen normal, muss man alle zweimal aufführen, erst in CCs und dann mit Query dran.

    @chris ich sag‘ mal: Kunden dafür hab ich einige an der Hand. Und ein Design, das an die Umstände eines Tablets angepasst ist, muss nicht schlechter sein. Man kann die Site sehr in Richtung Webapp vorantreiben und spezielle Fähigkeiten der Tablets nutzen. Also so abwegig sehe ich das nicht. Und: der Verwaltungsaufwand von heute ist mein Arbeitsplatz, schon morgen. 😉

  4. @Nico: dann wäre es doch aber sinnvoll die base.css für alle sichtbar zu machen. Man könnte in die base.css durch import Regeln entsprechend notwendige CSS Erweiterungen (entsprechend den Displayabmessungen) hinzufügen. Dann sehen alle die base.css und haben trotzdem ihre notwendigen Erweiterungen?!

  5. So könnte das dann aussehen:

    Furthermore, we’re not limited to incorporating media queries in our links. We can include them in our CSS either as part of a @media rule:

    @media screen and (max-device-width: 480px) {
    .column {
    float: none;
    }
    }
    Or as part of an @import directive:

    @import url(„shetland.css“) screen and (max-device-width: 480px);

    Quelle & Link zu entsprechender Einbindung:
    http://www.alistapart.com/articles/responsive-web-design/

  6. Was aber das Problem nicht löst, das dann alles CSS runtergeladen werden müsste auf den mobile Clients, denn es steckt ja in einem (dann sehr großen CSS).

  7. So wie Holger/ALA würde ich es auch machen, ähnliches hattest du schon mal mit print in einem Multistyle.css erwähnt. Zusammen mit erweiterten Conditional body comments könnte man schon viel auffangen und hätte nur ein CSS.
    Zu Ende gedacht und praktiziert habe ich das aber nicht.

  8. Zu Ende gedacht und praktiziert habe ich das aber nicht.
    Äh, genau, siehe dein Kommentar.

  9. Was mir noch einfällt:
    Den Server filtern lassen (über User Agents) und entsprechende Redirects nutzen. Dadurch dann angepasste index.htmls nutzen können. Diese lassen dann nur notwendige Stylesheets laden.
    Letztendlich ein ‚einfacher‘ Redirect auf die mobile Seite. Das ist dann zwar nicht mehr so fluides/responsives Design, aber verringert die Dateigrößen? Richtig?

  10. Ich weiß gar nicht was ihr alle habt. Ich habe einfach 20 konkretere Definitionen in einem CSS Media-Query drin die dafür sorgen, dass Bilder und Texte in einer Breite von 620px bleiben wenn es Hochkant dargestellt wird. So sieht das Blog super auf dem Kindle 3 aus. Arbeit: Ca. 15 Minuten.

    Klar, das ist schon ziemlich freakig und wenn ich nicht jmd. kennen würde, der einen Kindle 3 hat würde ich es auch nicht machen. (Blog)-Seiten speziell für z.B. das Ipad anzupassen halte ich auch für Käse weil es bald zig verschiedene Screenreader mit unterschiedlichen Auflösungen geben wird. Wenn es die 20 Zeilen übersteigt, dass es nutzbar aussieht muss sich was auf Seiten der Pads tun und nicht bei uns im Code.

    Sonst wird es später echt wie die IE6 Hacks

  11. Oder hat mit einer PHP Funktion filtern. Da gibts ja dann viele Möglichkeiten.

    BTW: Warum kann ich meinen Kommentar nicht editieren? 🙁

  12. Ach, cool! Danke für die Überlegungen, genau darüber mache ich mir gerade Gedanken. Werd wohl Nicos Lösung testen 🙂

  13. zugegeben: media queries sind eine feine sache, die ich auch verfolge und nutzen werde.
    (momentan stellt sich mir das bzgl. ressourcen so wie bei dir gelöst dar, nico!)

    aber momentan nicht breitentauglich.
    lösungen wie hier skizziert wie hier skizziert fürs ipad halte ich für detaillösungen.

    wenn das erstmal w3-standard wird verbessert sich die browser-verteilung und dann kann man mal über einen wrapper nachdenken … aber bis dahin dauert’s noch ein wenig (ist für den ie9 eine media-queries-unterstützung angekündigt?) und dann muss das thema wieder aufn tisch.
    (imo sollte sowas eher allgemeintauglich in css-frameworks oder sowas wie turbine gelöst werden!)

    bis dahin fahre ich auch eine browserseitige lösung (bspw php wie holger) weiter.
    (ist übrigens so ähnlich wie eine weitere dimension zur mehrsprachigkeit zu sehen …)

Die Kommentare sind geschloßen.

Die Kommentare sind geschloßen.