Günümüzde webe bağlanabilen cihazların çeşitliliği eskiye göre çok fazla, biz geliştiriciler artık web sitesi kullanıcılarımıza sunduğumuz stilleri belirleyen faktör olarak görüntü alanı boyutuna güvenemeyiz, yani ekran boyutuna göre tasarlayabilirsiniz ancak cihazlar sadece ekran boyutuna göre değil birçok farklı yeteneklere göre de değişebiliyor.
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. Onlar demek olan bir fare ile bu şekilde kullanmaktan – Veya birisi ikincil monitör olarak kendi tabletini kullanıyor olabilir olurdu elemanlarında vurgulu kendi işaretçi kullanabilecektir. 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ı
CSS Seviye 5 Medya Sorguları şartname bize görünüm boyutuna için tanıdık olanlar ötesinde yeni medya sorguları her türlü getiriyor. Bunlardan biri vurgulu özelliğidir. 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 none için doğru olacaktır ) veya (dokunmatik girişle kullanılan bir tablet için doğru olacaktır) şeklindedir. Medya sorgusunu şu şekilde kullanabiliriz:
.some-component{
/* Styles for touch devices */
}
@media (hover: hover){
.some-component{
/* Styles for hover-able devices */
}
}Güncelleme.
hovervepointerözellikleri aslında Seviye 4 Medya Sorguları spec parçası olan! Ancak son zamanlarda tarayıcı desteği neredeyse evrensel hale geldi.
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.
Pointer
Bu pointer özellik, cihazın bir işaretçisi olup olmadığını ve işaretleme cihazının doğruluğunu test eder. Olası değerler coarse(dokunmatik ekranda kullanılan bir parmak gibi bir işaretçi için), fine(örneğin bir fare) veya none(işaretçisiz bir aygıt) şeklindedir.
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 */
}
}herhangi bir vurgulu ve herhangi bir işaretçi
Bu yeterli değilse, any-hover ve any-pointer medya özellikleri, yalnızca birincil aygıtın değil, herhangi bir aygıtın giriş aygıtının yeteneklerini test etmemizi sağlar . Eğer cihaz var, yani bir fare hem ye yanıt verir o ve dokunmatik girdi any-hover: hover doğru olurdu.
Henüz bu özellikleri kullanmam gerekmedi, ancak spesifikasyon, bazı farklı (ve daha karmaşık) hususlarla birlikte bunun nasıl kullanılabileceğine dair birkaç örnek içeriyor.
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 aşağıdakileri kullanarak 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:
Ulaşılabilirlik
Kullanıcı arayüzüne bağlı olarak, değişiklik gerçekleştiğ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. MDN’den alınan bu örnek, 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 tüm cihazların kullanıcıları için daha iyi deneyimler sağlayabilirsiniz!
Kaynak: CSS{In Real Life}– Detecting Hover-Capable Devices – Michelle Barker | https://css-irl.info/detecting-hover-capable-devices/