Es gibt ein Code-Snippet, das ich ständig sehe, wenn über die Media-Query prefers-reduced-motion gesprochen wird. Hier ist es
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
Animation im Web ist oft ein umstrittenes Thema. Ich glaube, teilweise liegt es daran, dass schlechte Animationen blendend offensichtlich sind, während gut ausgeführte Animationen nahtlos in den Hintergrund übergehen. Wenn sie gut gemacht ist, kann Animation eine Website wirklich aufwerten, sei es nur …
In der dieswöchigen Zusammenfassung beleuchten wir einen Vorschlag für ein neues <popup>-Element, überprüfen die Verwendung von prefers-reduced-motion auf preisgekrönten Websites, lernen, wie man sich für Cross-Origin-Isolation entscheidet, sehen, wie WhiteHouse.gov Barrierefreiheit angeht, und warnen vor den Gefahren von 100vh. ...
Im Polypane-Blog (es gibt keine Autorenangabe, aber vermutlich ist es Kilian Valkhof (ist es)) gibt es einen großartigen Artikel, Creating websites with prefers-reduced-data, über die prefers-reduced-data Media Query. Noch keine Browserunterstützung, aber irgendwann können Sie...
Das <picture>-Element hat einen Trick, den es ausführen kann, bei dem es verschiedene Bildformate in unterschiedlichen Situationen anzeigt. Wenn Sie sich nur für Formate aus Leistungsgründen interessieren, vielleicht würden Sie
<picture<source srcset="img/waterfall.avif" type="image/avif"<source srcset="img/waterfall.webp" Es stimmt, Web-Animationen können barrierefrei sein! Manchmal erfordert es nur ein wenig zusätzliche Anstrengung, um sicherzustellen, dass sie es sind. Es gibt strategische Dinge, die wir tun können, um sicherzustellen, dass unsere Animationen einen positiven Einfluss auf die Barrierefreiheit haben, wie z. B. ...
In den letzten Jahren haben wir viele Veränderungen und Divergenzen bei Webtechnologien erlebt. Im Jahr 2020 sehe ich uns als Web-Community auf zwei Haupttrends/Ziele zusteuern: Erweiterbarkeit und Interoperabilität. Lassen Sie uns diese aufschlüsseln....
Hier ist ein echter CSS/HTML-Trick von Brad Frost und Dave Rupert, bei dem sie das <picture></picture>-Element verwenden, um eine GIF-Datei durch ein Bild zu ersetzen, wenn der Benutzer die Bewegungsreduzierung aktiviert hat. So geht Brad vor...
Vor zwei Jahren schrieb ich über prefers-reduced-motion, eine Media-Query, die in Safari 10.1 eingeführt wurde, um Menschen mit vestibulären Erkrankungen und Krampfleiden bei der Nutzung des Webs zu helfen. Der Artikel lieferte einige Hintergrundinformationen zur Media-Query, warum sie benötigt wurde und …
