Tercih edilen 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.
Süslemeli animasyonları veya geçişleri herkes sevmez. Bazı kullanıcılar paralaks kaydırma, yakınlaştırma efektleri gibi detaylarla karşılaştığında hareket mide bulantısıyla karşılaşırlar. Kullanıcı tercihi medya sorgusu prefers-reduced-motion, bu tercihi belirten kullanıcılar için sitenizin harekete 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. Güzel bir gündü, güneş parlıyordu ve buz pateni insanlarla doluydu ⛸. Tek sorun şu: Kalabalıklarla iyi başa çıkamıyorum. Hareket eden bu kadar çok hedef varken hiçbir şeye odaklanamıyor ve bir noktada kayboluyorum ve tamamen görsel bir aşırı yükleme hissediyorum. Karıncanın tepesine bakmak gibi bir şey hissediyorum 🐜.
Bazen aynı şey web'de de olabilir: Yanıp sönen reklamlar, gösterişli paralaks efektleri, şaşırtıcı animasyonlar, otomatik
oynayan videolar vb. nedeniyle, web bazen web'de bazen oldukça zorlayıcı olabiliyor....
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 sayfanın varyantını oluşturmasına olanak tanır. Bu, otomatik oynatılan videolardan kaçınmadan, tamamen süsleme amaçlı belirli efektleri devre dışı bırakmaya ve bir sayfayı belirli kullanıcılar için tamamen yeniden tasarlamaya kadar her şeyi kapsayabilir.
Bu özelliğe geçmeden önce, bir adım geri gidip web'de animasyonların hangi amaçlarla kullanıldığına bakalım. İsterseniz arka plan bilgilerini atlayıp aşağıdaki teknik ayrıntılara doğrudan geçebilirsiniz.
Web'de animasyon
Animasyon genellikle kullanıcıya geri bildirim sağlamak için kullanılır. Örneğin, kullanıcıya bir işlemin alındığını ve işlendiğini bildirir. Ö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.
Diğer bir kullanım alanı da kullanıcının çok vaktini kaptırması ve tüm deneyimin daha hızlı hissetmesini sağlamak amacıyla, iskelet ekranlar, bağlamsal meta veriler ve düşük kaliteli resim önizlemelerinin bir karışımını kullanarak kullanıcı algısını hack'lemek için hareket kullanmaktır. Amaç, kullanıcının sırada neyin olduğuna dair bağlamı sağlamak ve bu sırada içerikleri mümkün olduğunca hızlı bir şekilde yüklemektir.
Son olarak, animasyonlu gradyanlar, paralaks kaydırma ve arka plan videoları gibi dekoratif efektler 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ın animasyonlu içerikten dikkati dağılır veya midesi bulanabilir. Örneğin, kaydırma animasyonları, kaydırmayla ilişkili ana öğe dışındaki öğeler çok fazla hareket ettiğinde vestibüler bozukluklara 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, bulantı ve migren baş ağrısı yer alır ve bazen iyileşmek için yatmak gerekebilir.
İşletim sistemlerindeki hareketi kaldır
Birçok işletim sistemi, uzun süredir daha az hareket tercihini belirtmek için erişilebilirlik ayarlarına sahiptir. Aşağıdaki ekran görüntüleri macOS Mojave'in Hareketi azaltma tercihini ve Android Pie'nin Animasyonları kaldır tercihini gösteriyor. Bu tercihler, işaretlendiğinde işletim sisteminin uygulama başlatma animasyonları gibi süsleme efektlerini kullanmamasına neden olur. Uygulamaların kendileri de bu ayara uyar ve bunları uygulamalı, gereksiz tüm animasyonları kaldırmalıdır.
Web'deki 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 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 belirleyip belirlemediğini belirlemek 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ındafalseolarak değerlendirilir.reduce: Kullanıcının, arayüzlerin hareketi veya animasyonu, tercihen temel olmayan tüm hareketlerin kaldırıldığı noktaya kadar en aza indirmesi gerektiğini belirten bir işletim sistemi tercihi ayarladığını belirtir.
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ından kontrol edilebilir.
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" 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;
}
}
medialink
JavaScript ile prefers-reduced-motion işlevinin nasıl çalışacağını göstermek için Web Animations API ile karmaşık bir animasyon tanımladığımı düşünelim. 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 daha sonra, yayındaki olabilecek 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 başındaki parantezlerin zorunludur:
window.matchMedia('prefers-reduced-motion: reduce');
window.matchMedia('(prefers-reduced-motion: reduce)');
<picture> bağlamlarındaki medya sorgusuyla çalışma
Örneğin, animasyonlu bir AVIF, WebP veya GIF'in media özelliğine bağlı olarak oynatılmasını sağlayabilirsiniz. (prefers-reduced-motion: no-preference), true sonucunu belirlerse animasyonlu sürümü göstermek, aksi takdirde statik sürümü görüntülemek 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. 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 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 durumu kedilere dayalı küçük bir demo hazırladım. Öncelikle, şakayı takdir etmek için bir dakikanızı ayırın.
Çok komik. Bekleyeceğim. Artık geri dönüp demoyu tanıtayım. Aşağı kaydırdığınızda her bir HTTP durum kedisi alternatif olarak sağ veya sol tarafta görünür. Bu, 60 FPS'lik oldukça sorunsuz bir animasyondur. Ancak yukarıda belirtildiği gibi, bazı kullanıcılar oyunu beğenmeyebilir, hatta hareketlerinden etkilenebilirler. Bu nedenle demo, prefers-reduced-motion kurallarına uyacak şekilde programlanmıştır. Bu yöntem dinamik olarak bile çalışır. Böylece, kullanıcılar
tercihlerini anında değiştirebilir. Yeniden yükleme gerekmez. Kullanıcı daha az hareketi tercih ederse gereksiz gösterme animasyonları ortadan kalkar ve yalnızca normal kaydırma hareketi kalır. Aşağıdaki ekran video kaydında demo nasıl işlenmiştir?
prefers-reduced-motion demo
uygulamasının videosu
Sonuçlar
Kullanıcı tercihlerine saygı duymak, modern web sitelerinin anahtarıdır ve tarayıcılar, web geliştiricilerinin bunu yapabilmesi için gittikçe daha fazla özelliği kullanıma sunmaktadır. Sunulan bir diğer örnek de, kullanıcının açık renk mi yoksa koyu renk şeması mı tercih ettiğini algılayan prefers-color-scheme. prefers-color-scheme ile ilgili her şeyi Merhaba Darkness, Eski Arkadaşım 🌒 adlı makalemde bulabilirsiniz.
CSS Çalışma Grubu şu anda 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 çevrilmiş olarak tercih edip etmediğini algılar) gibi daha fazla kullanıcı tercihi medya sorgusunu standart hâle getirmektedir.
(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 zevkinize göre yeterli olmayacaktır.
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. Buna izin veren çeşitli tarayıcı uzantıları (risk size ait olmak üzere kullanın!) vardı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;
}
}
Bu çalışma şekline göre yukarıdaki CSS, tüm animasyonların ve geçişlerin sürelerini artık fark edilemeyecek kadar kısa bir süre için geçersiz kılar. Bazı web sitelerinin doğru çalışması için bir animasyonun çalıştırılması gerektiğinden (belirli bir adım animationend etkinliğinin tetiklenmesine bağlı olabilir.) daha radikal animation: none !important; yaklaşımı işe yaramaz. Yukarıdaki saldırının bile tüm web sitelerinde başarılı olacağı garanti edilmez (örneğin, Web Animations API ile başlatılan hareketi durduramaz), bu nedenle bir kesinti fark ettiğinizde devre dışı bırakmayı unutmayın.
İlgili Bağlantılar
- Medya Sorguları Düzey 5 spesifikasyonunun En Son Editör Taslağı.
- Chrome Platformunun Durumu
hakkındaki
prefers-reduced-motion. prefers-reduced-motionChromium hatası.- Blink Yayınlamayı Uygulama Amacı.
Teşekkür
Chrome'da prefers-reduced-motion uygulamasını kullanan ve Rob Dodson ile birlikte bu makaleyi inceleyen Stephen McGruer'a teşekkür ederiz.
Hannah Cauhepe'nin Unsplash'teki hero resmi.