nicht angemeldet
Rolf B
Rolf B
Tabellenkalk
Auge
Gunnar Bittersmann
Rolf B
Der Martin
Rolf B
Das Tutorial zu den Mediaqueries ist sehr gut gelungen (CSS/Tutorials/Einstieg/Media Queries) !
Nur im “Beispiel: responsives Layout 2“ ist mir eine kleine Diskrepanz aufgefallen:
Im Beispielcode steht: @media (min-width: 30em) { ... } und @media (min-width: 60em) { ... }
In der anschließenden Erläuterung steht an 2 Stellen: Ab einer Mindestbreite von 50em ...
Hallo awehring,
keine Ahnung, was Du meinst 😉 (flöt)
Was an diesem Beispiel jetzt noch zu überdenken wäre, ist das Überlappen der @media-bereiche. Wenn ich eine Media-Query für min-width:30em und eine weitere für min-width:60em setze, treffen ab 60em zwei Medienbereiche gleichzeitig zu, was ggf. zu Kollisionen zwischen den Regeln führt. Besser wäre
@media (min-width: 30em) {
/* Regeln, die tatsächlich für kompakte und breite Ansicht gelten sollen */
}
@media (min-width: 30em) and (max-width: 60em) {
/* Regeln für kompakte Ansicht 30em-60em */
}
@media (min-width: 60em) {
/* Regeln für breite Ansicht 60em und mehr */
}
Der Browser tut sich dann leichter. Je weniger Regeln gleichzeitig gelten, desto später kommt man in Bereiche, wo der Browser überlastet ist. Aber, wenn der Teufel mal wieder einen guten Tag hat, bekommst Du einen Screen mit exakt 30em (480 Pixel bei 1em = 16px) und beide Media Queries greifen. Deshalb sollten deine Regeln so gestaltet sein, dass in diesem Überlappungfall kein Durcheinander entsteht. „Tricks“ wie max-width:59.999em und min-width:60em solltest Du aber unterlassen. Der Teufel hat auch eine Breite von 59.9992em im Angebot.
Rolf
Hallo Rolf,
Danke fürs faken der Versionsgeschichte. 😉
Im Zweifelsfall würde ich die Eindeutigkeit teuflischen Fehlern vorziehen. Der Browser ist doch darauf trainiert, hunderte von Regeln effizient zu sortieren.
Himmlische Grüsse
awehring
Hallo awehring,
ok, Spaß beiseite. Habe ich eine Stelle übersehen?
Bezüglich der überlappenden Media Queries gibt es diverse Meinungen im Netz. Echt disjunkte Bereiche erreicht man wohl erst mit Media Queries Level 4, da kann man width < 30em und width >= 30em schreiben. Es ist aber noch zu neu, die Browserunterstützung ist dem Vernehmen nach nichtexistent.
Rolf
Hallo Rolf,
Du hast alles korrigiert, was mir aufgefallen ist.
Danke
awehring
Hallo,
@media (min-width: 30em) { /* Regeln, die tatsächlich für kompakte und breite Ansicht gelten sollen }
Habe mir erlaubt, ein */ zu ergänzen…
Gruß
Kalk
Hallo
Was an diesem Beispiel jetzt noch zu überdenken wäre, ist das Überlappen der @media-bereiche. Wenn ich eine Media-Query für min-width:30em und eine weitere für min-width:60em setze, treffen ab 60em zwei Medienbereiche gleichzeitig zu, was ggf. zu Kollisionen zwischen den Regeln führt.
Ja und? Entweder die früher definierten Regeln treffen weiterhin zu oder du überschreibst sie.
html {
color: #000;
background: #fff;
padding: 0.25em;
margin: 0;
}
@media (min-width: 30em) {
html {
background: #fff;
padding: 1em;
}
}
@media (min-width: 60em) {
html {
background: #dde;
padding: 1.5em;
}
}
Das mag ein blödes Beispiel sein, aber zur Erklärung des Prinzips sollte es reichen. Die Eigenschaften color und margin verändern sich nicht, nur padding und background werden geändert. Warum sollte das zu Kollisionen führen?
Besser wäre
… Aber, wenn der Teufel mal wieder einen guten Tag hat, bekommst Du einen Screen mit exakt 30em (480 Pixel bei 1em = 16px) und beide Media Queries greifen.
Ist dein Vorschlag im Lichte dessen wirklich besser?
Tschö, Auge
@@Rolf B
Was an diesem Beispiel jetzt noch zu überdenken wäre, ist das Überlappen der @media-bereiche. Wenn ich eine Media-Query für min-width:30em und eine weitere für min-width:60em setze, treffen ab 60em zwei Medienbereiche gleichzeitig zu, was ggf. zu Kollisionen zwischen den Regeln führt. Besser wäre
@media (min-width: 30em) { /* Regeln, die tatsächlich für kompakte und breite Ansicht gelten sollen */ } @media (min-width: 30em) and (max-width: 60em) { /* Regeln für kompakte Ansicht 30em-60em */ } @media (min-width: 60em) { /* Regeln für breite Ansicht 60em und mehr */ }
Stacked media queries sind meist nicht das, was man möchte. ☞ overlapping vs. stacked
Der Browser tut sich dann leichter. Je weniger Regeln gleichzeitig gelten, desto später kommt man in Bereiche, wo der Browser überlastet ist.
Durch die Regeln im Browserstylesheet gibt es schon viele Regeln, da machen die paar im Autorenstylesheet den Kohl auch nicht mehr fett.
Ernsthaft: Wenn der Browser überlastet ist, dann wegen zu viel JavaScript-Gedöns. Oder wegen zu vieler Elemente im DOM. Aber sicher nicht wegen zu vieler CSS-Regeln.
LLAP 🖖
Hallo Gunnar,
ob das Autorenstylesheet den Kohl fett macht, das hängt von der Seite ab. In unserem Intranet läuft ein Monster, wo man nicht von Kohl, sondern von Uribe sprechen müsste...
Man muss es wohl im Einzelfall betrachten, welches Vorgehen sinnvoller ist. Ich mach das Fenster also besser zu, bevor ich mich zu weit hinauslehne 😉
Rolf
Hallo Rolf,
In unserem Intranet läuft ein Monster, wo man nicht von Kohl, sondern von Uribe sprechen müsste...
jetzt wollte ich doch nachschlagen, was Uribe eigentlich ist (hab ich nämlich noch nie gehört), aber Wikipedia bietet mir dazu nur zahlreiche Personen an, nichts Botanisches.
Ich mach das Fenster also besser zu, bevor ich mich zu weit hinauslehne 😉
Ich liebe diese blumige Sprache!
Ciao,
Martin
Hallo Martin,
was Uribe eigentlich ist
der Kohl ist so fett geworden, dass man ihn mit Señor Uribe verwechseln könnte.
Rolf
n'Abend,
was Uribe eigentlich ist
der Kohl ist so fett geworden, dass man ihn mit Señor Uribe verwechseln könnte.
ach, den Kohl meintest du ... Ja, meine Güte, ich dachte immer nur an das Gemüse!
Ist halt schon verdammt lang her!
Übrigens, habe ich mal irgendwo als Karikatur gesehen: "Wussten Sie, dass Helmut Kohl mit 1.93m größer ist als Napoleon und Donald Duck zusammen?"
Verfressene Grüße,
Martin