Jenseits von Haltepunkten: Nutzung von Benutzerpräferenz-Medienabfragen in CSS

Wenn Sie Websites oder Apps erstellen, arbeiten Sie wahrscheinlich mit Medienabfragen. Mit diesen praktischen CSS-Tools können Sie Ihr Layout an die Größe des Geräts anpassen. Sie sind ein wichtiger Bestandteil des responsiven Designs.

Sie können eine Abfrage basierend auf der Breite des Geräts, seinem Seitenverhältnis, seiner Ausrichtung und mehr durchführen. Dies alles ermöglicht Ihnen die Feinabstimmung Ihres Layouts für das verwendete Gerät.

Sie wissen vielleicht nicht, dass es andere verfügbare Medienabfragen gibt, mit denen Sie Ihre Website oder App basierend auf den Präferenzen des Benutzers und nicht auf der Gerätegröße und -ausrichtung anpassen können.

Medienabfragen zu Benutzerpräferenzen

Es gibt mehrere Medienabfragen, die sich mit Benutzerpräferenzen befassen. Sie können diese verwenden, um das Erlebnis Ihrer App für den Benutzer zu optimieren.

Automatischer Dunkelmodus mit bevorzugtem Farbschema

Der Dunkelmodus ist heutzutage überall. Es scheint, als ob jede Website jetzt über die Umschalttaste „Sonne/Mond“ verfügt, mit der man zwischen hellem und dunklem Modus wechseln kann. Sie können noch einen Schritt weiter gehen und die Medienabfrage „Preferes-Color-Schema“ verwenden, um automatisch zu ermitteln, ob das Gerät des Benutzers einen hellen oder dunklen Farbmodus verwendet.

So funktioniert es: Definieren Sie Ihre CSS-Stile für den Lichtmodus wie gewohnt. Fügen Sie dann die MedienabfragePreferes-Color-Schema: Dark hinzu. Fügen Sie dort CSS-Regeln hinzu, die Ihre Lichtmodusfarben überschreiben:

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Tipp: Erstellen Sie Themes mit CSS-Variablen

Um das Leben ein wenig einfacher zu machen, können Sie alle Ihre Farben in einem Design, einer Reihe von CSS-Variablen, definieren. Dann müssen Sie in Ihrem Preferences-Color-Scheme: Dark-Block nur die Variablen neu definieren, anstatt Ihre CSS-Selektoren und -Regeln erneut hinzuzufügen:

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Reduzieren Sie Animationen mit Preferences-Reduced-Motion

Animationen können das Erlebnis Ihrer App verbessern, aber Animationen können für Benutzer mit Seh- oder Vestibularproblemen schwierig sein. Um diese Benutzer zu unterstützen, verfügen einige Geräte und Betriebssysteme in den Benutzereinstellungen über eine Option zur Bewegungsreduzierung.

Mit der Medienabfrage „Preferred-Reduced-Motion“ können Sie erkennen, ob eine solche Option für das Gerät des Benutzers aktiviert ist. Sie können dann alternative Animationen verwenden, die weniger intensiv sind (oder sie ganz ausschalten).

Hier ist ein Beispiel für die Verwendung von Preferences-Reduced-Motion zum Deaktivieren einer Animation.

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

Eines sollten Sie beachten: Wenn Sie Animationen wie diese deaktivieren, stellen Sie sicher, dass Sie keinen Code haben, der auf einem Animationend-Ereignis basiert. Wenn Sie die Animation wie oben gezeigt auf „Keine“ setzen, wird dieses Ereignis nie ausgelöst.

Denken Sie daran, dass Sie Animationen nicht ausschalten müssen, wenn Sie „reduzierte Bewegung“ bevorzugen: Übereinstimmungen reduzieren! Angenommen, Sie haben eine ausgefallene Enthüllungsanimation, bei der das Element ins Blickfeld springt. Wenn der Benutzer eine reduzierte Bewegung wünscht, können Sie dies so ändern, dass es sich um eine einfache Einblendanimation handelt.

Adaptiver Kontrast mit Vorzugskontrast

Einige Benutzer mit Sehschwierigkeiten haben möglicherweise einen erhöhten Kontrast auf ihrem Gerät aktiviert. Sie können solche Situationen mit der Abfrage „Preferences-Contrast Media“ bewältigen.

Wenn diese Medienabfrage übereinstimmt, können Sie den Kontrast anpassen, um die Anzeige für diese Benutzer zu erleichtern.

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Medienabfragen mit JavaScript prüfen

Angenommen, Sie animieren mit JavaScript – vielleicht verwenden Sie beispielsweise die Web Animations API. Da diese Animationen nicht im CSS definiert sind, können Sie sie nicht mit der Medienabfrage „preferreds-reduced-motion“ deaktivieren.

Oder können Sie?

Ja! Mit der Methode window.matchMedia können Sie eine Medienabfrage aus JavaScript auswerten. Die Medienabfrage wird als Argument übergeben und die Methode gibt eine sogenannte MediaQueryList zurück.

Dieses Objekt verfügt über eine Übereinstimmungseigenschaft, bei der es sich um einen booleschen Wert handelt, der angibt, ob diese Medienabfrage derzeit übereinstimmt oder nicht. Basierend auf dem Wert können Sie entscheiden, ob eine Animation erfolgen soll oder nicht.

Hier ist ein einfaches Beispiel, das zeigt, wie window.matchMedia verwendet werden kann, um animate für ein DOM-Element bedingt aufzurufen:

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Auf Veränderungen reagieren

Eine MediaQueryList verfügt sogar über ein Änderungsereignis, das ausgelöst wird, wenn sich die Bedingungen ändern und die Medienabfrage nicht mehr gilt.

Angenommen, Sie haben JavaScript-Code, den Sie nur für große Displays ausführen möchten. Wenn die Bildschirmgröße des Benutzers klein ist, sollten Sie diesen Code überspringen. Sie können dies tun, indem Sie window.matchMedia mit einer Abfrage mit maximaler Breite oder etwas Ähnlichem aufrufen.

Angenommen, der Benutzer ändert später die Größe des Fensters und Sie möchten nun den für den großen Bildschirm spezifischen JavaScript-Code ausführen. Warten Sie einfach auf das Änderungsereignis der MediaQueryList, und Sie können die Übereinstimmungseigenschaft des Ereignisses überprüfen, um den neuen Wert zu ermitteln.

Zusammenfassung

Diese Medienabfragen können Ihnen helfen, das Benutzererlebnis Ihrer Website oder App besser zu personalisieren. Sie können automatisch ein dunkles Farbschema anwenden und Ihre Animationen und Kontraste je nach Benutzerpräferenzen sogar feinabstimmen. Sie helfen auch bei der Zugänglichkeit, was immer ein Gewinn ist.

Es befindet sich noch in einem experimentellen Stadium, aber Sie können auch nach der Abfrage „Preferences-Reduced-Data“ Ausschau halten, die anzeigt, ob für das Gerät des Benutzers eine Anforderung besteht, die weniger Daten verbraucht. Dies kann verwendet werden, um alternative Inhalte bereitzustellen, die weniger Daten verbrauchen. Sie könnten beispielsweise nicht unbedingt benötigte Bilder überspringen (oder Versionen mit niedrigerer Auflösung verwenden).

Das obige ist der detaillierte Inhalt vonJenseits von Haltepunkten: Nutzung von Benutzerpräferenz-Medienabfragen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!