awehring: Diskrepanz Beispiel und Erläuterung

problematische Seite

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 ...

  1. problematische Seite

    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

    --
    sumpsi - posui - clusi
    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        sumpsi - posui - clusi
        1. problematische Seite

          Hallo Rolf,

          Du hast alles korrigiert, was mir aufgefallen ist.

          Danke

          awehring

    2. problematische Seite

      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

    3. problematische Seite

      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

      --
      Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
      Hohle Köpfe von Terry Pratchett
    4. problematische Seite

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

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. problematische Seite

        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

        --
        sumpsi - posui - clusi
        1. problematische Seite

          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

          --
          Ein Tag, an dem du nicht wenigstens einmal gelacht hast, ist ein verlorener Tag.
          1. problematische Seite

            Hallo Martin,

            was Uribe eigentlich ist

            der Kohl ist so fett geworden, dass man ihn mit Señor Uribe verwechseln könnte.

            Rolf

            --
            sumpsi - posui - clusi
            1. problematische Seite

              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

              --
              Wichtig ist nur, was hinten rauskommt. - Helmut Kohl, 16 Jahre deutsche Bundesbirne