CSS ve JS'de prefers-reduced-motion
Kullanıcının hareket ayarını algılayıp buna uyun.
CSS ve JS'de prefers-reduced-motion, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Okuyabileceğiniz Bir Ayar
İşletim sistemleri, insanların daha az hareket istemesini sağlar. prefers-reduced-motion medya özelliği bu seçimi doğrudan sitenize iletir. 🎚️
Kullanıcılar Nereden Etkinleştirir
Kullanıcılar macOS, iOS, Windows ve Android işletim sistemi ayarlarında hareketi azalt seçeneğini etkinleştirir. Sizin göreviniz seçimi sorgulamak değil, onu dinlemektir.
İki Değer
Bu özellik iki durumdan birini bildirir. Ya animasyonları sakinleştirmek anlamına gelen reduce değerini ya da diğer herkes için no-preference değerini döndürür.
CSS'te Sorgulama
Sakinleştirici stilleri bir medya sorgusunun içine alın. Kullanıcı hareketi azaltmayı istediğinde geçişleri neredeyse tamamen kaldırabilirsiniz.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Azaltın, Her Zaman Kaldırmayın
Hareketi sakinleştirmek, sayfanın donması anlamına gelmez. Büyük bir kaydırma yerine yumuşak bir solma efekti kullanın; böylece arayüz canlı kalır ama kullanıcıyı sarsmaz.
Önce Hareketli Tasarlayın
Normal animasyonlu stillerinizi oluşturun, ardından bunları azaltmak için sorguyu ekleyin. Bu aşamalı yaklaşım, varsayılan deneyimi zengin tutar.
JavaScript'te Okuma
Komut dosyasıyla oluşturulan animasyonlar için tarayıcıya doğrudan sorun. matchMedia, kullanıcının şu anda azaltılmış hareketi tercih edip etmediğini döndürür.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Canlı Değişikliklere Tepki Verme
Kullanıcılar ayarı oturumun ortasında değiştirebilir. Yeni tercihinin sayfa yeniden yüklenmeden JavaScript animasyonlarını etkilemesi için değişiklikleri dinleyin.
mq.addEventListener('change', e => updateMotion(e.matches));Kaydırma Davranışını da Kapsayın
Yumuşak kaydırma da harekettir. Sorgunun içinde scroll-behavior değerini auto yapın; böylece bunu isteyen kullanıcılar için atlamalar anında gerçekleşir.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Bu Gerçek Bir İhtiyaçtır
Bu, yalnızca hoş bir seçenek değildir. Bazı kullanıcılar için büyük hareketler gerçek mide bulantısına veya baş dönmesine neden olabilir; bu nedenle isteğe uymak önemlidir.
Varsayılan Olarak Kapalı En Güvenlisidir
Emin olmadığınızda en güvenli yolu varsayılan kabul edin. Sakin hareketleri tercih etmek kimseye zarar vermez ve sayfayı herkes için daha rahat kılar.
Kısa Kontrol
Bir web sitesi, kullanıcının daha az hareket istediğini nasıl öğrenir?
Özet
CSS'te veya matchMedia ile prefers-reduced-motion değerini okuyun; ardından sayfayı tamamen devre dışı bırakmak yerine animasyonları sakinleştirin. Canlı değişikliklere de uyun. ✅
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“CSS ve JS'de prefers-reduced-motion” dersi ücretsiz mi?
Evet — “CSS ve JS'de prefers-reduced-motion” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“CSS ve JS'de prefers-reduced-motion” dersinde ne öğreneceğim?
Kullanıcının hareket ayarını algılayıp buna uyun. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“CSS ve JS'de prefers-reduced-motion” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- CSS ve JS'de prefers-reduced-motion
- Vestibüler Bozukluklar ve Paralaks Riskleri
- Nöbetler İçin Üç Flaş Eşiği
- Otomatik Hareketli İçerik İçin Duraklat, Durdur, Gizle