Alt Izgaralı Düzensiz Şekilli Bağlantılar

Faydalı Alternatif Metin Yazma

Kart tabanlı UI’ler yaygın olarak kullanılan web tasarım kalıplarıdır ve bir kartın tamamına uygulanacak bir fareyle üzerine gelme (veya odak) efekti gerektiren bir UI oluşturmak alışılmadık bir durum değildir. CSS kullanarak bu efekti uygulamak için birkaç strateji vardır ve bu CSS Püf Noktaları makalesi bazılarını kapsar. (Hiçbiri mükemmel değildir ve hepsinin kendi tuzakları vardır!)

Ancak, bağlantı üzerine gelme efektimizin bir dizi alt öğeyi etkilemesi gerekiyorsa ve hepsi normal bir kart gibi düzgün bir şekilde bir dikdörtgenin içine oturmuyorsa?

CSS Izgarası ile öğeleri yatay olarak yerleştirebiliriz. ve bunun gibi görsel olarak ilginç düzenler oluşturmak için dikey bir eksen:

Firefox’un geliştirme araçlarında Grid denetçisini açarak, bu bileşenlerden birinin öğelerinin ızgarada nasıl düzenlendiğini görebiliriz:

Gösterilen numaralı ızgara çizgileri ile bileşen düzeni

Kullanıcı arayüzü tasarımımızda, bu ızgara öğelerinin bağlantı görevi görmesi gerekiyorsa, o zaman bir vurgulu efektinin uygulanması mantıklı olacaktır. tüm ızgara öğeleri her zaman bir bunların üzerinde gezdirilir.

Her iki ızgara öğesine de uygulanan fareyle üzerine gelme efekti
Bir öğenin üzerine gelindiğinde, her iki öğede de fareyle üzerine gelme efekti tetiklenir

İlk öğenin üzerine gelirsek sorun değil: genel kardeş birleştirici vurgulu efekti sonraki öğelere uygulamak için.

.grid__img:hover ~ .grid__caption,
.grid__img:focus ~ .grid__caption
{
/* Hover and focus styles */
}

Ancak ne yazık ki, genel kardeş birleştiricisi, önceki kardeşleri değil, yalnızca ardışık kardeşleri etkiler. Fareyi ikinci öğenin üzerine getirirsek, ilk öğeye fareyle üzerine gelme efekti uygulanmaz.

Mutlak konumlandırma

Bileşenin tüm alanını kapsayacak şekilde mutlak konumlandırılmış bir bağlantı kullanmak daha iyi bir seçenek olabilir. Bir kez daha, genel kardeş birleştiriciyi kullanarak vurgulu efekti uygulayabiliriz, ancak bu sefer şunu sağlıyoruz: tüm ızgara öğeleri bağlantı bağlantısını takip edecek ve bu nedenle fareyle üzerine gelme efekti uygulanacaktır:

<div class="grid">
<a href="/" class="grid__link"></a>
<div class="grid__img">
<img src="/..." alt="" />
</div>
<div class="grid__card">
<h2>Eu scelerisque felis</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni ut
aliquip ex ea commodo consequat.
</p>
<span>Read more→</span>
</div>
</div>
.grid {
position: relative;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.grid__link {
position: absolute;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

Izgara ile Konumlandırma

Izgara ile burada mutlak konumlandırmaya ihtiyacımız yok. Bunun yerine, onu tüm sütun ve satır eksenlerini kapsayan bir ızgara öğesi olarak konumlandırabiliriz. kullanmamız gerekecek z-index her zaman üstte olmasını sağlamak için:

.grid__link {
grid-area: 1 / 1 / -1 / -1;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
z-index: 1;
}

Ulaşılabilirlik

Bu, erişilebilirlik için tartışmasız daha iyi bir seçenektir, çünkü hepsi aynı URL’ye giden üç farklı bağlantıya sahip olmak yerine sadece birini kullanabiliriz. Ancak yardımcı teknolojilere bağlantının doğru bir şekilde duyurulmasını sağlamamız gerekiyor.

Kullanarak aria-labelledby bağlantımıza bileşen başlığına karşılık gelen erişilebilir bir etiket verebiliriz. Biz de kullanabiliriz aria-hidden başlığın ikinci kez açıklanmamasını sağlamak için.

<div class="grid">
<a href="/" class="link" aria-labelledby="title"></a>
<div class="grid__img">
<img src="/..." alt="" />
</div>
<div class="grid__card">
<h2 id="title" aria-hidden="true">Eu scelerisque felis</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<span>Read more→</span>
</div>
</div>

Bu, Safari’de VoiceOver kullanılarak test edildiğinde doğru şekilde çalışır.

Ama…sorunu çözmüyor

Buradaki sorun şu ki, bağlantı bağlantımızın sınırlayıcı kutusu içinde nereye gidersek gidelim, vurgulu efekti uygulanacaktır. Ancak görsel olarak, boşluk üzerinde geziniyorsanız, muhtemelen yapma bileşenin üzerine geliniyormuş gibi davranmasını istiyorum. Bu pek bir anlam ifade etmiyor.

Bağlantının üzerine gelme alanını gösterme
Kullanıcının imleci mor alanın üzerinde herhangi bir yere geldiğinde, bağlantının üzerine gelinecektir.

Aslında istediğimiz şey, bağlantımızın şu şekilde şekillendirilmiş gibi davranmasıdır:

Bağlantının istenen vurgulu alanını gösterme
Kullanıcı için, yalnızca burada gösterilen mor alan bağlantının üzerine gelme efektini etkinleştirirse daha iyi olur.

Kurtarma için iç içe ızgaralar

Şimdi CSS Grid’in bu bileşeni düzenlemek için ideal seçim olmasının başka bir nedenini göreceğiz. Mutlak konumlu bağlantı bağlantısını, bileşen ızgarasıyla eşleşen bir ızgara kabı yaparak, ızgara öğelerini sözde öğelerle kaplayabiliriz. eklersek pointer-events: none çapa bağlantısının kendisine ve pointer-events: auto sözde öğelere, vurgulu etkisi yalnızca bu alanlar üzerine gelindiğinde uygulanacaktır.

.grid__link {
pointer-events: none;
}

.grid__link::before,
.grid__link::after
{
pointer-events: auto;
}

Kusurlu bir çözüm

Çözümlenen ızgara öğelerinin boyutundan aşağı yukarı emin olabildiğimiz sürece bu teknik yeterince iyi çalışır. Izgara izlerimizin içsel olarak boyutlandırılmasına güveniyorsak (içeriğin uzunluğuna veya boyutlarına göre), o zaman mutlak konumlu sözde öğeler, orijinal ızgara öğelerimizle doğru şekilde hizalanmayabilir.

Bu örnekte, ilk ızgara öğesi, otomatik olarak boyutlandırılan ızgara satırını çok daha uzun yapan uzun bir içerik paragrafı içeriyor:

Ne yazık ki, ikinci ızgaradaki (bağlantı bağlantısı) öğeler, orijinal ızgara çocuklarından haberdar değildir, bu nedenle buna göre yanıt vermezler.

Subgrid ile daha iyi bir çözüm

burası alt ızgara sorunumuzu çözmek için devreye giriyor. Alt ızgara, CSS Izgarası Düzey 2 Şartname. Sütun veya satır ekseninde (veya her ikisinde) üst ızgarayı devralan bir üst ızgara içinde bir ızgara kabı oluşturmamıza olanak tanır.

Sırasıyla, bu çapa bağlantısını daha önce olduğu gibi bir ızgara yapabiliriz, ancak bu sefer kullanabiliriz grid-template (ya da uzun el grid-template-rows/grid-template-columns) bir alt ızgara kullanmasını bildirmek için.

.link {
grid-template: subgrid / subgrid;
}

Şimdi, sözde öğeleri ızgara üzerinde daha önce olduğu gibi konumlandırmak, orijinal ızgara öğeleriyle doğru şekilde hizalanmalarını sağlayacaktır.

Bu, varsayılanı kullandığımızı varsayar align-items değeri stretch. Bunun dışında bir şey kullanırsak, muhtemelen yine de bazı hizalama sorunlarıyla karşılaşacağız.

tarayıcı desteği

Fazla heyecanlanmadan önce gerçeğe bakalım. Yazma sırasında, alt ızgara yalnızca Firefox’ta desteklenir. Bu kadar. Bu utanç verici çünkü son derece kullanışlı ve muhtemelen CSS Izgarasının benimsenmesini artıracaktır. Chrome’a ​​​​bir kez girdiğinde (ve bir noktada olacağına inanıyorum), o zaman üretimde kullanmak çok daha değerli olacaktır. Bunun gibi kullanım örnekleri hakkında yazmanın ve paylaşmanın, tüm tarayıcılara alt şebeke desteği getirme ivmesini artırabileceğini umuyorum.

Yukarıdaki tekniği kullanmak istiyorsanız, desteklemeyen tarayıcılar için her zaman (daha az mükemmel olsa da) bir geri dönüş sağlayabilirsiniz – bu, mutlu bir şekilde yalnızca bir kod satırıdır:

.link {
grid-template: repeat(3, 1fr) / repeat(3, 1fr);

@supports (grid-template: subgrid / subgrid) {
grid-template: subgrid / subgrid;
}
}

Ardından, alt şebeke nihayet ana akıma ulaştığında, siteniz kullanıma hazır olacak!

Codepen’deki tam demoya bakın:

Kalemi Gör Alt ızgara ile ızgara vurgulu efekti Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Kaynaklar

Alt ızgara hakkında daha fazla bilgi edinmek istiyorsanız, Rachel Andrew bu faydalı kılavuzdan yararlanabilirsiniz:

CSS Izgarası Seviye 2: Alt Izgara Geliyor

Bir cevap yazın

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