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 ve benzeri şeylerle karşılaştıklarında doğrudan mide bulantısı yaşarlar. Kullanıcı tercihi medya sorgusu prefers-reduced-motion, bu tercihi ifade eden kullanıcılar için sitenizin hareket 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 ⛸. Buradaki tek sorun: Kalabalıklarla iyi bir şekilde başa çıkamıyorum. Çok fazla hareketli hedef olduğu için hiçbir şeye odaklanamıyorum ve kaybolup giderken sanki bir karınca tepesine bakar gibi görsel bir aşırı yük hissediyorum.
Bazen aynı şey web'de de olabilir: yanıp sönen reklamlar, süslü paralaks efektleri, şaşırtıcı animasyonlar, otomatik oynatılan videolar ve benzeri ortamlarda, web bazen oldukça bunaltıcı olabilir...
Neyse ki gerçek hayatın aksine bunun bir çözümü var. CSS medya sorgusu prefers-reduced-motion, geliştiricilerin daha az hareketi tercih eden kullanıcılar için bir sayfanın varyantını oluşturmasına olanak tanır. Bu, videoların otomatik oynatılmasından kaçınılmasından, bazı dekoratif efektlerin devre dışı bırakılmasına ya da bir sayfayı belirli kullanıcılar için tamamen yeniden tasarlamaya kadar her türlü konuyu kapsayabilir.
Özelliğin ayrıntılarına geçmeden önce, bir adım geri gidelim ve animasyonların web'de ne için kullanıldığına bakalım. İsterseniz arka plan bilgilerini atlayarak aşağıdaki teknik ayrıntılara da geçebilirsiniz.
Web'de animasyon
Animasyon genellikle kullanıcıya geri bildirim sağlamak (örneğin, bir işlemin alındığını ve işlenmekte olduğunu bildirmek için) kullanılır. Örneğin, bir alışveriş web sitesinde, bir ürün sanal alışveriş sepetine "uçmak" için canlandırılabilir ve sitenin sağ üst köşesinde bir simge olarak tasvir edilir.
Diğer bir kullanım alanı da kullanıcının çok fazla zamanını kapsıtmak ve tüm deneyimi daha hızlı hissettirmek 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. Burada amaç, kullanıcıya neyin geleceğini göstermek ve bu sırada da işleri mümkün olduğunca hızlı bir şekilde yüklemektir.
Son olarak, animasyonlu gradyanlar, paralaks kaydırma, arka plan videoları ve daha pek çok dekoratif efekt vardır. Birçok kullanıcı bu tür animasyonlardan hoşlanırken, bazıları dikkatlerini dağıttığı için veya yavaşlattıklarından hoşlanmaz. En kötü durumda, kullanıcılar gerçek yaşamdaymış gibi hareket mi tutması sorunu yaşıyor olabilirler. Bu nedenle, bu kullanıcılar için animasyonları azaltmak tıbbi bir gerekliliktir.
Hareket tetikli vestibüler spektrum bozukluğu
Bazı kullanıcıların animasyonlu içerikten dikkat dağıtması veya mide bulantısı yaşaması. Örneğin, kaydırma animasyonları, kaydırmayla ilgili ana öğe dışındaki öğelerin çok fazla hareket etmesi durumunda vestibüler rahatsızlıklara neden olabilir. Örneğin, paralaks kaydırma animasyonları, arka plan öğelerinin ön plan öğelerinden farklı bir hızda hareket etmesi nedeniyle vestibüler rahatsızlıklara neden olabilir. Vestibüler (iç kulak) bozukluğunun tepkileri arasında baş dönmesi, mide bulantısı ve migren baş ağrısı yer alır ve bazen iyileşmek için yatak istirahati gerekir.
İşletim sistemlerindeki hareketi kaldırma
Birçok işletim sistemi, uzun bir süre boyunca hareket azlığı tercihini belirten 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 dekoratif efektleri kullanmamasına neden olur. Uygulamaların kendileri de bu ayarı dikkate alabilir ve gereksiz tüm animasyonları kaldırabilir.
Web'deki hareketi kaldırma
Medya Sorguları Düzey 5, daha az hareket içeren kullanıcı tercihini web'e de taşır. Medya sorguları, yazarların oluşturulan dokümandan bağımsız olarak kullanıcı aracısının değerlerini veya özelliklerini test etmesine ve sorgulamasına olanak tanır. prefers-reduced-motion medya sorgusu, kullanıcının kullandığı animasyon veya hareket miktarını en aza indirmek için bir işletim sistemi tercihi belirleyip belirlemediğini 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ı gösterir. Bu anahtar kelime değeri, boole bağlamındafalseolarak değerlendirilir.reduce: Kullanıcının, arayüzün hareketi veya animasyonu en aza indirmesi gerektiğini, tercihen gerekli olmayan tüm hareketlerin kaldırıldığı noktaya getirmesi gerektiğini belirten bir işletim sistemi tercihi ayarladığını belirtir.
CSS ve JavaScript bağlamlarından medya sorgusuyla çalışma
Tüm medya sorgularında olduğu gibi prefers-reduced-motion, bir CSS içeriğinden ve JavaScript bağlamından kontrol edilebilir.
Her ikisini birden 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 kullanıcısı olarak bunu yalnızca animasyonlara açık bir şekilde izin veren kullanıcılar için oynatacağım, ancak animasyonları devre dışı bırakan kullanıcılar veya medya sorgusunu anlamayan tarayıcı kullanıcıları olabilecek diğer herkes için oynamayacağı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 ile nasıl çalışacağımı göstermek için Web Animasyonları API'si 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 tetiklenecek olsa da, JavaScript animasyonları için değişiklikleri kendim dinlemem ve ardından, hazırlık aşamasında olabilecek animasyonlarımı manuel olarak durdurmam (veya kullanıcı izin verirse 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ğlamdan medya sorgusuyla çalışma
İlginç bir kullanım örneği, animasyonlu AVIF, WebP veya GIF'in oynatılmasını media özelliğine bağlı hale getirmektir. (prefers-reduced-motion: no-preference) değeri true olarak değerlendirilirse animasyonlu sürümü veya 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 tercihleri arasında geçiş yapmayı deneyin.
İstek sırasında kullanıcının tercihlerini öğrenin
Sec-CH-Prefers-Reduced-Motion istemci ipucu başlığı, sitelerin istek zamanı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 kedilerine dayalı küçük bir demo hazırladım. Öncelikle bir dakikanızı ayırarak şakanın değerini
bilmek çok eğlenceli, ben de bekliyorum. Artık geri döndüğünüze göre demoyu tanıtayım. Aşağı kaydırdığınızda, her bir HTTP durumu alternatif olarak sağdan veya sol taraftan görüntülenir. 60 FPS'lik akıcı bir animasyon
ancak yukarıda belirtildiği gibi bazı kullanıcılar bu animasyondan hoşlanmayabilir, hatta hareketten dolayı rahatsız olabilir. Bu nedenle demo, prefers-reduced-motion uygulamasına uygun şekilde programlanmıştır. Bu süreç dinamik olarak da çalışır. Böylece kullanıcılar yeniden yükleme yapmadan tercihlerini anında değiştirebilir. Kullanıcı daha az hareket tercih ederse gereksiz gösterme animasyonları kaybolur ve yalnızca normal kaydırma hareketi kalır. Aşağıdaki ekran video kaydında demo çalışırken gösterilmektedir:
prefers-reduced-motion Demo uygulamasının videosu
Sonuçlar
Kullanıcı tercihlerine saygı duymak modern web siteleri açısından son derece önemlidir ve tarayıcılar, web geliştiricilerinin bunu yapabilmesi için her geçen gün daha fazla özellik sunuyor. Sunulan bir diğer örnek de kullanıcının açık mı yoksa koyu renk şemasını mı tercih ettiğini algılayan prefers-color-scheme. prefers-color-scheme ile ilgili her şeyi Hello Darkness, My Eski Arkadaşım 🌒 başlıklı makalemde bulabilirsiniz.
CSS Çalışma Grubu şu anda prefers-reduced-transparency (kullanıcının daha az şeffaflığı 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ı isteyip istemediğini algılar) ve inverted-colors (kullanıcının ters çevrilmiş renkleri tercih edip etmediğini algılar) gibi daha fazla kullanıcı tercihi medya sorgusunu standartlaştırıyor.
(Bonus) Tüm web sitelerinde daha az hareketin zorunlu kılınması
prefers-reduced-motion, her site tarafından kullanılmaz veya sizin zevkinize uygun olmayabilir.
Herhangi bir nedenle tüm web sitelerinde hareketi durdurmak isterseniz bunu yapabilirsiniz. Bunu gerçekleştirmenin bir yolu, ziyaret ettiğiniz her web sayfasına aşağıdaki CSS'yi içeren bir stil sayfası eklemektir. İnternet'te buna izin veren çeşitli tarayıcı uzantıları vardır (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;
}
}
Bunun çalışma şekli, yukarıdaki CSS'nin tüm animasyonların sürelerini geçersiz kılması ve artık fark edilmeyecek kadar kısa bir süreye geçiş yapmasıdır. Bazı web sitelerinin doğru çalışması için bir animasyonun çalıştırılması gerektiğinden (belki 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 Animasyonları API'si
aracılığıyla başlatılan hareketi durduramaz). Bu nedenle, bir kesinti
gördüğünüzde devre dışı bıraktığınızdan emin olun.
İlgili Bağlantılar
- Medya Sorguları Düzey 5 spesifikasyonunun son Editör Taslağı.
- Chrome Platform Durumu'nda
prefers-reduced-motion. prefers-reduced-motionChromium hatası.- Yayınlama uygulama amacı bölümünde göz atın.
Teşekkür
Chrome'da prefers-reduced-motion uygulamasını kullanan ve Rob Dodson ile birlikte bu makaleyi inceleyen Stephen McGruer'a ayrıca teşekkür ediyoruz.
Hannah Cauhepe'nin Unsplash'teki hero resmi.