Forschung zu Media-Queries

Media-Queries kann man nicht nur in eine CSS-Datei schreiben. Man kann auch bei der Verlinkung externer Stylesheets in einem Attribut angeben, für welche Umgebungsbedingungen das verlinkte Stylesheet gelten soll.

Scott Jehl hat sich die Mühe gemacht und alle vorstellbaren Szenarien für die Anreicherung von verlinkten Stylesheets mit Media-Queries getestet. Das Ergebnis ist eindeutig und einfach zu merken: Alle Browser laden alle externen Stylesheets, auch wenn eine Media-Query nicht zutrifft.

Ich finde das Ergebnis recht klar und logisch. Denn schliesslich können sich die Umgebungsbedingungen theoretisch ändern, während der Nutzer die Seite betrachtet. Wenn der Browser dann alle CSS-Dateien zur Hand hat, kann er schnell auf die Änderung reagieren. 

4 Responses to “Forschung zu Media-Queries”

    • Stimmt, diese Technik hätte ich als Quintessenz ans Ende stellen können. Ich bin aber so old-fashioned, dass ich bei CSS-Fragen nicht daran denke, wie ich sie mit JS hinbekomme. Was in diesem Falle ja leider zu kurz greift.

    • Matthias M. sagt:

      Macht das im Normalfall wirklich einen signifikanten Unterschied aus? In meinen Projekten, machen die rein Screensize-basierten Media Queries 10-25% der Gesamtgröße des CSS-Files aus. Außerdem hat man so mehr Requests, falls der User seinen Browser resized.

      Der Kommentar von Florence Maurice überzeugt mich da schon mehr (nichts machen und dem Browser die Priorisierung überlassen).

  1. Alle Stylesheets werden heruntergeladen, aber in manchen Browsern mit unterschiedlicher Priorität, was interessant sein kann. Hierzu ein Zitat aus Scott Jehls Buch „Responsible Responsive Web Design“:
    „There is an upside, however. Several modern browsers like
    Safari (Mac and iOS), Opera, and Chrome will evaluate a link
    element’s media attribute to check if its conditions apply to the
    current browsing environment, and then use that information
    to raise or lower the priority of that stylesheet’s request. Lowpriority
    requests won’t block page rendering, which means
    that while all of the stylesheets will indeed be requested, these
    browsers will allow the page to render as soon as all applicable
    stylesheets have finished loading, letting the other stylesheets
    arrive at their convenience.“