media-queries – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes media-queries Fri, 26 Mar 21 14:43:29 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786343?srt=yes#m1786343 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786343?srt=yes#m1786343 <p>Guten Tag zusammen,<br> folgendes habe ich gefunden</p> <blockquote> <p>@media (30em <= width <= 50em )</p> </blockquote> <p>Ist neben dem <= auch < erlaubt? Dies wäre nämlich nötig, wenn ich etwa folgendes habe:</p> <p>Query1:</p> <blockquote> <p>@media (15em <= width <= 30em ) ...</p> </blockquote> <p>Query2:</p> <blockquote> <p>@media (30em < width <= 40em ) ...</p> </blockquote> media-queries Fri, 26 Mar 21 15:48:30 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786344?srt=yes#m1786344 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786344?srt=yes#m1786344 <p>Hallo Lydia,</p> <blockquote> <p>Query1:</p> <blockquote> <p>@media (15em <= width <= 30em ) ...</p> </blockquote> <p>Query2:</p> <blockquote> <p>@media (30em < width <= 40em ) ...</p> </blockquote> </blockquote> <p>wenn ich <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4</a> richtig verstanden habe, geht beides.</p> <p>Aber das ist Media Queries Level 4, das wird z.Zt. nur vom Firefox unterstützt: <a href="https://caniuse.com/mdn-css_at-rules_media_range_syntax" rel="noopener noreferrer">https://caniuse.com/mdn-css_at-rules_media_range_syntax</a>.</p> <p>Gruß<br> Jürgen</p> media-queries Tue, 30 Mar 21 11:17:49 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786611?srt=yes#m1786611 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786611?srt=yes#m1786611 <p>Guten Tag zusammen,<br> nachdem dies</p> <blockquote> <blockquote> <p>@media (30em <= width <= 50em )</p> </blockquote> </blockquote> <p>noch nicht sehr unterstützt wird, heißt es ja</p> <ol> <li> <p>Definition für schmale viewports, dann z.B.</p> </li> <li> <p>@media screen (min-width: 30em){}</p> </li> <li> <p>@media screen (min-width: 40em){}</p> </li> </ol> <p>Es gilt neben einer anderen Regel auch immer die für schmale viewports. In diesem thread wurde auch die Performance angesprochen. Wäre es dann nicht sinnvoll zu schreiben:</p> <ol> <li> <p>@media screen (max-width: 30em){}</p> </li> <li> <p>@media screen (min-width: 30em){}</p> </li> <li> <p>@media screen (min-width: 40em){}</p> </li> </ol> <p>Dann bestünde das Problem ja nur bei exakt 30em.</p> <p>Bleibt gesund!</p> media-queries Wed, 31 Mar 21 13:58:41 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786669?srt=yes#m1786669 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786669?srt=yes#m1786669 <p>Hallo, ich erinnere an meinen Beitrag vom 30.03.2021 13:17.</p> <p>Wenn der von Euch so vehement verteidigte Zustand optimal wäre, würde doch nicht jetzt die Variante</p> <p>@media (30em <= width <= 50em ) im Gespräch und zum Teil schon realisiert.</p> <p>Genau diese habe ich doch mit meinem Vorschlag mit der minimalen Fehlertoleranz nachvollzogen.<br> Ein frohes Osterfest wünscht Euch<br> Lydia</p> media-queries Fri, 26 Mar 21 17:57:58 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786347?srt=yes#m1786347 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786347?srt=yes#m1786347 <p>Hallo Jürgen,</p> <blockquote> <p>wenn ich <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4</a> richtig verstanden habe, geht beides.</p> </blockquote> <p>woraus schließt Du dies? Ich finde dort kein < sondern nur <=.</p> media-queries Fri, 26 Mar 21 17:59:31 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786348?srt=yes#m1786348 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786348?srt=yes#m1786348 <p>Hallo</p> <blockquote> <blockquote> <p>wenn ich <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4</a> richtig verstanden habe, geht beides.</p> </blockquote> <p>woraus schließt Du dies? Ich finde dort kein < sondern nur <=.</p> </blockquote> <p>Das sind <em>Beispiele</em>. Wenn <code><=</code> möglich ist, ist es auch <code><</code>.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> media-queries Fri, 26 Mar 21 18:09:01 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786349?srt=yes#m1786349 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786349?srt=yes#m1786349 <p>Hallo Lydia,</p> <blockquote> <blockquote> <p>wenn ich <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4</a> richtig verstanden habe, geht beides.</p> </blockquote> <p>woraus schließt Du dies? Ich finde dort kein < sondern nur <=.</p> </blockquote> <p>siehe <a href="https://www.w3.org/TR/mediaqueries-4/#mq-range-context" rel="nofollow noopener noreferrer">https://www.w3.org/TR/mediaqueries-4/#mq-range-context</a></p> <p>Gruß<br> Jürgen</p> media-queries Fri, 26 Mar 21 18:50:41 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786350?srt=yes#m1786350 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786350?srt=yes#m1786350 <p>Hallo Lydia,</p> <p>auf einer allgemeinen Beschreibungsseite kannst du keine umfassende Darstellung erwarten.</p> <p>Für eine verbindliche Auskunft musst Du ohnehin zur Spezifikation. Da es eine <strong>Candidate Recommendation</strong> ist, dürfte sie auch ziemlich stabil sein - bei einem Draft könnte sich eher noch etwas ändern.</p> <p>Aber auch bei Mozilla steht es vollständig, man muss nur auf die Seite gucken, die @media definiert: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/@media</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Sat, 27 Mar 21 09:58:30 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786362?srt=yes#m1786362 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786362?srt=yes#m1786362 <p>Hi,<br> besten Dank an alle.<br> Nachdem die Variante bisher nur im Firefox möglich ist, verwende ich also die Möglichkeit</p> <p>@media screen (min-width: 30em).....</p> <p>@media screen (min-width: 40em).....</p> <p>Ist die Reihenfolge belanglos oder empfiehlt sich vielleicht die absteigende Reihenfolge 40em, 30em?</p> media-queries Sat, 27 Mar 21 10:14:46 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786363?srt=yes#m1786363 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786363?srt=yes#m1786363 <p>Servus!</p> <blockquote> <p>Hi,<br> besten Dank an alle.<br> Nachdem die Variante bisher nur im Firefox möglich ist, verwende ich also die Möglichkeit</p> <p>@media screen (min-width: 30em).....</p> <p>@media screen (min-width: 40em).....</p> <p>Ist die Reihenfolge belanglos oder empfiehlt sich vielleicht die absteigende Reihenfolge 40em, 30em?</p> </blockquote> <p>Nein, so wie du es gemacht hast:</p> <ol> <li>Mobile first! (keine Festlegungen)</li> <li><code>@media screen (min-width: 30em){}</code> (einige Elemente nebeneinander)</li> <li><code>@media screen (min-width: 40em){}</code> (weitere Elemente nebeneinander)</li> </ol> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> media-queries Sat, 27 Mar 21 10:27:18 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786364?srt=yes#m1786364 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786364?srt=yes#m1786364 <p>Hallo Lydia,</p> <p>nein, die Reihenfolge ist nicht belanglos, bzw. sie ist unmittelbar vom Konzept deines Seitenaufbaus abhängig.</p> <p>CSS bildet Prioritäten, die entscheiden, welche Regel Vorrang bekommt, wenn zwei Regeln die gleiche Eigenschaft setzen. Das ist gar nicht so leicht. Unse r Wiki hat einen Artikel zu den Schlüsselbegriffen <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade" rel="nofollow noopener noreferrer">Kaskade und Spezifität</a>.</p> <p>TL;DR: Wenn zwei Regeln die gleiche Prio haben, gewinnt die letzte.</p> <p>Es gibt zwei Vorgehensweisen beim responsiven Design:</p> <dl> <dt>Big Screen First</dt> <dd>Du designest deine Seite für einen Desktop-Bildschirm und erkennst über Media-Queries, dass der Platz nicht reicht. In den @media Abschnitten fügst Du Styles hinzu, die das Layout auf "schmal" umbauen.</dd> <dd>In diesem Fall beginnst Du mit den breiteren Media-Abfragen.</dd> <dt>Mobile First</dt> <dd>Du designest deine Seite so, dass sie ohne Media-Abfragen auf einem schmalen Bildschirm gut aussieht. Mit @media-Abfragen baust Du das schmale Design in das breite um ; In diesem Fall beginnst Du mit dem schmalerern Media-Abfragen.</dd> </dl> <p><strong>Empfohlen ist der Mobile First Ansatz</strong> - oder bei anderen Medienmerkmalen - Simple First. Nicht jede Media-Abfrage wird von jedem Browser unterstützt, und du möchtest ja auf einem "schlechteren" Browser dein Layout nicht zerreißen. Deswegen wählt man den Weg, zunächst ein Basislayout zu bauen und dies je nach Endgerät zu verbessern. Stichwort: Progressive Enhancement.</p> <p>Zum Design von Media-Abfragen gibt es ebenfalls zwei Ansätze: Überlappend und nicht überlappend.</p> <dl> <dt>Nicht überlappend:</dt> <dd> <p>Du fragst Intervalle ab. Zone 1: <code>(min-width: 30em) and (max-width: 50em)</code>, Zone 2: <code>(min-width: 50em)</code>. Vorteil: Es gelten nicht so viele Styleregeln gleichzeitig. Bei umfangreichem CSS kann das ein Performancevorteil sein. Nachteil: Du musst ggf. etliche Styles für beide Breitenbereiche doppeln. Und du hast ein Problem: max-width schließt 50em ein, d.h. die Medienabfragen überlappen sich bei genau 50em Breite und Du hast Breite, wo beide Bereiche gelten.</p> </dd> <dd> <p>Media Queries Level 4 vereinfachen die nicht überlappende Konstruktion durch die mathematische Formulierung und Bereichsabfragen. Aber die funktionieren noch nicht gut. In Chrome gar nicht, und Firefox kann weder Intervallabfragen noch Abfragen mit dem Wert vor dem Featurenamen.</p> </dd> </dl> <pre><code class="block bad language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>30em <= width < 50em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>50em <= width<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>Firefox kann immerhin dies hier:</p> <pre><code class="block good language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>width >= 30em<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span>width < 50em<span class="token punctuation">)</span> ... <span class="token punctuation">}</span> @media <span class="token punctuation">(</span>50em <= width<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <dl> <dt>Überlappend:</dt> <dd>Du machst aus der Not eine Tugend und fragst nur mit min-width. Also genau so, wie es in deiner Frage steht. In der breitesten Zone gelten dann alle Media-Abfragen. Vorteil: Die Logik ist nicht so kompliziert und Du musst keine Styles doppeln, die in beiden Bereichen gelten sollen. Nachteil: Du musst in der breiten Zone ggf. CSS Regeln notieren, die Styles aus der mittleren Zone wieder rückgängig machen. Unter dem Strich ist so mehr CSS wirksam und belastet den Browser mehr. Das fällt aber nur auf Seiten mit sehr viel Markup und Styles ins Gewicht.</dd> </dl> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Sat, 27 Mar 21 10:36:24 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786365?srt=yes#m1786365 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786365?srt=yes#m1786365 <p>Rolf schrieb:</p> <blockquote> <p>nein, die Reihenfolge ist nicht belanglos, ...</p> </blockquote> <p>Das müsste man genauso ins Wiki kopieren! Ich hatte vorhin nach Mobile First gesucht und dies gefunden:</p> <ul> <li> <p><a href="https://wiki.selfhtml.org/wiki/Mobile_First" rel="nofollow noopener noreferrer">Mobile_First</a></p> </li> <li> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/Vor%C3%BCberlegungen#Mobile_first" rel="nofollow noopener noreferrer">HTML/Tutorials/responsive_Webdesign/Vorüberlegungen#Mobile_first</a></p> </li> <li> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Media_queries" rel="nofollow noopener noreferrer">CSS/Tutorials/Einstieg/Media_Queries#Media_queries</a></p> </li> </ul> <p>Ich glaube, dass passt am besten in das RWD-Tutorial!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> media-queries Sat, 27 Mar 21 11:12:30 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786370?srt=yes#m1786370 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786370?srt=yes#m1786370 <p>@@Rolf B</p> <blockquote> <dl> <dt>Big Screen First</dt> <dd>Du designest deine Seite für einen Desktop-Bildschirm …</dd> <dt>Mobile First</dt> <dd>… auf einem schmalen Bildschirm</dd> </dl> </blockquote> <p>Desktop heißt ebensowenig großer Bildschirm wie Mobile kleiner Bildschirm heißt.</p> <p>Desktop 400% gezoomt bspw. ist ein schmaler Bildschirm.</p> <p>Handy im Querformat könnte schon ein breiter Bildschirm sein.</p> <hr> <blockquote> <p>Unter dem Strich ist so mehr CSS wirksam und belastet den Browser mehr.</p> </blockquote> <p>Ist das so?</p> <blockquote> <p>Das fällt aber nur auf Seiten mit sehr viel Markup und Styles ins Gewicht.</p> </blockquote> <p>Und selbst wenn: So viel Markup und Styles kann es kaum geben, dass das ins Gewicht fällt.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> media-queries Sat, 27 Mar 21 23:28:53 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786467?srt=yes#m1786467 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786467?srt=yes#m1786467 <p>Hallo Rolf,</p> <p>Update zur Kompatibilität. Abfrage mit Operatoren und Range-Abfragen sind noch nicht breit genug verwendbar.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Sat, 27 Mar 21 10:59:28 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786366?srt=yes#m1786366 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786366?srt=yes#m1786366 <p>Hallo Matthias,</p> <p>mach ich</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Mon, 29 Mar 21 12:16:40 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786571?srt=yes#m1786571 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786571?srt=yes#m1786571 <p>Hallo Matthias,</p> <p>hab die Reihenfolgeproblematik jetzt hier diskutiert:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Sat, 27 Mar 21 11:01:02 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786368?srt=yes#m1786368 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786368?srt=yes#m1786368 <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>mach ich</p> </blockquote> <p>Vielen Dank! Sonst wär ich aktiv geworden!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> media-queries Sat, 27 Mar 21 11:17:01 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786373?srt=yes#m1786373 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786373?srt=yes#m1786373 <p>Hallo Gunnar,</p> <blockquote> <p>Ist das so?</p> </blockquote> <p>Das war meine Hypothese angesichts des Threads "CSS Performance".</p> <p>Und wir hatten in der Firma eine Webanwendung, die sehr viel CSS genutzt hat und den IE damit in die Knie zwang. Es wurde auf Firefox umgestellt und die Schwuppdizität war wieder da. Ich würde daraus nicht folgern, dass umfangreiches CSS für den Firefox kein Problem ist. Nur, dass die Trägheitsschwelle höher liegt.</p> <blockquote> <p>So viel Markup und Styles kann es kaum geben, dass das ins Gewicht fällt</p> </blockquote> <p>Sehe ich ähnlich - ich bin aber zu faul, hier Versuche für die Schwelle zu machen, ab der es problematisch wird.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Mon, 29 Mar 21 12:49:56 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786574?srt=yes#m1786574 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786574?srt=yes#m1786574 <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>hab die Reihenfolgeproblematik jetzt hier diskutiert:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries</a></p> </blockquote> <p>Danke!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> media-queries Tue, 30 Mar 21 12:07:39 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786615?srt=yes#m1786615 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786615?srt=yes#m1786615 <p>Hallo Lydia,</p> <blockquote> <p>Dann bestünde das Problem ja nur bei exakt 30em.</p> </blockquote> <p>Und das ist genau eins zu viel. Damit hast Du nicht 3, sondern 4 Fälle, für die Du entwickeln und testen musst.</p> <blockquote> <p>In diesem thread wurde auch die Performance angesprochen</p> </blockquote> <p>Ja. Mit der Aussage: Das ist nur in Ausnahmefällen ein Problem. Bei sehr viel HTML und CSS. <strong>SEHR</strong> viel. Keine Ahnung wieviel 100KB Du da an Regeln zusammentragen musst, um in Grenzbereiche zu kommen.</p> <p>Man kann versuchen, die Überlappung bei 30em zu vermeiden. Mit Neunerorgien wie "max-width: 29.99999em". Ich habe <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Spezifit.C3.A4t_und_Reihenfolge_der_Media_Queries" rel="nofollow noopener noreferrer">hier</a> dazu einen Kommentar eingetragen:</p> <blockquote> <p>Wenn Sie Lotto spielen möchten, ist Webdesign der falsche Ort dafür.</p> </blockquote> <p>Überlappungsfreie Medienbereiche führen vor allem zu Style-Dopplungen. Die sind dann zwar nicht alle aktiv, aber Du musst sie bei der Seitenpflege beachten. Eine wichtige Abkürzung beim Softwarebau lautet: DRY. Don't Repeat Yourself.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Tue, 30 Mar 21 13:48:22 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786619?srt=yes#m1786619 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786619?srt=yes#m1786619 <blockquote> <p>Hallo Lydia,</p> <blockquote> <p>Dann bestünde das Problem ja nur bei exakt 30em.</p> </blockquote> <p>Und das ist genau eins zu viel. Damit hast Du nicht 3, sondern 4 Fälle, für die Du entwickeln und testen musst.</p> </blockquote> <p>Das verstehe ich nun gar nicht mehr.</p> <p>Mit und ohne</p> <p>@media screen (max-width: 30em){}</p> <p>gilt die schmale Definition solange width < 30em.</p> <p>Ab 30em gilt ohne mein Vorschlag die schmale Definition (da keine Einschränkung) <strong>und</strong> es gilt die Definition für 30em.</p> <p>Ich muss also testen <30em, >=30em</p> <p>Mit meinem Vorschlag gelten beide Definitionen nur für den einen Fall 30em, danach gilt meine Regel 1 nicht mehr. Der Fall 30em ist dann doch genau wie der obige Fall. Und wenn > 30em, dann gibt es keine Konkurenzprobleme zwischen zwei Definitionen.</p> <blockquote> <p>Man kann versuchen, die Überlappung bei 30em zu vermeiden.</p> </blockquote> <p>Ohne meinen Vorschlag ist doch die Überlappung nicht nur bei 30 sondern bei allem über 30.</p> media-queries Tue, 30 Mar 21 14:32:57 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786622?srt=yes#m1786622 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786622?srt=yes#m1786622 <p>Hallo Lydia,</p> <blockquote> <p>@media screen (max-width: 30em){}</p> </blockquote> <blockquote> <p>gilt die schmale Definition solange width < 30em.</p> </blockquote> <p>Eben nicht. max-width prüft auf kleiner oder gleich. Je nach Wert für 1em ist der Unterschied zwischen <code><30em</code> und <code><=30em</code> 0 oder 1 Pixel breit. Und das lässt Dir beim Ziehen der Fenstergröße ggf. das Layout springen, weil unerwartet die Regeln für <=30em und >=30em gleichzeitig gelten. Oder, wenn die Fenstergröße gerade so gezogen wurde, dass die Breite genau 30em ist, ist dein Layout geschrottet, wenn Du diesen Fall nicht berücksichtigt und getestet hast.</p> <p>Deswegen hast Du mit deinem Vorschlag von 13:17 Uhr vier Fälle:</p> <p><code>< 30em</code> - Regelsatz 1<br> <code>= 30em</code> - Regelsatz 1 und 2<br> <code>> 30em und < 40em</code> - Regelsatz 2<br> <code>>= 40em</code> - Regelsatz 2 und 3</p> <p>Ohne die max-width:30em Klausel für den "Normalfall" hast Du</p> <p><code>< 30em</code> - Regelsatz 1<br> <code>>= 30em und < 40em</code>, Regelsatz 1 und 2<br> <code>>= 40em</code>, Regelsatz 1, 2 und 3</p> <p>Das ist nach meiner Erfahrung besser zu handhaben.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Tue, 30 Mar 21 14:43:10 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786624?srt=yes#m1786624 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786624?srt=yes#m1786624 <p>Hallo</p> <blockquote> <blockquote> <p>Hallo Lydia,</p> <blockquote> <p>Dann bestünde das Problem ja nur bei exakt 30em.</p> </blockquote> <p>Und das ist genau eins zu viel. Damit hast Du nicht 3, sondern 4 Fälle, für die Du entwickeln und testen musst.</p> </blockquote> <p>Das verstehe ich nun gar nicht mehr.</p> <p>Mit und ohne</p> <p>@media screen (max-width: 30em){}</p> <p>gilt die schmale Definition solange width < 30em.</p> </blockquote> <p>Richtig. Da die Regeln aber auch ohne die Definition <code>@media screen (max-width: 30em)</code> gilt, kannst <em>und solltest</em> du sie auch weglassen.</p> <blockquote> <p>Ab 30em gilt ohne mein Vorschlag die schmale Definition (da keine Einschränkung) <strong>und</strong> es gilt die Definition für 30em.</p> </blockquote> <p>Korrekt.</p> <blockquote> <p>Ich muss also testen <30em, >=30em</p> </blockquote> <p>Nein, musst du nicht. Sieh die Mediaqueries als Schalter für Ergänzungen zu den bereits vorhandenen Regeln, nicht als Schalter für (grundsätzliche) Ersetzungen.</p> <p>Was will man den typischerweise für unterschiedlich große Viewports unterscheiden? Schriftart und -farbe sind es normalerweise nicht. Meist auch nicht Hintergrundfarben für bestimmte Bereiche (Seitenkopf, Navigation, Merksätze in Dokus, etc.). Normalerweise™️ verändert man Schriftgrößen, die Anordnung von Bereichen und Abstände.</p> <p>Da man, um bei der obigen Auflistung zu bleiben, die Schriftarten und Farben bereits für schmale Viewports sowie Abstände festgelegt hat, und (die typischerweise) serielle Anordnung von Bereichen untereinander der Normalfall ist, für den man oft nicht einmal irgendwas festlegen muss, benutzt man die einen, allgemeingültigen Regeln einfach weiter und überschreibt und ergänzt für andere Anzeigegrößen und -medien nur jene Regeln, die gesondert behandelt gehören.</p> <pre><code class="block language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token comment">/* diese Regeln gelten immer */</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #013<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > *</span> <span class="token punctuation">{</span> <span class="token comment">/* die Regel für margin ist * nur für schmale Viewports gedacht */</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.75em 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 32em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body > *</span> <span class="token punctuation">{</span> <span class="token comment">/* der margin nach oben und unten wird * nun für breitere Viewports erhöht */</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1em 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Das ist jetzt ein willkürliches Beispiel mit willkürlich notierten Regeln. Wie du siehst, überschreibe ich nur <em>eine</em> Regel, die bei breiteren Viewports (am 32em) einen größeren <code>margin</code> für direkte Kinder von <code>body</code>. In der Praxis wird man mehr und anderes überschreiben und ergänzen, aber als Beispiel für das Prinzip sollte es langen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> media-queries Tue, 30 Mar 21 14:48:19 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786625?srt=yes#m1786625 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786625?srt=yes#m1786625 <p>Hallo</p> <blockquote> <p>Hallo Lydia,</p> <blockquote> <p>@media screen (max-width: 30em){}</p> </blockquote> <blockquote> <p>gilt die schmale Definition solange width < 30em.</p> </blockquote> <p>Eben nicht. max-width prüft auf kleiner oder gleich. Je nach Wert für 1em ist der Unterschied zwischen <code><30em</code> und <code><=30em</code> 0 oder 1 Pixel breit.</p> </blockquote> <p>Ah ja, das hatte ich <a href="https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786624#m1786624" rel="noopener noreferrer">in meiner Antwort</a> übersehen.</p> <blockquote> <p>Deswegen hast Du mit deinem Vorschlag von 13:17 Uhr vier Fälle:</p> <p><code>< 30em</code> - Regelsatz 1<br> <code>= 30em</code> - Regelsatz 1 und 2<br> <code>> 30em und < 40em</code> - Regelsatz 2<br> <code>>= 40em</code> - Regelsatz 2 und 3</p> <p>Ohne die max-width:30em Klausel für den "Normalfall" hast Du</p> <p><code>< 30em</code> - Regelsatz 1<br> <code>>= 30em und < 40em</code>, Regelsatz 1 und 2<br> <code>>= 40em</code>, Regelsatz 1, 2 und 3</p> </blockquote> <p>Dann kann man aber auch beim „alten“ Prinzip bleiben. <em>Meiner Meinung nach</em> liest sich das auch einfacher.</p> <p><code>nix</code> - Regelsatz 1<br> <code>min-width: 30em</code> - Regelsatz 1 und 2<br> <code>min-width: 40em</code>, Regelsatz 1, 2 und 3</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> media-queries Tue, 30 Mar 21 15:24:24 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786628?srt=yes#m1786628 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786628?srt=yes#m1786628 <p>Hallo</p> <blockquote></blockquote> <pre><code class="block"> Notwendig bei meinem Vorschlag Euerem Vorschlag Regelsatz 1 Regelsatz 1 Regelsatz 1 und 2 Regelsatz 1 und 2 Regelsatz 2 - Regelsatz 2 und 3 Regelsatz 1, 2 und 3 </code></pre> <p>Ich bin der Meinung, dass die Komplexität von Regelsatz 1,2,3 gegenüber Regelsatz 2,3 mehr Aufwand bedeutet als die zusätzliche einzelne Regel 2.<br> Und wenn ich statt 30em die von Rolf angeführte 29.99999em verwende, so würde für mich der Test von Regel 2 sogar wegfallen.<br> Grund:<br> Wenn man in Kauf nimmt, dass bestimmte selten verwendete Browserversionen nicht mehr unterstützt werden, so kann man getrost die Nutzer ausschließen, deren viewport genau 29.99999em groß ist.</p> media-queries Tue, 30 Mar 21 15:28:34 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786629?srt=yes#m1786629 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786629?srt=yes#m1786629 <p>Hallo Lydia,</p> <p>dann mach's halt so, wie Du meinst. Du hast die Informationen erhalten und die Entscheidung ist Deine.</p> <p>Aber wenn es auf dem Weg am Ende Chaos gibt, komm gerne wieder und frage nach. Ich sage dann gerne: Siehste! </p> <p>Und wenn es gut geht, freu ich mich auch für Dich.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Tue, 30 Mar 21 20:00:04 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786640?srt=yes#m1786640 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786640?srt=yes#m1786640 <p>Hallo</p> <blockquote> <pre><code class="block"> Notwendig bei meinem Vorschlag Euerem Vorschlag Regelsatz 1 Regelsatz 1 Regelsatz 1 und 2 Regelsatz 1 und 2 Regelsatz 2 - Regelsatz 2 und 3 Regelsatz 1, 2 und 3 </code></pre> <p>Ich bin der Meinung, dass die Komplexität von Regelsatz 1,2,3 gegenüber Regelsatz 2,3 mehr Aufwand bedeutet als die zusätzliche einzelne Regel 2.</p> </blockquote> <p>Öhhm, vermutlich verstehst du uns immer noch miss.</p> <p>In unserem Vorschlag …</p> <ul> <li>Regelsatz 1</li> <li>Regelsatz 1 und 2</li> <li>Regelsatz 1, 2 und 3</li> </ul> <p>… enthalten die mehrteiligen Regelsätze von sich aus und ohne erneute Deklaration die vorherigen Regeln. Heißt, bei „Regelsatz 1, 2 und 3“ (zweiter Mediaquery (wo auch immer der ansetzt)) müssen nur die Regeln für 3 notiert werden, weil die Regeln für 1 und 2 bereits vorhanden sind. Für diese Regeln entsteht <em>kein <strong>erneuter</strong> Aufwand</em>.</p> <p>Das gilt auch bei deinem Aufbau grundsätzlich für die Fälle …</p> <ul> <li>Regelsatz 1</li> <li>Regelsatz 1 und 2</li> </ul> <p>… aber nicht für die Fälle „Regelsatz 2“ und „Regelsatz 2 und 3“, weil du da – mit einer gewissen Wahrscheinlichkeit und unabhängig davon, ob das in deiner Auflistung so steht – Regeln für 1 explizit aufheben musst (und das für den Fall „Regelsatz 2“ nur für den Bereich von 0.00001em). Das ist in unserem Vorschlag wohl nur in Ausnahmefällen (Tabellen können so ein Fall sein) notwendig.</p> <blockquote> <p>Und wenn ich statt 30em die von Rolf angeführte 29.99999em verwende, so würde für mich der Test von Regel 2 sogar wegfallen.<br> Grund:<br> Wenn man in Kauf nimmt, dass bestimmte selten verwendete Browserversionen nicht mehr unterstützt werden, so kann man getrost die Nutzer ausschließen, deren viewport genau 29.99999em groß ist.</p> </blockquote> <p>Du weißt ohne weiteres nicht, wie groß <em>irgendein</em> Viewport ist. Bei Mobilgeräten ist der noch von fester Größe, aber es gibt derart viele Gerätetypen, dass du nicht ausschließen kannst, dass da in Kombination mit der auf dem System festgelegten Standardschriftgröße zufällig genau 29.99999em herauskommen.</p> <p>Auf Desktopsystemen kann nun aber nicht nur die Standardschriftgröße variieren, hier kommt noch hinzu, dass ein Anwender den Browser im Vollbildmodus betreibt, ein anderer aber als Fenster von irgendeiner Größe. Dort ist eine zufällg für 29.99999em Viewportbreite <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> passende Kombination der beiden variablen Werte durchaus möglich. Und das auch ganz ohne die Bedingung „bestimmte selten verwendete Browserversion“.</p> <p>Egal, wie unwahrscheinlich es sein mag, dass jemand in die Falle <code>29.99999em > Viewportbreite < 30em</code> gerät <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>, ist es doch so, dass es mit unserem Ansatz grundsätzlich vermieden wird, dem Besucher diese Falle überhaupt zu stellen. Dieses (unwahrscheinliche) Problem existiert in unserem Ansatz schlicht nicht.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Wir sind uns hoffentlich einig, dass die <code>29.99999em</code> nur ein Beispielwert sind. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Ja, das ist sehr unwahrscheinlich. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> media-queries Tue, 30 Mar 21 18:02:52 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786638?srt=yes#m1786638 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786638?srt=yes#m1786638 <p>Wieso Chaos,<br> bedeutet meine Variante nicht weniger Aufwand?<br> Mal abwarten, was Gunnar spricht!</p> media-queries Tue, 30 Mar 21 23:22:38 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786642?srt=yes#m1786642 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786642?srt=yes#m1786642 <p>Hallo Lydia,</p> <blockquote> <p>Wieso Chaos,</p> </blockquote> <p>weil media queries am Ende doch nur ein (vielleicht hilfreiches) Hilfsmittel, eine Krücke ist, die unmöglich alle Geräte und Einstellungen abdecken kann um ein pixelgenaues Ergebnis zu bekommen. Daher mal eine Frage, warum ist dir das so nahezu pixelgenau wichtig?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> media-queries Wed, 31 Mar 21 05:55:18 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786645?srt=yes#m1786645 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786645?srt=yes#m1786645 <p>@@Lydia</p> <blockquote> <p>Wieso Chaos,<br> bedeutet meine Variante nicht weniger Aufwand?</p> </blockquote> <p>Eher das Gegenteil. Beispiel:</p> <ul> <li>“mobile first”: einspaltig,</li> <li>ab 30em zweispaltig,</li> <li>ab 45em größere Schrift</li> <li>ab 60em dreispaltig</li> </ul> <p><a href="https://codepen.io/gunnarbittersmann/pen/XWpNOzb?editors=0100" rel="noopener noreferrer">Mit <em lang="en">stacking media queries</em></a> musst du nur die jeweiligen Änderungen angeben.</p> <p><a href="https://codepen.io/gunnarbittersmann/pen/NWdbowE?editors=0100" rel="noopener noreferrer">Mit <em lang="en">non-stacking media queries</em></a> musst du den ganzen Kram immer wieder wiederholen. Da bleibt kein Auge DRY. </p> <blockquote> <p>Mal abwarten, was Gunnar spricht!</p> </blockquote> <p>Ich habe gesprochen. Howgh!</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> media-queries Wed, 31 Mar 21 09:33:47 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786653?srt=yes#m1786653 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786653?srt=yes#m1786653 <p>Hallo Henry,</p> <blockquote> <p>Daher mal eine Frage, warum ist dir das so nahezu pixelgenau wichtig?</p> </blockquote> <p>Ist es doch nicht.</p> media-queries Wed, 31 Mar 21 09:36:08 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786654?srt=yes#m1786654 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786654?srt=yes#m1786654 <p>Na, ja, jetzt kommen plötzlich 60em dazu. Die gilt natürlich in beiden Fällen!</p> media-queries Wed, 31 Mar 21 14:03:20 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786670?srt=yes#m1786670 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786670?srt=yes#m1786670 <p>Hallo Lydia,</p> <blockquote> <p>würde doch nicht jetzt die Variante @media (30em <= width <= 50em ) im Gespräch und zum Teil schon realisiert.</p> </blockquote> <p>Könntest Du das bitte bequellen? Das kann keiner <strong>realisiert</strong> haben, weil es noch kein Browser unterstützt. Es sei denn, du jagst deine Würmer mit irgendwelchen besonders frühen Vögeln.</p> <p>Und wenn sie funktioniert, ist sie - allein betrachtet - auch völlig problemlos. Die Probleme entstehen, wenn ein <code>@media (width <= 30em)</code> dazu kommt. Aber das erkläre ich nun schon zum drölften Mal</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> media-queries Wed, 31 Mar 21 14:45:01 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786674?srt=yes#m1786674 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786674?srt=yes#m1786674 <p>Eine der Quellen hat Jürgen bereits in seiner Antwort auf meinen ersten Beitrag genannt. Wenn man Hilfesuchende regelmäßig daran erinnert, dass etwas bereits erwähnt wurde oder man besser lesen sollte, so sollte dies auch für die Helfer gelten.<br> Dies sollte aber nicht verdecken, dass ich sehr dankbar bin auch für frühere Unterstützungen.</p> media-queries Wed, 31 Mar 21 14:57:14 Z https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786675?srt=yes#m1786675 https://forum.selfhtml.org/self/2021/mar/26/media-queries/1786675?srt=yes#m1786675 <p>Hallo Lydia,</p> <p>die Quellenanfrage bezog sich auf die Realisierung.</p> <p>Und in der von Dir genannte Quelle MDN steht die Abfrage für sich allein, was, wie ich schon schrieb, unproblematisch ist. Abgesehen davon ist das lediglich ein Beispiel, das die Übertragung einer min-width and max-width Abfrage auf die neue Syntax belegt, und keine Diskussion über stacking vs not-stacking media queries.</p> <p>Ich habe jetzt etwas geforscht, ob MDN überhaupt das Thema "mehrere Breakpoints und wie man es macht" anspricht, und, ja, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries" rel="nofollow noopener noreferrer">tatsächlich</a> …</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>