bencede
New member
Firefox, Safari ve yakında Chrome kullanıcılarının bir web sitesine sayfada daha az hareket etmeyi tercih ettiklerini söylemelerine olanak tanıyan, şu anda deneysel bir özellik.
Kısa bir süre önce, Haberler çevrimiçi haber şeridine küçük bir CSS parçacığı ekledik, bununla birlikte hareketin azalması için bir kullanıcı ayarını dikkate alıyoruz (örneğin, taşıt tutması nedeniyle). Bu ayar tarayıcıda yapılmaz, yalnızca işletim sisteminde global olarak yapılandırılabilir. Snippet’imiz şöyle görünür:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: .01s !important;
transition-duration: .01s !important;
}
}
Satır satır inceleyelim: Medya Sorgusu için tercih-azaltılmış-hareket sadece değerler var tercih yok Ve azaltmak. Şu anda sadece izleyebilirsin tercih-azaltılmış-hareket sorgu, ancak gelecekte üçüncü bir değer eklenirse, ardından somut sorgu gelir azaltmak daha emniyetli. Burada önce hareketi küresel olarak reddetme yaklaşımını benimsiyoruz, böylece her yerde ayrı ayrı yapmak zorunda kalmıyoruz – çekiç bu yüzden !önemli. Animasyonlarla çalıştığımız nispeten az sayıda yer için bu bizim için oldukça iyi sonuç veriyor. Animasyonlar daha kapsamlı hale gelirse veya örneğin döngülü bir SVG animasyonu söz konusuysa, bu medya sorgusu için mutlaka daha özel kurallar yazılmalıdır.
Tüm (sahte) öğeler için evrensel seçiciden sonra kayma davranışı varsayılan değere araba. Şu anda bu özelliği yalnızca makale sayfalarında kullanıyoruz, böylece içindekiler tablosundaki bir alt başlığa tıkladığınızda, yalnızca atlamakla kalmaz, aynı zamanda gözle görülür şekilde kaydırırsınız.
Sonraki iki satır şunu temsil eder: animasyon Ve geçiş animasyonun süresini 0,01 saniye gibi çok kısa bir süreye indirir. Bu aslında sitede istenmeyen sorunlardan kaçınmak için bahsetmeye değer bir noktadır. Burada neden kolay olmadığı merak edilebilir. animasyon: yok veya geçiş süresi: 0s durmak. Her iki durumda da olmayacak geçiş-Animasyon tamamen devre dışı bırakılacağı için temelde doğru olan olay tetiklendi. Ancak, bir JavaScript’in bu olayın animasyondan sonra bir eylemi tamamlamasını veya tetiklemesini beklemesi saçmadır. Ancak, süreyi CSS parçacığında gösterildiği gibi çok kısa bir süreye ayarlarsanız, JavaScript etkilenmez ve animasyon yine de duyulamaz.
Kullanabilir miyim’e göre özellik şu anda Firefox’ta sürüm 63’ten beri, Safari sürüm 10.1’den beri (iOS 10.3’ten beri) ve Chrome sürüm 74’ten beri mevcuttur.
(hehe)
Haberin Sonu
Kısa bir süre önce, Haberler çevrimiçi haber şeridine küçük bir CSS parçacığı ekledik, bununla birlikte hareketin azalması için bir kullanıcı ayarını dikkate alıyoruz (örneğin, taşıt tutması nedeniyle). Bu ayar tarayıcıda yapılmaz, yalnızca işletim sisteminde global olarak yapılandırılabilir. Snippet’imiz şöyle görünür:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: .01s !important;
transition-duration: .01s !important;
}
}
Satır satır inceleyelim: Medya Sorgusu için tercih-azaltılmış-hareket sadece değerler var tercih yok Ve azaltmak. Şu anda sadece izleyebilirsin tercih-azaltılmış-hareket sorgu, ancak gelecekte üçüncü bir değer eklenirse, ardından somut sorgu gelir azaltmak daha emniyetli. Burada önce hareketi küresel olarak reddetme yaklaşımını benimsiyoruz, böylece her yerde ayrı ayrı yapmak zorunda kalmıyoruz – çekiç bu yüzden !önemli. Animasyonlarla çalıştığımız nispeten az sayıda yer için bu bizim için oldukça iyi sonuç veriyor. Animasyonlar daha kapsamlı hale gelirse veya örneğin döngülü bir SVG animasyonu söz konusuysa, bu medya sorgusu için mutlaka daha özel kurallar yazılmalıdır.
Tüm (sahte) öğeler için evrensel seçiciden sonra kayma davranışı varsayılan değere araba. Şu anda bu özelliği yalnızca makale sayfalarında kullanıyoruz, böylece içindekiler tablosundaki bir alt başlığa tıkladığınızda, yalnızca atlamakla kalmaz, aynı zamanda gözle görülür şekilde kaydırırsınız.
Sonraki iki satır şunu temsil eder: animasyon Ve geçiş animasyonun süresini 0,01 saniye gibi çok kısa bir süreye indirir. Bu aslında sitede istenmeyen sorunlardan kaçınmak için bahsetmeye değer bir noktadır. Burada neden kolay olmadığı merak edilebilir. animasyon: yok veya geçiş süresi: 0s durmak. Her iki durumda da olmayacak geçiş-Animasyon tamamen devre dışı bırakılacağı için temelde doğru olan olay tetiklendi. Ancak, bir JavaScript’in bu olayın animasyondan sonra bir eylemi tamamlamasını veya tetiklemesini beklemesi saçmadır. Ancak, süreyi CSS parçacığında gösterildiği gibi çok kısa bir süreye ayarlarsanız, JavaScript etkilenmez ve animasyon yine de duyulamaz.
Kullanabilir miyim’e göre özellik şu anda Firefox’ta sürüm 63’ten beri, Safari sürüm 10.1’den beri (iOS 10.3’ten beri) ve Chrome sürüm 74’ten beri mevcuttur.
(hehe)
Haberin Sonu