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