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.

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. 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 neredeyse bir karınca yuvasına 🐜 bakıyormuşum gibi tamamen görsel aşırı yüklenme hissiyle kayboluyorum.

Gerçek hayatta görsel aşırı yüklenme.

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, otomatik oynatılan videolardan kaçınmaktan, tamamen dekoratif olan belirli 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 sitesinde bir ürünün, sitenin sağ üst köşesinde simge olarak gösterilen sanal bir alışveriş sepetine "uçması" için animasyon uygulanabilir.

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ı hacklemek de başka bir kullanım alanı olabilir. Amaç, kullanıcıya nelerin geleceğine dair bağlam bilgisi vermek ve bu sırada öğeleri olabildiğince 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 animasyonlardan hoşlanırken bazı kullanıcılar dikkatlerinin dağıldığını veya hızlarının düştüğünü düşündüğü için bu animasyonlardan hoşlanmaz. En kötü durumda, kullanıcılar gerçek bir deneyimmiş gibi hareket hastalığından bile muzdarip olabilir. Bu nedenle, bu kullanıcılar için animasyonları azaltmak tıbbi bir zorunluluktur.

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ı, arka plan öğeleri ön plan öğelerinden farklı bir hızda hareket ettiği için vestibüler bozukluklara neden olabilir. Vestibüler (iç kulak) bozukluğu reaksiyonları arasında baş dönmesi, mide bulantısı ve migren baş ağrıları bulunur ve bazen iyileşmek için yatak istirahati gerekir.

İşletim sistemlerinde hareketi kaldırma

Birçok işletim sisteminde, uzun süredir hareket azaltma tercihini belirtmek için erişilebilirlik ayarları vardır. 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 sistemi, uygulama başlatma animasyonları gibi dekoratif efektler kullanmaz. Uygulamalar da bu ayarı dikkate alabilir ve tüm gereksiz animasyonları kaldırabilir.

Web'de hareketi kaldırma

Medya Sorguları 5. Seviye, azaltılmış hareket kullanıcı tercihini web'e de getirir. Medya sorguları, yazarların oluşturulmakta olan dokümandan bağımsız olarak kullanıcı aracısının veya görüntüleme cihazının değerlerini ya da özelliklerini test etmesine ve 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 herhangi bir tercihte bulunmadığını belirtir. 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 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 çeken bir "titreşim" animasyonu tanımlayabilirim ancak iyi bir web kullanıcısı olarak bunu yalnızca animasyonlarla ilgili açık bir şekilde sorun yaşamayan kullanıcılar için oynatırım. Animasyonları devre dışı bırakan kullanıcılar veya medya sorgusunu anlamayan tarayıcılardaki kullanıcılar gibi diğer kullanıcılar için oynatmam.

/*
  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 kapsam dışında kalmayı seçen kullanıcılarınızın bu CSS'yi indirmesini önleyebilirsiniz. Bunun için, animasyonla ilgili tüm CSS'yi yalnızca link öğesindeki media özelliğini kullanarak koşullu olarak yüklediğiniz ayrı bir stil sayfasına aktarın 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

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 olarak tetiklenir. JavaScript animasyonları için ise değişiklikleri kendim dinlemem ve ardından, yayınlanmakta olan animasyonları manuel olarak durdurmam (veya kullanıcı izin verirse yeniden başlatmam) gerekir:

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:

Yapılmaması gerekenler:

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

Yapılması gerekenler

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östermek güvenlidir:

<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 bulunulan sırada kullanıcının tercihlerini keşfetme

Sec-CH-Prefers-Reduced-Motion istemci ipucu başlığı, sitelerin istekte bulunurken isteğe bağlı olarak kullanıcının hareket tercihlerini almasına olanak tanır. Bu sayede sunucular, performans nedeniyle doğru CSS'yi satır içi olarak yerleştirebilir.

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:

Uygulamanın prefers-reduced-motion demosu videosu

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, prefers-reduced-transparency (kullanıcı azaltılmış şeffaflığı tercih ediyorsa algılar), prefers-contrast (kullanıcı sistemin bitişik renkler arasındaki kontrast miktarını artırmasını veya azaltmasını isteyip istemediğini algılar) ve inverted-colors (kullanıcı ters çevrilmiş renkleri tercih ediyorsa algılar) gibi daha fazla kullanıcı tercihi medya sorgusunu standartlaştırıyor.

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

Her site prefers-reduced-motion'ü kullanmaz veya sizin için yeterince önemli olmayabilir. 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ı vardır (Kullanımı kendi sorumluluğunuzdadır).

@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 çözümün tüm web sitelerinde işe yarayacağı garanti edilmez (örneğin, Web Animasyonları API kullanılarak başlatılan hareketi durduramaz). Bu nedenle, kesinti olduğunu fark ettiğinizde bu çözümü devre dışı bıraktığınızdan emin olun.

İ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.