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

tercih-azaltılmış-hareket medya sorgusu, kullanıcının işletim sisteminden kullandığı animasyon veya hareket miktarını en aza indirmesini isteyip istemediğini algılar.

Thomas Steiner

Herkes dekoratif animasyonlardan veya geçişlerden hoşlanmaz. Bazı kullanıcılar, paralaks kaydırma, yakınlaştırma efektleri ve daha fazlasıyla karşılaştığında hareket hastalığından muzdarip olur. Kullanıcı tercihi medya sorgusu prefers-reduced-motion, bu tercihi belirtmiş kullanıcılar için sitenizin hareketi azaltılmış bir varyantını tasarlamanıza olanak tanır.

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

Geçen gün çocuklarımla buz pateni yapıyordum. Hava güneşliydi, hava güzeldi ve buz pateni pisti kalabalıktı ⛸. Tek sorun, kalabalıklarla iyi başa çıkamamamdı. Çok fazla hareketli hedef olduğunda hiçbir şeye odaklanamıyorum ve sonunda kayboluyor, neredeyse bir karınca yuvasına 🐜 bakan gibi tamamen görsel aşırı yüklenme hissine kapılıyorum.

Aynı durum web'de de zaman zaman yaşanabilir: Yanıp sönen reklamlar, gösterişli paralaks efektleri, şaşırtıcı animasyonlar, otomatik oynatılan videolar ve daha fazlası nedeniyle web bazen oldukça bunaltıcı olabilir. Neyse ki gerçek hayattan farklı olarak bunun bir çözümü var. CSS medya sorgusu prefers-reduced-motion, geliştiricilerin azaltılmış hareketi tercih eden kullanıcılar için bir sayfa varyantı oluşturmasına olanak tanır. Bu, videoların otomatik olarak oynatılmasını engellemekten, belirli dekoratif efektleri devre dışı bırakmaya ve belirli kullanıcılar için bir sayfayı tamamen yeniden tasarlamaya kadar her şeyi içerebilir.

Özelliğe geçmeden önce bir adım geri çekilip web'de animasyonların ne için kullanıldığını düşünelim. İsterseniz arka plan bilgilerini atlayıp doğrudan teknik ayrıntılara geçebilirsiniz.

Web'de animasyon

Animasyon, genellikle kullanıcıya geri bildirim sağlamak için kullanılır. Örneğin, bir işlemin alındığını ve işlendiğini bildirmek için animasyondan yararlanabilirsiniz. Örneğin, bir alışveriş web sitesindeki bir ürün, sanal alışveriş sepetine "uçmak" için animasyonla gösterilebilir ve bu animasyon sitenin sağ üst köşesinde bir simge olarak gösterilebilir.

Hareketi kullanarak iskelet ekranlar, bağlamsal meta veriler ve düşük kaliteli resim önizlemelerinin bir karışımını kullanarak kullanıcının zamanının büyük bir kısmını işgal etmek ve tüm deneyimi daha hızlı hissettirmek için kullanıcı algısını hackleme de başka bir kullanım alanıdır. Amaç, kullanıcının sırada ne olduğuna dair bağlamı sağlamak ve bu sırada içeriği mümkün olduğunca hızlı bir şekilde yüklemektir.

Son olarak, animasyonlu degradeler, paralaks kaydırma, arka plan videoları ve diğer birçok dekoratif efekt de vardır. Birçok kullanıcı bu tür animasyonları beğense de bazı kullanıcılar, dikkatlerinin dağıldığını veya yavaşladığını hissettiği için animasyonlardan hoşlanmaz. En kötü durumda, kullanıcılar gerçek hayat deneyimiymiş gibi hareket tutması yaşayabilirler. Bu yüzden bu kullanıcılar için animasyonların azaltılması tıbbi bir gerekliliktir.

Hareketle tetiklenen vestibüler spektrum bozukluğu

Bazı kullanıcılar animasyonlu içeriklerden rahatsızlık veya mide bulantısı yaşayabilir. Örneğin, kaydırmayla ilişkili ana öğe dışındaki öğeler çok fazla hareket ettiğinde kaydırma animasyonları vestibüler rahatsızlıklara neden olabilir. Örneğin, paralaks kaydırma animasyonları vestibüler bozukluklarına neden olabilir. Bunun nedeni, arka plan öğelerinin ön plandaki öğelerden farklı bir hızda hareket etmesidir. Vestibüler (iç kulak) bozukluğu reaksiyonları arasında baş dönmesi, mide bulantısı ve migren baş ağrıları bulunur. Bu durumda iyileşmek için bazen yatak istirahati gerekebilir.

İşletim sistemlerinde hareketi kaldırma

Birçok işletim sistemi, uzun süredir az hareket tercihini belirtmek için erişilebilirlik ayarlarına sahiptir. Aşağıdaki ekran görüntülerinde macOS Mojave'in Hareketi azalt tercihi ve Android Pie'in Animasyonları kaldır tercihi gösterilmektedir. Bu tercihler, işaretlendiğinde işletim sisteminin uygulama başlatma animasyonları gibi süsleme efektlerini kullanmamasına neden olur. Uygulamalar da bu ayarı dikkate alabilir ve tüm gereksiz animasyonları kaldırabilir.

Web'de hareketi kaldırma

Medya Sorguları Düzey 5, daha az hareket içeren kullanıcı tercihini de web'e getirir. Medya sorguları, yazarların, oluşturulan dokümandan bağımsız olarak kullanıcı aracısının veya cihazın değerlerini ya da özelliklerini test edip sorgulamasına olanak tanır. Medya sorgusu prefers-reduced-motion, kullanıcının kullandığı animasyon veya hareket miktarını en aza indirmek için bir işletim sistemi tercihi ayarlayıp ayarlamadığını algılamak için kullanılır. İki olası değer alabilir:

• no-preference: Kullanıcının temel işletim sisteminde tercih yapmadığını gösterir. Bu anahtar kelime değeri, Boole bağlamında false olarak değerlendirilir.
• reduce: Kullanıcının, arayüzlerde hareket veya animasyonun en aza indirilmesini (tercihen tüm gereksiz hareketlerin kaldırıldığı noktaya kadar) belirten bir işletim sistemi tercihi belirlediğini gösterir.

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

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

Her ikisini de açıklamak için kullanıcının tıklamasını istediğim önemli bir kayıt düğmem olduğunu varsayalım. Dikkat çekici bir "titreşim" animasyonu tanımlayabilirim, ancak iyi bir web vatandaşı olarak bunu yalnızca animasyonları açıkça kabul eden kullanıcılar için oynatacağım, animasyonları devre dışı bırakan kullanıcılar veya tarayıcı sorgularını anlamayan tarayıcılardaki kullanıcılar için oynatacağım.

/*
  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;
  }
}

JavaScript ile prefers-reduced-motion öğesinin nasıl kullanılacağını açıklamak için Web Animasyonları API ile karmaşık bir animasyon tanımladığımı varsayalım. CSS kuralları, kullanıcı tercihi değiştiğinde tarayıcı tarafından dinamik bir şekilde tetiklenecek olsa da, JavaScript animasyonları için değişiklikleri kendim dinlemem ve ardından potansiyel olarak yayındaki animasyonlarımı manuel olarak durdurmam (veya kullanıcı izin verirse bunları yeniden başlatmam) gerekiyor:

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 etrafındaki parantezlerin zorunlu olduğunu unutmayın:

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

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

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

İlginç bir kullanım alanı, animasyonlu bir AVIF, WebP veya GIF'in oynatılmasını media özelliğine bağımlı hale getirmektir. (prefers-reduced-motion: no-preference) true olarak değerlendirilirse animasyonlu sürümü, aksi takdirde statik sürümü görüntüleyebilirsiniz:

<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. Farklılığı görmek için cihazınızın hareket tercihlerini değiştirmeyi deneyin.

İstekte bulunurken kullanıcının tercihlerini keşfetme

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

Demo

Rogério Vicente'nin muhteşem 🐈 HTTP durum kedileri'ni temel alan küçük bir demo oluşturdum. Öncelikle, şakamızı takdir edin. Çok komik. Bekliyorum. Tekrar katıldığınıza göre demoyu tanıtayım. Kaydırdığınızda her HTTP durum kategorisi sağ veya sol tarafta dönüşümlü olarak görünür. 60 FPS'de akıcı bir animasyondur ancak daha önce de belirtildiği gibi bazı kullanıcılar bu animasyondan hoşlanmayabilir veya hatta hareket hastalığına yakalanabilir. Bu nedenle demo, prefers-reduced-motion değerine göre programlanmıştır. Bu işlem dinamik olarak bile çalışır. Böylece kullanıcılar, yeniden yükleme yapmadan tercihlerini anında değiştirebilir. Kullanıcılar hareketi azaltmayı tercih ederse gerekli olmayan gösterme animasyonları kaldırılır ve yalnızca normal kaydırma hareketi gösterilir. Aşağıdaki ekran kaydı, demonun kullanımdaki halini gösterir:

Sonuçlar

Kullanıcı tercihlerine saygı duymak modern web siteleri için çok önemlidir. Tarayıcılar, web geliştiricilerin bunu yapmasını sağlamak için giderek daha fazla özellik sunuyor. Kullanıcının açık veya koyu renk şemasını tercih edip etmediğini algılayan prefers-color-scheme de kullanıma sunulan bir örnektir. prefers-color-scheme hakkında her şeyi Merhaba Karanlık, Eski Arkadaşım 🌒 makalemde okuyabilirsiniz.

CSS Çalışma Grubu daha fazla kullanıcı tercihi medya sorgusunu şu gibi standartlaştırıyor: prefers-reduced-transparency (kullanıcının şeffaflığın azaltılmasını tercih edip etmediğini algılar), prefers-contrast (kullanıcının sistemden bitişik renkler arasındaki kontrast miktarını artırmasını veya azaltmasını isteyip istemediğini algılar) ve inverted-colors (kullanıcının renkleri ters çevirmeyi tercih edip etmediğini algılar).

(Bonus) Tüm web sitelerinde daha az hareket edilmesini 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. Bunu yapmanın bir yolu, ziyaret ettiğiniz her web sayfasına aşağıdaki CSS'yi içeren bir stil sayfası yerleştirmektir. Bu işlemi yapmanıza olanak tanıyan çeşitli tarayıcı uzantıları (kullanımı kendi sorumluluğunuzdadır) mevcuttur.

@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;
  }
}

Bunun nedeni, önceki CSS'nin tüm animasyon ve geçiş sürelerini, artık fark edilmeyecek kadar kısa bir süreye kadar geçersiz kılmasıdır. Bazı web siteleri düzgün çalışması için bir animasyonun çalıştırılmasına ihtiyaç duyduğundan (belki de belirli bir adım animationend etkinliğinin tetiklenmesine bağlı olduğundan) daha radikal animation: none !important; yaklaşımı işe yaramaz. Önceki saldırının bile tüm web sitelerinde başarılı olacağı garanti edilmez (örneğin, Web Animations API kullanılarak başlatılan hareketi durduramaz), bu nedenle bir kesinti fark ettiğinizde devre dışı bırakmayı unutmayın.

İlgili Bağlantılar

• Medya Sorguları Seviye 5 spesifikasyonunun en son Düzenleyici Taslağı.
• prefers-reduced-motion adresindeki Chrome Platform Durumu sayfasını ziyaret edin.
• prefers-reduced-motion Chromium hatası.
• Yayınlama işlemini gerçekleştirme niyeti

Teşekkür ederiz

prefers-reduced-motion'yi Chrome'a uygulayan ve Rob Dodson ile birlikte bu dokümanı da inceleyen Stephen McGruer'a teşekkür ederiz. Unsplash'taki Hannah Cauhepe tarafından oluşturulan hero resim.