Matthias Scharwies: Wiki: Use Case für Window.matchmedia gesucht

Servus!

Statt der ganzen Eigenschaften wie innerwidth, usw. könnte man doch eigentlich Window.matchMedia() verwenden, das ähnlich wie media queries aufgebaut ist.

Kennt jemand ein gutes Anwendungsbeispiel, bei dem der Einsatz von Javascript wirklich sinnvoll ist?

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
  1. Aloha ;)

    Ich hau mal einfach Ideen raus, die mir so durch den Kopf gingen.

    Statt der ganzen Eigenschaften wie innerwidth, usw. könnte man doch eigentlich Window.matchMedia() verwenden, das ähnlich wie media queries aufgebaut ist.

    Kennt jemand ein gutes Anwendungsbeispiel, bei dem der Einsatz von Javascript wirklich sinnvoll ist?

    Stell dir eine responsive Seite vor, die im CSS media queries benutzt, meinetwegen mit insgesamt drei Breakpoints. Wenn du ein durch Javascript angesteuertes Menü auf dieser Seite hast, möchtest du wahrscheinlich, dass es je nach dem, innerhalb welchem Bereich wir uns mit der Viewport-Größe gerade befinden, anders reagiert.

    Du könntest jetzt hergehen, und dir überlegen „wie setze ich meine drei media-queries auf die JS-Eigenschaften innerWidth, innerHeight, ... um“, das dann zusammenbasteln, einen Denkfehler begehen und dann noch dreimal nachbessern. Zumal eine Umrechnung wahrscheinlich oft nötig sein dürfte, innerWidth und innerHeight liefern bekanntlich nur Pixelwerte. Wenn du deine media queries aber nun auf ... sagen wir ... auf die Verwendung von em als Maßeinheit getrimmt hast, bekommst du Probleme.

    Oder du machst deine Verzeigung im Javascript direkt via window.matchMedia() an haargenau den gleichen media queries fest, die du auch verwendet hast, um das CSS richtig anzuwenden und kannst sichergehen, dass (in unterstützenden Browsern) alles glatt läuft.

    Gerade bei komplexeren media queries wird das wahrscheinlich sehr sinnvoll sein - Höhen- und Breitenangaben gehen ja vielleicht noch, aber Geräte-Eigenschaften wie color, color-index, light-level möchte ich nicht mit einfachen JavaScript-Eigenschaften nachschauen, und selbst wenn das ginge würde ich mir diese Eigenschaften nicht nur für diesen einen Zweck merken wollen. Dann doch lieber den media-querie benutzen, den ich schon kenne und mir in meiner Weisheit aus den Fingern gezogen habe.

    Nur weil die meisten media queries keinen Gebrauch von diesen komplexeren Methoden machen heißt das ja nicht, dass man sie unter den Tisch fallen lassen kann.

    Oh, und die Eigenschaft pointer aus den media-queries lässt sich sicher auch ganz interessant in JS verwenden, z.B. um eine JS-gesteuerte Navigation zwischen einer hover-Bedienung und einem alternativen Konzept für Touchgeräte umzuschalten. Oder so.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    1. @@Camping_RIDER

      Bis eben war ich noch bei dir, aber hier

      Oh, und die Eigenschaft pointer aus den media-queries lässt sich sicher auch ganz interessant in JS verwenden, z.B. um eine JS-gesteuerte Navigation zwischen einer hover-Bedienung und einem alternativen Konzept für Touchgeräte umzuschalten. Oder so.

      übersiehst du, glaube ich, dass es es nicht „entweder Maus oder Touch“ heißen kann, sondern „Maus oder Touch“, was „und“ mit einschließt. Es gibt schließlich Geraäte, die bieten beides gleichzeitig.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Aloha ;)

        Bis eben war ich noch bei dir, aber hier

        Oh, und die Eigenschaft pointer aus den media-queries lässt sich sicher auch ganz interessant in JS verwenden, z.B. um eine JS-gesteuerte Navigation zwischen einer hover-Bedienung und einem alternativen Konzept für Touchgeräte umzuschalten. Oder so.

        übersiehst du, glaube ich, dass es es nicht „entweder Maus oder Touch“ heißen kann, sondern „Maus oder Touch“, was „und“ mit einschließt. Es gibt schließlich Geraäte, die bieten beides gleichzeitig.

        Jein. Ich hab mich hier beabsichtigt in die Nesseln gesetzt. Dass es Geräte mit beidem gibt war mir klar. Eine hover-Navigation kommt ja auch nur für die in Betracht, die nur eine Maus haben, die Logik geht also schon auf. Das von dir angesprochene OR statt XOR war mir schon klar, nur ist das Beispiel sicher nicht ganz glücklich gewesen 😉 Deshalb auch das „Oder so.“

        Vielleicht hätte ich besser geschrieben: „Falls man eine Touch-kompatible Navigation für reine Mausbenutzer auf hover downgraden möchte“ 😂

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    2. Servus!

      Aloha ;)

      Ich hau mal einfach Ideen raus, die mir so durch den Kopf gingen.

      Kennt jemand ein gutes Anwendungsbeispiel, bei dem der Einsatz von Javascript wirklich sinnvoll ist?

      Stell dir eine responsive Seite vor,....

      Du könntest jetzt hergehen, und dir überlegen „wie setze ich meine drei media-queries auf die JS-Eigenschaften innerWidth, innerHeight, ... um“, das dann zusammenbasteln, einen Denkfehler begehen und dann noch dreimal nachbessern. Zumal eine Umrechnung wahrscheinlich oft nötig sein dürfte, innerWidth und innerHeight liefern bekanntlich nur Pixelwerte. Wenn du deine media queries aber nun auf ... sagen wir ... auf die Verwendung von em als Maßeinheit getrimmt hast, bekommst du Probleme.

      Oder du machst deine Verzeigung im Javascript direkt via window.matchMedia() an haargenau den gleichen media queries fest, die du auch verwendet hast, um das CSS richtig anzuwenden und kannst sichergehen, dass (in unterstützenden Browsern) alles glatt läuft.

      Ja, danke. Screen Size Detection mit Window.innerWidth Screen.width bzw. Screen.availWidth wäre meine nächste Frage gewesen.

      Aber einen Anwendungsfall, indem man per JS bei bestimmten Medienmerkmalen irgendetwas anderes als CSS setzt, evtl. andere Elemente verwendet, habt ihr auch nicht, oder?

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Aloha ;)

        Aber einen Anwendungsfall, indem man per JS bei bestimmten Medienmerkmalen irgendetwas anderes als CSS setzt, evtl. andere Elemente verwendet, habt ihr auch nicht, oder?

        Seit CSS Animationen kann sind die sinnvollen Einsatzmöglichkeiten von Javascript ein wenig zurückgegangen. Ich kann mir vorstellen, dass media queries wie hover, grid, printund insbesondere speech einen Unterschied machen. Konkretes Beispiel will mir aber keins einfallen.

        Wobei... nun ja. Beispiel speech. Sagen wir mal ich bau mir ein Moorhuhn-Spiel (oder was simpleres, aber irgendwas, was eben nur bedienbar ist, wenn man es auch sieht / sehen kann) in einem canvas. Dann liefere ich für media-query speech statt dem Canvas einen Text aus à la „An dieser Stelle gibt es an Bildschirm-Ausgabegeräten ein Moorhuhn-Spiel.“

        Ja, ich weiß, das hat noch Kanten, aber mal als erste Idee, quasi sowas wie ein selbstgemachter alt-Text für Elemente, bei denen keiner von Haus aus vorgesehen ist.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        1. @@Camping_RIDER

          Dann liefere ich für media-query speech statt dem Canvas einen Text aus à la „An dieser Stelle gibt es an Bildschirm-Ausgabegeräten ein Moorhuhn-Spiel.“

          Gibt es irgendwelche Clients, die auf diesen Medientypen speech ansprechen?

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Aloha ;)

            Dann liefere ich für media-query speech statt dem Canvas einen Text aus à la „An dieser Stelle gibt es an Bildschirm-Ausgabegeräten ein Moorhuhn-Spiel.“

            Gibt es irgendwelche Clients, die auf diesen Medientypen speech ansprechen?

            Da bin ich überfragt. Auf was sprechen Screenreader denn an, beispielsweise? screen?

            Da viele andere media-Typen von damals™️ inzwischen deprecated sind und speech nicht, ging ich davon aus, dass Relevanz gegeben ist.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. @@Camping_RIDER

              Auf was sprechen Screenreader denn an, beispielsweise? screen?

              Ja, selbstverständlich. Deshalb heißen sie ja Screenreader.

              Genau genommen sprechen nicht Screenreader darauf an, sondern Browser. Screenreader lesen vor, was auf dem Bildschirm zu sehen ist.

              Screenreader sind keine akustischen Browser. Solche wären denkbar; ich weiß aber nicht, ob es sowas überhaupt gibt.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Aloha ;)

                Screenreader sind keine akustischen Browser. Solche wären denkbar; ich weiß aber nicht, ob es sowas überhaupt gibt.

                ACK; mir war nicht bewusst, dass es sowas nicht gibt. Ich bin davon ausgegangen, dass Screenreader, die auf Basis normaler Browser arbeiten, nicht die einzige Sprach-Repräsentation von Webseiten sind, die so kreucht und fleucht.

                Das macht das Beispiel natürlich wieder recht nutzlos. Ähnlich gelagert ist das wohl mit grid - Browser für die Kommandozeile o.ä. haben einfach nicht genug Relevanz, um ein gutes Beispiel abzugeben.

                print ist leider noch weniger zu gebrauchen. Zwar wäre schon denkbar, dass für die Druckansicht zusätzliche Elemente dazukommen oder Elemente anders gewählt werden, Druckansichten sind aber halt nun mal auch sehr statisch und nicht gerade auf JavaScript angewiesen, das ja mehr für Interaktivität steht.

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                1. Aloha ;)

                  Ein hab ich noch:

                  Ein color-picker in Javascript, der unter monochromen Displays entweder durch einen „Schade, sie haben leider kein Farbdisplay“-Hinweis oder durch ein reines Graustufen-Äquivalent ersetzt wird.

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                  # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
              2. Hallo Gunnar.

                Screenreader sind keine akustischen Browser. Solche wären denkbar; ich weiß aber nicht, ob es sowas überhaupt gibt.

                Ein Kollege lässt sich Texte im Browser manchmal per Javascript morsen.

                MfG, at

            2. Servus!

              Gibt es irgendwelche Clients, die auf diesen Medientypen speech ansprechen?

              Da bin ich überfragt. Auf was sprechen Screenreader denn an, beispielsweise? screen?

              Da viele andere media-Typen von damals™️ inzwischen deprecated sind und speech nicht, ging ich davon aus, dass Relevanz gegeben ist.

              CSS Speech scheint tot zu sein, nachdem Opera mit Version 15 die einzig vorhandene Unterstützung eingestellt hat.

              Als Ersatz gibt's SpeechSynthesis, das aber auch nicht the Yellow of the egg is.

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste
          2. Hallo Gunnar.

            Gibt es irgendwelche Clients, die auf diesen Medientypen speech ansprechen?

            Ob sie ihn verstehen, weiß ich nicht, aber zumindest antworten sie nicht.

            MfG, at

      2. Hallo Matthias,

        Aber einen Anwendungsfall, indem man per JS bei bestimmten Medienmerkmalen irgendetwas anderes als CSS setzt, evtl. andere Elemente verwendet, habt ihr auch nicht, oder?

        Keine Ahnung ob es das ist, was du suchst, aber ich verwende es im Forum um zu prüfen ob wir unterhalb des Breakpoints sind. Falls ja scrolle ich zum main:

              var mql = window.matchMedia("only screen and (min-width: 35em)");
              if(!mql.matches && !document.location.hash) {
                window.scrollTo(0, $("main").offset().top);
              }
        

        LG,
        CK

        1. Servus!

          @@Camping-Rider @@Christian Kruse

          Keine Ahnung ob es das ist, was du suchst, ...

          Ich weiß es ja selber nicht. :-)

          Auf W3schools gibt dieses sehr einfache Beispiel und ich habe einfach etwas Pfifiges, Besonderes für unsere Live-Beispiele gesucht. Wenn ich nichts finde, kommen irgendwann bestimmt noch Ideen von anderen.

          Ich habe jetzt einfach mal Syntax, Links und zwei Dummy-Beispiele im Artikel, wer ihn ausbauen möchte - nur zu!

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste