Allgemeine Frage zu Media_Queries

[Melvin Cowznofski]

Hallo Matthias,

zunächst Danke für die Antwort und die Korrektur der entsprechenden Wikiseiten!

Nachdem ich das Thema heute wieder aufgenommen habe, hat sich eine Frage ergeben, die ich nicht so recht beantworten kann.

Folgender Inhalt einer extrenen CSS Datei funktioniert nicht:

@charset "utf-8";

@media screen and (min-width: 320px)
	{
		@import url('reset.css');
	}

@media screen and (min-width:320px) and (max-width:750px)
	{
		@import url('smartphone.css');
	}

@media screen and (min-width:750px) and (max-width:1024px)
	{
		@import url('tablet.css');
	}

@media screen and (min-width:1024px)
	{
		@import url('desktop.css');
	}

Dieses Nichtfunktionieren kann ich mir noch am ehesten durch den Satz "Eine @import-Regel muss am Beginn eines Stylesheets (nach @charset, aber vor allen anderen Regelsätzen) notiert werden." erklären.

Dann habe ich im Web für das selbe Ziel auch noch folgende Schreibweise gefunden:

@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?

Ich bin für jede Hilfe dankbar, ich beschäftige mich mit dem Thema erst seit gestern und bin diesbezüglich ein völliger Noob.

Mit lieben Grüßen

Melvin Cowznofski