azaltılmış-hareketi tercih eder: Bazen daha az hareket daha çok

Tercih edilen azaltılmış hareket medya sorgusu, kullanıcının kullandığı animasyon veya hareket miktarını en aza indirmek için işletim sistemini değiştiriyorum.

Thomas Steiner

Süslemeli animasyonları ve geçişleri herkes sevmez. Bazı kullanıcılar da hareketi doğrudan algılayabilir. hastalıkları ile ilgili sorunları çözebilir. Kullanıcı tercihi medya prefers-reduced-motion sorgusu, dönüşüm işlemi gerçekleştiren kullanıcılar için sitenizin harekete azaltılmış bir varyantını tarafından belirtildi.

Tarayıcı Desteği

• . 74
• . 79
• . 63
• . 10.1

Kaynak

Gerçek hayatta ve web'de çok fazla hareket

Geçen gün çocuklarımla buz pateni yapıyordum. Güzel bir gündü. Güneşliydi ve buzluydu pist insanla doluydu ⛸. Tek sorun şu: Kalabalıklarla iyi başa çıkamıyorum. Bununla hiçbir şeye odaklanamıyor, kendinizi her yönüyle kaybediyor ve her şeyi görsel aşırı yüklenmelidir, tıpkı bir karıncaya bakmak gibi 🐜.

Gerçek hayattaki görsel aşırı yoğunluk.

Bazen aynısı web'de de gerçekleşebilir: yanıp sönen reklamlar, süslü paralaks efektleri, şaşırtıcı animasyonları, otomatik oynatılan videoları ve daha fazlasını ortaya çıkarır. Web bazen oldukça bunaltıcı olabiliyor. Ne mutlu ki, gerçek hayattakinden farklı olarak bunun bir çözümü var. CSS medya sorgusu prefers-reduced-motion, geliştiricilerin bir sayfanın varyantını kendileri daha az harekettir. Bu durum, otomatik oynatılan videolardan kaçınarak Tamamen süsleme amaçlı belirli efektleri devre dışı bırakıp bir sayfayı belirli kullanıcılar için tamamen yeniden tasarlamaya kadar.

Bu özelliğe geçmeden önce, bir adım geri gidip animasyonların hangi amaçlarla kullanıldığına bakalım. hale getirecektir. İsterseniz arka plan bilgilerini atlayabilir ve doğrudan teknik ayrıntılara atlayın.

Web'de animasyon

Animasyon, çoğu zaman kullanıcıya geri bildirim vermek için kullanılır. Örneğin, kullanıcıya bir işlem alındı ve işleniyor. Örneğin, bir alışveriş web sitesindeki bir ürün "uçmak" için animasyonlu olmalıdır sanal bir alışveriş sepetine eklenir. Alışveriş sepetinde, ekranın sağ üst köşesinde simge gösterir.

Başka bir kullanım alanı da kullanıcı algısını hack'leme Bunun için iskelet ekranları, bağlamsal meta verileri ve düşük kaliteli resim önizlemelerini bir arada kullanarak kullanıcının çok fazla zamanını işgal eder ve tüm deneyimi daha hızlı hissettirir. Burada amaç içeriği olabildiğince hızlı şekilde yüklemenizi sağlar.

Son olarak, animasyonlu renk geçişleri, paralaks kaydırma, arka plan gibi dekoratif efektler de var video ve diğer birkaç video. Birçok kullanıcı bu tür animasyonları beğense de bazı kullanıcılar dikkati dağılmış veya yavaşlamış hissederler. En kötü durumda, kullanıcılar hareketten zarar görebilirler. Hastalık durumları gibi durumları yaşayabilirler; bu nedenle bu kullanıcılar için animasyonları azaltmak tıbbi bir uygulamadır. gerekliliği.

Hareketle tetiklenen vestibüler spektrum bozukluğu

Bazı kullanıcılar, Animasyonlu içerikten dikkati dağılması veya mide bulantısı. Örneğin, kaydırma animasyonları, ana öğesinin çok fazla yer değiştirmesi gerekir. Örneğin, paralaks kaydırma animasyonları Arka plandaki öğeler ön plandan farklı bir hızda hareket ettiği için vestibüler bozukluklara neden olabilir öğeler. Vestibüler (iç kulak) bozukluğu reaksiyonları arasında baş dönmesi, bulantı ve migren yer alır olabilir ve bazen iyileşmek için yatakta dinlenmeyi gerektirir.

İşletim sistemlerindeki hareketi kaldır

Birçok işletim sistemi, azaltılmış uzun süre hareket etmesi gerekir. Aşağıdaki ekran görüntüleri macOS Mojave'in Hareketi azalt tercihini gösteriyor ve Android Pie'nın Animasyonları kaldır tercihi. Bu tercihler işaretlendiğinde, animasyonlar gibi süsleme efektlerinin kullanılmasını önlemek için yeni bir araç kullanıyoruz. Uygulamaların kendisi bu ayara da uyarak gereksiz tüm animasyonları kaldırmalısınız.

Web'deki hareketi kaldırma

Medya Sorguları 5. Düzey daha az hareket sağlar yardımcı oluyor. Medya sorguları, yazarların değerleri veya özellikleri test etmesine ve sorgulamasına olanak tanır belgenin oluşturulmasından bağımsız olarak kullanıcı aracısı veya görüntüleme cihazından bağımsız olarak. Medya sorgusu prefers-reduced-motion kullanılıyor kullanıcının animasyon miktarını en aza indirmek için bir işletim sistemi tercihi ayarlayıp ayarlamadığını hareketle çalışır. İki olası değer alabilir:

• no-preference: Kullanıcının temel çalışma prensibinde herhangi bir tercih yapmadığını gösterir bahsedeceğim. Bu anahtar kelime değeri, boole bağlamında false olarak değerlendirilir.
• reduce: Kullanıcının işletim sistemi tercihini belirten arayüzler, tercihen gerekli olmayan tüm öğelerin gösterildiği noktaya kadar hareketi veya animasyonu en aza indirmelidir hareket kaldırılır.

CSS ve JavaScript bağlamlarından gelen medya sorgusuyla çalışma

Tüm medya sorgularında olduğu gibi prefers-reduced-motion, bir CSS bağlamından ve JavaScript bağlamı.

Her ikisini de göstermek için, kullanıcının tıklamasını istediğim önemli bir kaydolma düğmem olduğunu varsayalım. İ dikkat çekici bir "titreşim" ancak iyi bir web vatandaşı olarak yalnızca ben Animasyonlara açıkça onay veren kullanıcılar için, ancak herkes için geçerli değil. Bu kullanıcı, devre dışı bırakan kullanıcılar veya medya sorgusunu anlamayan tarayıcılar kullanan kullanıcılar gösterilir.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Not: Animasyonla ilgili çok sayıda CSS'niz varsa animasyonla ilgili tüm CSS'leri dış kaynaklardan destek alarak yalnızca link öğesinde media özelliğini kullanarak koşullu olarak yüklediğiniz ayrı bir stil sayfasına sahip kullanıcıları sayfaları indirmekten kurtarabilirsiniz 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

JavaScript ile prefers-reduced-motion ile nasıl çalışacağımı göstermek için diyelim ki karmaşık bir animasyon tanımladı. Web Animations API. CSS kuralları JavaScript için, kullanıcı tercihi değiştiğinde tarayıcı tarafından dinamik olarak tetiklenir animasyonlar için değişiklikleri kendim dinlemem ve ardından yayın aşamasında olabileceklerimi manuel olarak durdurmam gerekiyor. (veya kullanıcı izin veriyorsa bunları yeniden başlatın):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Gerçek medya sorgusunun başındaki parantezlerin zorunludur:

Yapılmaması gerekenler:

window.matchMedia('prefers-reduced-motion: reduce');

Yapılması gerekenler

window.matchMedia('(prefers-reduced-motion: reduce)');

<picture> bağlamlarındaki medya sorgusuyla çalışma

İlginç bir kullanım örneği de media özelliği için de kullanılmaktadır. (prefers-reduced-motion: no-preference) işlevinin true sonucuna varması güvenlidir animasyonlu sürümü, aksi takdirde statik sürümü görüntüleyin:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Aşağıdaki örneği görebilirsiniz. Farkı görmek için cihazınızın hareket tercihlerini değiştirmeyi deneyin.

İstek sırasında kullanıcının tercihlerini keşfetme

Sec-CH-Prefers-Reduced-Motion istemci ipucu başlığı sitelerin, isteğe bağlı olarak istek sırasında kullanıcının hareket tercihlerini almasına olanak tanır, performans nedeniyle sunucuların doğru CSS'yi satır içi yapmasına olanak tanımalıdır.

Demo

Rogério Vicente'in harika çalışması üzerine küçük bir demo 🐈 HTTP durumu kediler. Öncelikle, şakayı takdir etmek için bir dakikanızı ayırın. çok komik. Ben de bekleyeceğim. Siz geri döndüğünüze göre size demo. Kaydırdığınızda, her bir HTTP durum kedisi sağ veya sol taraftan dönüşümlü olarak görünür. 60 FPS'ye kadar çok akıcı bir oyun, Ancak daha önce belirtildiği gibi, bazı kullanıcılar bunu beğenmeyebilir, hatta demo, prefers-reduced-motion şartlarına uyacak şekilde programlanmıştır. Bu özellik dinamik olarak bile çalışır. Böylece, istedikleri anda değiştirebilir, yeniden yükleme gerekmez. Kullanıcı daha az hareketi tercih ederse Gereksiz ortaya çıkarma animasyonları kaldırıldı, yalnızca normal kaydırma hareketi kaldı. İlgili içeriği oluşturmak için kullanılan aşağıdaki ekran video kaydı demonun nasıl çalıştığını gösterir:

prefers-reduced-motion demo uygulama

Sonuçlar

Kullanıcı tercihlerine saygı, modern web sitelerinin temel unsurlarından biridir ve tarayıcılar, gün geçtikçe daha fazla web geliştiricilerin bunu yapabilmesini sağlayan özellikler. Kullanıma sunduğumuz bir başka örnek de prefers-color-scheme, hangi kullanıcının açık renk şemasını mı yoksa koyu renk şemasını mı tercih ettiğini belirler. İlgili her şeyi okuyabilirsiniz: prefers-color-scheme Merhaba Darkness, Eski Arkadaşım 🌒 adlı makalemde.

CSS Çalışma Grubu daha çok proje yönetimi yaklaşımını kullanıcı tercihi medya sorguları, prefers-reduced-transparency (kullanıcının şeffaflığın azaltılmasını tercih edip etmediğini algılar) prefers-contrast (kullanıcının sistemin bitişik renkler arasındaki kontrast miktarını artırmasını veya azaltmasını istemesi), ve inverted-colors (kullanıcının tercih edilir.)

(Bonus) Tüm web sitelerinde daha az hareketi zorunlu kılma

Her sitede prefers-reduced-motion kullanılmaz veya büyük olasılıkla zevkiniz için yeterince yeterli değildir. Herhangi bir nedenle tüm web sitelerindeki hareketi durdurmak isterseniz bunu yapabilirsiniz. Paydaşlarla yapacağınız Bunun nedeni, ziyaret ettiğiniz her web sayfasına aşağıdaki CSS'yi içeren bir stil sayfası yerleştirmektir. Orada birkaç tarayıcı uzantıları kullanabileceğiniz başka bir alandır. (Tüm risk size aittir!)

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

Bu şekilde önceki CSS, tüm animasyonların ve geçişlerin sürelerini geçersiz kılar. fark edilemeyecek kadar kısa bir süre kalıyor. Bazı web siteleri bir animasyona düzgün çalışması için çalıştırması gerekir (belki de belirli bir adım, animationend etkinlik), daha radikal bir animation: none !important; yaklaşımı işe yaramayacaktır. Önceki saldırı bile Tüm web sitelerinde başarılı olacağı garanti edilir (örneğin, Web Animations API) içerdiğinden emin olun. devre dışı bırakın.

İlgili Bağlantılar

• Son Editörün Taslağı Medya Sorguları Düzey 5 spesifikasyonları.
• prefers-reduced-motion açık Chrome Platformunun Durumu.
• prefers-reduced-motion Chromium hatası.
• Yanıp sönme Yayınlamayı uygulama amacı.

Teşekkür

Bu mimar Stephen McGruer'a Chrome'da prefers-reduced-motion ve Rob Dodson—bu belgeyi de inceledi. Hannah Cauhepe'nin Unsplash'teki hero resmi.