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.
9. Dezember 2014 um 14:05 Uhr
Deswegen gibt es ja matchMedia – wie ich vor 2 Jahren beschrieben habe: http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
9. Dezember 2014 um 14:13 Uhr
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.
10. Dezember 2014 um 9:30 Uhr
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).
9. Dezember 2014 um 14:42 Uhr
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.“