Prefers-Color-Scheme ve Prefers-Reduced-Motion
Koyu mod ve azaltılmış hareket animasyonları için kullanıcının sistem tercihlerini dikkate alın.
Prefers-Color-Scheme ve Prefers-Reduced-Motion, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Kullanıcı Tercihi Medya Özellikleri
CSS, ekran boyutunun ötesinde kullanıcının sistem tercihlerini sorgulayabilir. Bu, sitenizde kullanıcı etkileşimi olmadan otomatik dark modu ve erişilebilirliği gözeten animasyonları mümkün kılar.
prefers-color-scheme
Kullanıcının OS ayarını açık veya dark moda getirip getirmediğini algılar:
<p>This page follows your OS color-scheme preference.</p>
Otomatik dark Modu Uygulama
En temiz uygulama, tercihe göre değerleri değiştiren CSS değişkenlerini kullanır:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Bazı kullanıcılar animasyonlar nedeniyle mide bulantısı veya rahatsızlık yaşayabilir. prefers-reduced-motion: reduce medya özelliği bu erişilebilirlik tercihini algılar.
<div class="box spun"></div>
Hareket Tercihlerine Saygı Gösterme
Tüm animasyonları kaldırmak yerine, alternatif ve zarif animasyonlar sunun:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Kullanıcının daha yüksek (erişilebilirlik için) veya daha düşük karşıtlığı tercih edip etmediğini algılar. Renk seçimlerini buna göre ayarlayın:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Görme bozukluğu olan bazı kullanıcılar daha az saydamlığı tercih eder. backdrop-filter ve opacity tabanlı efektleri azaltın:
<div class="glass-card">Glass card</div>
JavaScript ile Tercihlere Erişim
Bu tercihleri JavaScript üzerinden window.matchMedia() kullanarak sorgulayın:
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Sistem Tercihi + Manuel Geçersiz Kılma
Varsayılan olarak sistem tercihine saygı gösterin ve kullanıcıların bir açma-kapama denetimiyle bunu geçersiz kılmasına izin verin. Geçersiz kılma seçimini localStorage içinde saklayın ve <html> öğesine bir sınıf uygulayın:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Kullanıcının veri tasarrufu modunu etkinleştirip etkinleştirmediğini algılar. Daha küçük görseller sunun veya gerekli olmayan kaynakları atlayın:
<div class="hero">Hero banner</div>
DevTools'ta Test Etme
Chrome DevTools'ta Rendering sekmesi, OS ayarlarınızı değiştirmeden dark modu, azaltılmış hareketi ve diğer tercih medya özelliklerini taklit etmenizi sağlar.
Hızlı Kontrol
Manuel kullanıcı açma-kapama denetimini de destekleyebilen otomatik dark modu uygulamanın en iyi yolu nedir?
Özet
prefers-color-scheme otomatik dark modunu mümkün kılar. prefers-reduced-motion, erişilebilirlik için animasyonları devre dışı bırakmalı veya basitleştirmelidir. Temiz ve bakımı kolay kod için ikisini de CSS değişkenlerini kullanarak uygulayın. Kullanıcıların tercihlerini OS ayarlarından bağımsız olarak denetleyebilmesi için her zaman manuel bir geçersiz kılma seçeneği sunun.
Sıkça Sorulan Sorular
“Prefers-Color-Scheme ve Prefers-Reduced-Motion” dersi ücretsiz mi?
Evet — “Prefers-Color-Scheme ve 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Prefers-Color-Scheme ve Prefers-Reduced-Motion” dersinde ne öğreneceğim?
Koyu mod ve azaltılmış hareket animasyonları için kullanıcının sistem tercihlerini dikkate alın. CSS 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.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS 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 3. dersidir.
“Prefers-Color-Scheme ve 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS 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
- Sözdizimi ve Yaygın Kesme Noktaları
- Genişlik, Yükseklik ve Yön Sorguları
- Prefers-Color-Scheme ve Prefers-Reduced-Motion
- Birden Fazla Medya Sorgusunu Birleştirme