CSS

:has() ile Hareketli Izgara İzleri

Codepen demosundan ekran görüntüsü. Bir ızgara öğesinin üzerine gelmek ızgara izlerini genişletir.

Her nasılsa CSS hakkında yazdığımdan bu yana üç ay geçti :has() sözde sınıf Safari Teknolojisi önizlemesine iniş. En son Safari (uygun) sürümü destekle birlikte gönderildi ve sonraki Chrome sürümünde bir bayrakla etkinleştirilebilir.

Bu arada, nasıl kullanabileceğimiz konusunda bazı fikirlerle oynuyordum. :has() bir galeri veya ürün ızgara düzenini şekillendirmek için. Seçici ile ilgili harika şeylerden biri, yalnızca bir ana öğeyi çocuklarından herhangi birine göre biçimlendirmemize değil, aynı zamanda o çocuğun kardeşlerine de stil vermemize izin vermesidir. Böylece, bir menü oluştururken, bağlantılardan biri üzerine gelindiğinde menüdeki diğer öğelere bazı stiller uygulayabiliriz:

/* Style the list border when link is hovered */
ul:has(a:hover) {
border: 2px solid whitesmoke;
}

/* Style any other links in the list when a link is hovered */
ul:has(a:hover) a:not(:hover) {
opacity: 0.5;
}
Öğenin üzerine gelindiği menü çubuğu
Menü çubuğu orijinal durumunda ve öğe üzerine gelindiğinde

(Demoyu görün)

Bu, bir ızgara tasarımına güzel bir şekilde uzanır ve hareketli ızgara izleriyle birleştiğinde, bazı heyecan verici yerleşim olanakları sağlayabilir. Kullanıcı bir ızgara öğesinin üzerine geldiğinde, ızgara izlerimizin boyutunu değiştirebilirsek ne olur?

Izgara izlerini canlandırabilme yeteneği (grid-template-rows ve grid-template-columns) aslında içine yazılır CSS Izgarası belirtimive 2019’dan beri Firefox’ta desteklenmektedir. Ancak ne yazık ki şu anda başka hiçbir tarayıcı ızgara izleme animasyonunu desteklememektedir. Chen Hui-Jing bunun hakkında yazdı Olivia Ng tarafından genişleyen bir menü çubuğunun harika bir demosunu içeriyordu:

Kalemi Gör
CSS Izgarası: Uçak İçi Eğlence Ekranı
tarafından Olivia Ng (@oliviale) üzerinde kod kalemi.

Ancak, o sırada (sınırlı tarayıcı desteğinin yanı sıra) animasyonlu ızgara izleriyle oynayan daha fazla insan görmememizin nedenlerinden biri belki de, daha belirgin kullanım durumlarından birinin, bir öğenin üzerine gelindiğinde bir ızgara izini genişletmesiydi. içinde ızgara. A kadar :has() geldiğinde, ızgarayı bir çocuğun fareyle üzerine gelme durumuna göre biçimlendirmenin bir yolu yoktu – Javascript kullanmamız gerekecekti.

Bu demo, animasyonlu ızgara izlerini aşağıdakilerle birleştirir: :has() seçici. Fareyle bir ızgara öğesinin üzerine geldiğinizde, öğenin ızgara izleri alanın daha büyük bir bölümünü kaplayacak şekilde genişler ve kardeş öğelerin etiketleri soluklaşır. Bunu çalışırken görmek için Safari’de görüntülemeniz gerekecek – diğer tarayıcılarda, üzerinde bulunduğunuz öğe üzerinde, ızgarada ve öğenin kardeşlerinde değil, yine de bir vurgulu efekti göreceksiniz.

Kalemi Gör
grid / :+ animasyonlu ızgara izlerine sahiptir (yalnızca Safari)
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

çoklu doldurma

Ne yazık ki, her ne kadar :has() Safari’de desteklenir, animasyonlu ızgara izleri desteklenmez. Yukarıdaki demoda bunu aşmak için şunu kullanıyorum: yeşil çorap ızgara izleri için özel özellikleri canlandırmak için kitaplık. Mükemmel değil – dürüst olmak gerekirse, minimum kod sonucu elde ettim – ama umarım daha geniş destek için parmaklarımızı çarpışırken neyin mümkün olduğunu gösterir!

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu