Allgemeine Frage zu Media_Queries

[Matthias Apsel]

Hallo Melvin Cowznofski,

@charset "utf-8";
@import url('reset.css') (min-width:320px);
@import url('smartphone.css') (min-width:320px) and (max-width:750px);
@import url('tablet.css') (min-width:750px) and (max-width:1024px);
@import url('desktop.css') (min-width:1024px);

Und das funktioniert! Kann mir bitte jemand erklären, wieso die zweite Schreibweise greift und die erste nicht? Spricht etwas gegen die Verwendung der 2. Schreibweise? Und generell: Wieso kommt die 2. Schreibweise ohne einem "@media" aus? Ist das einfach eine Kurzschreibweise, die ebenfalls gültig ist, so wie $a++ in PHP?

• die erste geht nicht, weil @import vor allen anderen Regelsätzen notiert werden muss, wie du selbst gelesen hast.
• nein, es spricht nichts gegen die Verwendung der 2. Schreibweise.
• weil die Spec diese Schreibweise so festgelegt hat http://www.w3.org/TR/css3-cascade/#at-import
• nein, es ist eine völlig andere Schreibweise. Das eine ist ein Paramter der @import-Regel, das andere eine @media-Regel
• Wieder etwas, was im Wiki noch fehlt.

Erlaube mir noch einige Hinweise zu deinen Mediaqueries:

Man möchte die Breakpoints nur in Ausnahmefällen in Pixel zementieren, das Layout soll sich dem Inhalt anpassen. Deshalb sollten die Breakpoints im em gesetzt werden.

Es ist nicht gut, mehrere Stylesheets zu pflegen. Schau mal wieviele Regelsätze du mehrfach hast. Schreibe einfach die neuen Regeln dazu, indem du mediaqueries nach Schreibweise 1 in dein Stylesheet integrierst.

Ich könnte mir vorstellen, dass bei einer Änderung der Orientierung eines Tablets ein Breakpoint überschritten wird, mit der Folge, dass ein komplettes Stylesheet verworfen und ein neues geladen werden muss. Im besten Fall dauert das nur lange.

Ein reset-Stylesheet halte ich nicht für sinnvoll. Die meisten default-Einstellungen der Browser sind sinnvoll und auch browserübergreifend sehr ähnlich. Siehe auch wiki/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung Du schreibst sonst wieder Regeln hinzu, die du eigentlich gerade verworfen hast.

Bis demnächst
Matthias