CSS :has() sözde sınıf birçok tarayıcıda kullanıma sunuluyor krom ve Safari zaten tam olarak destekliyoruz. Buna genellikle "ana seçici" denir - bir alt seçiciden bir ana öğenin stilini seçebiliriz - olduğu gibi - ancak bundan çok daha fazlası var :has() çözmemize yardımcı olabilir. Bunlardan biri, çoğumuzun zaman zaman kullanmayı sevdiği tıklanabilir kart modelini yeniden icat etmektir.
Nasıl olduğuna bir göz atacağız :has() bağlantılı kartları yönetmemize yardımcı olabilir, ancak önce…
Bu nedir :has() sözde sınıf?
Zaten bir Demet of harika mesajları etrafta yüzen ne olduğunu açıklamakta mükemmel bir iş çıkarıyorlar :has() nedir ve ne için kullanılır, ama yine de o kadar yeni ki burada da onun hakkında birkaç söz söylememiz gerekiyor.
:has() bir parçası olan ilişkisel bir sözde sınıftır. W3C Seçiciler Seviye 4 çalışma taslağı. Parantezlerin amacı budur: belirli alt öğelerle ilişkili olan veya daha doğrusu bunları içeren öğelerin eşleştirilmesi.
/* Matches an article element that contains an image element */
article:has(img) { }
/* Matches an article element with an image contained immediately within it */
article:has(> img) { }Dolayısıyla buna neden “ebeveyn” seçici demek isteyebileceğimizi anlayabilirsiniz. Ancak daha spesifik hale gelmek için onu diğer işlevsel sözde sınıflarla da birleştirebiliriz. Makalelere stil vermek istediğimizi varsayalım değil herhangi bir resim içerir. İlişkisel güçlerimizi birleştirebiliriz :has() olumsuzlama yetkileri ile :not() bunu yapmak için:
/* Matches an article without images */
article:not(:has(img)) { }Ancak bu, daha fazlasını yapmak için güçlerimizi nasıl birleştirebileceğimizin sadece başlangıcı. :has(). Özellikle tıklanabilir kart bilmecesini çözmeye geçmeden önce, şu anda kart kullanmadan yaklaşmanın birkaç yoluna bakalım. :has().
Tıklanabilir kartları şu anda nasıl kullanıyoruz?
Bugünlerde insanların tamamen tıklanabilir bir kartı nasıl oluşturduklarına dair üç ana yaklaşım var ve bu sözde sınıfın gücünü tam olarak anlamak için biraz özet geçmek güzel.
“Sarmalayıcı Olarak Bağlantı” yaklaşımı
Bu yaklaşım oldukça sık kullanılan bir yaklaşımdır. Bu yaklaşımı asla kullanmam ama bunu göstermek için hızlı bir demo hazırladım:
Burada özellikle erişilebilirlik söz konusu olduğunda pek çok endişe var. Kullanıcılar web sitenizde gezinirken rotor işlevi, bunun içindeki tam metni duyacaklar öğe — başlık, metin ve bağlantı. Birisi tüm bunları yaşamak istemeyebilir. Daha iyisini yapabiliriz. HTML5'ten bu yana, blok öğelerini bir dosyanın içine yerleştirebiliriz. eleman. Ama bana hiç doğru gelmiyor, özellikle de bu nedenle.
Artıları:
- Uygulaması hızlı
- Anlamsal olarak doğru
Eksileri:
- Erişilebilirlik endişeleri
- Metin seçilemiyor
- Varsayılan bağlantılarınızda kullandığınız stillerin üzerine yazmanın birçok zorluğu
JavaScript yöntemi
JavaScript'i kullanarak işaretlemeye yazmak yerine kartımıza bir bağlantı ekleyebiliriz. Bu harika CodePen demosunu buldum maliyet geliştirme bu süreçte kart metnini de seçilebilir hale getiren kişi:
Bu yaklaşımın birçok faydası vardır. Bağlantılarımıza odaklanıldığında erişilebilir ve hatta metin seçebiliyoruz. Ancak stil söz konusu olduğunda bazı dezavantajlar var. Örneğin bu kartları canlandırmak istiyorsak şunu eklememiz gerekir: :hover ana sayfamızdaki stiller .card bağlantının kendisi yerine sarmalayıcı. Ayrıca klavye sekmelerinden bağlantılar odakta olduğunda animasyonlardan da yararlanamayız.
Artıları:
- Mükemmel şekilde erişilebilir hale getirilebilir
- Metin seçme yeteneği
Eksileri:
- JavaScript gerektirir
- Sağ tıklamak mümkün değil (ancak bazı ekstra komut dosyalarıyla düzeltilebilir)
- Bağlantıya odaklanırken işe yaramayan, kartın kendisinde çok fazla stil gerektirecek
The ::after seçici yaklaşımı
Bu yöntem, kartı göreceli konumlandırmayla ayarlamamızı, ardından bağlantının mutlak konumlandırmasını ayarlamamızı gerektirir. ::after Bir bağlantının sözde seçicisi. Bu herhangi bir JavaScript gerektirmez ve uygulanması oldukça kolaydır:
Burada özellikle metin seçimi söz konusu olduğunda birkaç dezavantaj vardır. Kartınızın gövdesinde daha yüksek bir z-endeksi sağlamadığınız sürece metni seçemezsiniz ancak bunu yaparsanız metne tıklamanın bağlantınızı etkinleştirmeyeceği konusunda uyarılırsınız. Seçilebilir metin isteyip istemediğiniz size kalmış. Bunun bir UX sorunu olabileceğini düşünüyorum, ancak kullanım durumuna bağlıdır. Metne hâlâ ekran okuyucular erişebilir ancak yöntemle ilgili asıl sorunum, animasyon olanaklarının olmayışıdır.
Artıları:
- Uygulaması kolay
- Şişirilmiş metin içermeyen erişilebilir bağlantı
- Fareyle üzerine gelme ve odaklanma üzerinde çalışır
Eksileri:
- Metin seçilemiyor
- Üzerinde gezdirdiğiniz öğe bu olduğundan yalnızca bağlantıyı canlandırabilirsiniz.
Yeni bir yaklaşım: Kullanmak ::after ile :has()
Artık tıklanabilir kartlar için mevcut yaklaşımları oluşturduğumuza göre, bunun nasıl tanıtılacağını göstermek istiyorum. :has() karışım bu eksikliklerin çoğunu çözer.
Aslında bu yaklaşımı, kullanarak son baktığımız yaklaşıma dayandıralım. ::after bağlantı öğesinde. Aslında kullanabiliriz :has() bu yaklaşımın animasyon kısıtlamalarının üstesinden gelmek için oradayız.
İşaretlemeyle başlayalım:
Some Heading
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
Sınıflar yerine CSS'deki öğeleri hedefleyerek işleri mümkün olduğunca basit tutacağım.
Bu demo için, fareyle üzerine gelindiğinde karta bir resim yakınlaştırma ve gölge ekleyeceğiz ve bağlantının metin rengini değiştirirken açılan bir okla bağlantıyı canlandıracağız. Bunu kolaylaştırmak için kartımıza kapsamı belirlenen bazı özel özellikler ekleyeceğiz. İşte temel stil:
/* The card element */
article {
--img-scale: 1.001;
--title-color: black;
--link-icon-translate: -20px;
--link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow: none;
background: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
}Harika! Görüntü için bir başlangıç ölçeği ekledik (--img-scale: 1.001), kart başlığının başlangıç rengi (--title-color: black) ve okumuzu bağlantının dışına çıkarmak için kullanacağımız bazı ekstra özellikler. Ayrıca boş bir durum da belirledik. box-shadow daha sonra canlandırmak için beyan. Bu, şu anda tıklanabilir kart için ihtiyacımız olan şeyleri ayarlıyor; bu nedenle, canlandırmak istediğimiz öğelere bu özel özellikleri ekleyerek karta bazı sıfırlamalar ve stiller ekleyelim:
article h2 {
margin: 0 0 18px 0;
font-family: "Bebas Neue", cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
color: var(--title-color);
transition: color 0.3s ease-out;
}
article figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}
article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}
article a:focus {
outline: 1px dotted #28666e;
}
article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}
.article-body {
padding: 24px;
}İnsanlara karşı nazik olalım ve şunu da ekleyelim: ekran okuyucu sınıfı bağlantının arkasına gizlenmiş:
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}Kartımız oldukça tatlı görünmeye başlıyor. Biraz sihir eklemenin zamanı geldi. İle :has() sözde sınıf, artık bağlantımızın üzerine gelindiğini mi yoksa odaklandığını mı kontrol edebiliriz, ardından özel özelliklerimizi güncelleyebilir ve bir box-shadow. Bu küçük CSS parçasıyla kartımız gerçekten hayat buluyor:
/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #28666e;
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}Bakın orada ne var? Şimdi güncellenen stilleri alıyoruz: herhangi karttaki alt öğenin üzerine gelindiğinde veya odaklanıldığında. Bağlantı öğesi, fareyle üzerine gelme veya odaklanma durumunu içerebilen tek şey olmasına rağmen ::after tıklanabilir kart yaklaşımıyla bunu ana öğeyi eşleştirmek ve geçişleri uygulamak için kullanabiliriz.
İşte buyur. için başka bir güçlü kullanım örneği :has() seçici. Yalnızca diğer öğeleri argüman olarak bildirerek bir ana öğeyi eşleştirmekle kalmaz, aynı zamanda ebeveynleri eşleştirmek ve stillendirmek için sözdeleri kullanarak da eşleştirebiliriz.
Artıları:
- Ulaşılabilir
- Animasyonlu
- JavaScript'e gerek yok
- Kullanımlar
:hoverdoğru eleman üzerinde
Eksileri:
- Metin kolayca seçilemez.
- Tarayıcı desteği Chrome ve Safari ile sınırlıdır (Firefox'ta bir bayrakla desteklenir).
İşte bu tekniği kullanan bir demo. Kartın etrafında fazladan bir sarıcı fark edebilirsiniz, ancak bu sadece benim oynadığım bir şey kapsayıcı sorguları, tüm büyük tarayıcılarda kullanıma sunulan diğer harika şeylerden sadece biri.
Biraz var diğer örnekler paylaşmak ister misin? Yorum bölümünde diğer çözümler veya fikirler memnuniyetle karşılanacaktır.
