CSS

Hover-Yetenekli Cihazları Algılama

Cihazların her zamankinden daha fazla çoğalmasıyla, biz geliştiriciler, web sitesi kullanıcılarımıza sunduğumuz stilleri belirleyen faktör olarak artık görüntü alanı boyutuna güvenemeyiz. Oldukça yakın zamana kadar, kendimizi bir cihazın boyutuna dayalı varsayımlar yaparken yakalamış olabilirdik: örneğin, mobil cihazların dokunmatik girişe güveneceği, daha büyük ekran boyutları için ise kullanıcıların çoğunluğunun kullanarak web sayfamızla etkileşime gireceğini varsayabiliriz. Bir fare. Bir medya sorgusu ile farklı deneyimler sağlayabiliriz:

.some-component {
/* Styles for touch devices */
}

@media screen and (min-width: 1024px) {
.some-component {
/* Styles for hover-able devices */
}
}

Bu, bugün bize pek yardımcı olmuyor. İyi bir iPad, düşük kaliteli bir dizüstü bilgisayardan daha yüksek ekran çözünürlüğüne sahiptir. Veya birisi tabletini ikincil bir monitör olarak kullanıyor olabilir – tableti bu şekilde bir fare ile kullanmak, istemek öğelerin üzerine gelmek için işaretçilerini kullanabilirler. Ancak yukarıdaki medya sorgusu bize giriş yöntemleri hakkında hiçbir şey söylemez.

Günümüzde, bir kullanıcının sitemize nasıl göz attığını nasıl tespit ettiğimiz konusunda daha karmaşık olmamız gerekiyor. Neyse ki bazı yeni medya sorguları tam olarak bu amaca hizmet ediyor.

5. Düzey Medya Sorguları

bu CSS Düzey 5 Medya Sorguları belirtimi görüntü alanı boyutu için bize tanıdık olanların ötesinde her türlü yeni medya sorgusunu getiriyor. Bunlardan biri, fareyle üzerine gelme özelliği. Bu, kullanıcının birincil işaretleme aygıtının sayfanın üzerine gelip gelemeyeceğini belirler. Olası değerler hover (örneğin, fareli bir cihaz için doğru olur) veya none (dokunmatik girişle kullanılan bir tablet için doğru olacaktır). Medya sorgusunu şu şekilde kullanabiliriz:

.some-component {
/* Styles for touch devices */
}

@media (hover: hover) {
.some-component {
/* Styles for hover-able devices */
}
}

Kalemi Gör
Medya sorgusunun üzerine gelin
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu, çoğu tarayıcıda iyi çalışır, ancak Android’in bazı sürümlerinde, uzun bir basışa öykünme özelliği vardır, bu nedenle medya sorgusu doğru olarak değerlendirilir. Bu kullanıcılara diğer dokunmatik cihazlarla aynı stilleri sunmak istiyorsak, ikinci bir medya özelliği sorgulamamız gerekiyor.

Işaretçi

bu pointer özelliği, aygıtın bir işaretçisi olup olmadığını ve işaretleme aygıtının doğruluğunu test eder. Olası değerler coarse (dokunmatik ekranda kullanılan parmak gibi bir işaretçi için), fine (örneğin bir fare) veya none (işaretçi olmayan bir aygıt).

Bunu medya sorgumuza eklemek, Android cihazlarda dokunma girişini başarıyla algılar:

.some-component {
/* Styles for touch devices, including Android */
}

@media (hover: hover) and (pointer: fine) {
.some-component {
/* Styles for hover-able devices */
}
}

Kalemi Gör
Medya sorgusunun üzerine gelin
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

herhangi bir vurgulu ve herhangi bir işaretçi

Bu yeterli değilse, any-hover ve any-pointer medya özellikleri, yeteneklerini test etmemizi sağlar. hiç bir cihazın giriş cihazları – yalnızca birincil olanı değil. Yani her iki fareye de yanıt veren bir cihazınız varsa ve dokunma girişi any-hover: hover doğru olurdu.

Henüz bu özellikleri kullanmam gerekmedi, ancak Şartname bazı farklı (ve daha karmaşık) düşüncelerle bunun nasıl kullanılabileceğine dair birkaç örnek içerir.

Javascript örneği

Geçenlerde, birkaç özdeş resim bağlantısından herhangi birinin üzerine gelindiğinde, biraz araç ipucu gibi, bağlantının adını getireceği bir web sayfası oluşturdum. Ancak dokunmatik cihazların kullanıcıları bu ipucunu görmez. Bunun yerine, resme tıklamak, kullanıcıyı doğrudan bağlantı URL’sine götürür; bu, hangi sayfayı ziyaret ettiklerini bilemeyecekleri için sarsıcı bir deneyim olabilir. Bunun yerine, dokunmatik cihazlar için, tıklamayı kesmeye ve kullanıcının ilgili URL’ye gitmek için basabileceği bir düğme göstermeye karar verdim. JS’de dokunmatik girişi algılamak için aynı medya sorgusunu kullanabiliriz. matchMedia:

const list = document.querySelector('[data-list]')
const isHoverableDevice = window.matchMedia(
'(hover: hover) and (pointer: fine)'
)

/* Hide the block link initially */
blockLink.hidden = true

list.addEventListener('click', (e) => {
/* Do nothing if target is not a link, or device is hover-capable */
if (!e.target.dataset.link || isHoverableDevice.matches) return

/* If touch device, show the block link */
e.preventDefault()
blockLink.hidden = false
blockLink.innerText = `Visit ${e.target.dataset.link}’s page`
blockLink.setAttribute('href', e.target.href)
})

Hızlı bir demo:

Kalemi Gör
Dokunma/fareyle üzerine gelme araç ipucu
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Ulaşılabilirlik

Kullanıcı arayüzüne bağlı olarak, değişiklik meydana geldiğinde düğmeyi duyurmak için ARIA özniteliklerini kullanarak veya kullanıcının odağını düğmeye taşıyarak yardımcı teknolojilere burada bir yardım eli vermek isteyebiliriz. Bu örnek MDN’den, bir öğedeki dinamik değişiklikleri duyurmak için ARIA canlı bölgelerinin nasıl kullanılacağının bir gösterimini içerir.

tarayıcı desteği

Harika haber şu ki, tüm modern tarayıcılarda desteklendikleri için bu medya sorgularını hemen şimdi kullanabilirsiniz. Artık kullanıcılarına daha iyi deneyimler sunabilirsiniz. tüm cihazlar!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Göz Atın
Kapalı
Başa dön tuşu