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.
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.
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 🐜.
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ındafalseolarak 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;
}
}
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:
window.matchMedia('prefers-reduced-motion: reduce');
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-motionaçık Chrome Platformunun Durumu.prefers-reduced-motionChromium 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.