CSS :has() pseudo class diluncurkan di banyak browser dengan Chrome dan Safari sudah mendukung sepenuhnya. Ini sering disebut sebagai "pemilih induk" — seperti, kita dapat memilih gaya elemen induk dari pemilih anak — tetapi ada lebih banyak lagi yang :has() dapat membantu kami memecahkan. Salah satunya adalah menemukan kembali pola kartu yang dapat diklik yang banyak dari kita suka gunakan dari waktu ke waktu.
Kami akan melihat caranya :has() dapat membantu kami menangani kartu yang ditautkan, tetapi pertama-tama…
Apa ini :has() kelas palsu?
Sudah ada ikat of besar posting mengambang di sekitar yang melakukan pekerjaan yang sangat baik menjelaskan apa :has() adalah dan untuk apa itu digunakan, tetapi itu masih cukup baru sehingga kita harus mengatakan beberapa kata tentangnya di sini juga.
:has() adalah kelas pseudo relasional yang merupakan bagian dari W3C Selectors Level 4 draft kerja. Itulah arti tanda kurung: elemen yang cocok yang terkait dengan — atau, lebih tepatnya, mengandung — elemen anak tertentu.
/* 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) { }Jadi, Anda dapat melihat mengapa kami mungkin ingin menyebutnya sebagai pemilih "induk". Tapi kita juga bisa menggabungkannya dengan kelas semu fungsional lainnya untuk mendapatkan yang lebih spesifik. Katakanlah kita ingin menata artikel yang melakukannya tidak berisi gambar apa pun. Kita dapat menggabungkan kekuatan relasional dari :has() dengan kekuatan negasi dari :not() untuk melakukannya:
/* Matches an article without images */
article:not(:has(img)) { }Tapi itu baru permulaan bagaimana kita bisa menggabungkan kekuatan untuk berbuat lebih banyak dengan :has(). Sebelum kita beralih secara khusus untuk memecahkan teka-teki kartu yang dapat diklik, mari kita lihat beberapa cara saat ini kita mendekati mereka tanpa menggunakan :has().
Bagaimana saat ini kami menangani kartu yang dapat diklik
Ada tiga pendekatan utama tentang bagaimana orang membuat kartu yang sepenuhnya dapat diklik akhir-akhir ini dan untuk sepenuhnya memahami kekuatan kelas semu ini, ada baiknya untuk memiliki sedikit ringkasan.
Pendekatan "Tautan sebagai Pembungkus"
Pendekatan ini adalah sesuatu yang cukup sering digunakan. Saya tidak pernah menggunakan pendekatan ini tetapi saya membuat demo cepat untuk mendemonstrasikannya:
Ada banyak kekhawatiran di sini, terutama dalam hal aksesibilitas. Saat pengguna menavigasi situs web Anda menggunakan fungsi rotor, mereka akan mendengar teks lengkap di dalamnya elemen — judul, teks, dan tautan. Seseorang mungkin tidak ingin duduk melalui semua itu. Kita bisa melakukan yang lebih baik. Sejak HTML5, kita dapat menyarangkan elemen blok di dalam an elemen. Tapi itu tidak pernah terasa benar bagi saya, terutama karena alasan ini.
Pro:
- Cepat untuk diimplementasikan
- Benar secara semantik
Cons:
- Masalah aksesibilitas
- Teks tidak dapat dipilih
- Banyak kerumitan untuk menimpa gaya yang Anda gunakan pada tautan default Anda
Metode JavaScript
Menggunakan JavaScript, kami dapat melampirkan tautan ke kartu kami alih-alih menulisnya di markup. Saya menemukan demo CodePen yang hebat ini oleh biaya pengembangan yang juga membuat teks kartu dapat dipilih dalam proses:
Pendekatan ini memiliki banyak manfaat. Tautan kami dapat diakses pada fokus dan kami bahkan dapat memilih teks. Tetapi ada beberapa kelemahan dalam hal gaya. Jika kita ingin menganimasikan kartu-kartu itu, misalnya, kita harus menambahkan :hover gaya di utama kami .card pembungkus alih-alih tautan itu sendiri. Kami juga tidak akan mendapat manfaat dari animasi saat tautan berada dalam fokus dari tab keyboard.
Pro:
- Dapat dibuat dengan sempurna diakses
- Kemampuan untuk memilih teks
Cons:
- Memerlukan JavaScript
- Mengklik kanan tidak mungkin (walaupun bisa diperbaiki dengan beberapa skrip tambahan)
- Akan membutuhkan banyak gaya pada kartu itu sendiri yang tidak akan berfungsi saat memfokuskan tautan
Grafik ::after pendekatan pemilih
Metode ini mengharuskan kita untuk mengatur kartu dengan posisi relatif, kemudian mengatur posisi absolut pada link ::after pemilih semu dari suatu tautan. Ini tidak memerlukan JavaScript apa pun dan cukup mudah diterapkan:
Ada beberapa kelemahan di sini, terutama dalam hal memilih teks. Kecuali Anda memberikan indeks-z yang lebih tinggi pada badan kartu Anda, Anda tidak akan dapat memilih teks tetapi jika Anda melakukannya, berhati-hatilah bahwa mengklik teks tidak akan mengaktifkan tautan Anda. Apakah Anda ingin teks yang dapat dipilih terserah Anda. Saya pikir ini bisa menjadi masalah UX, tetapi itu tergantung pada kasus penggunaan. Teks masih dapat diakses oleh pembaca layar tetapi masalah utama saya dengan metode ini adalah kurangnya kemungkinan animasi.
Pro:
- Mudah diimplementasikan
- Tautan yang dapat diakses tanpa teks yang membengkak
- Bekerja pada hover dan fokus
Cons:
- Teks tidak dapat dipilih
- Anda hanya dapat menganimasikan tautan karena ini adalah elemen yang Anda arahkan.
Pendekatan baru: Menggunakan ::after dengan :has()
Sekarang kami telah menetapkan pendekatan yang ada untuk kartu yang dapat diklik, saya ingin menunjukkan bagaimana memperkenalkan :has() untuk campuran memecahkan sebagian besar kekurangan tersebut.
Faktanya, mari kita mendasarkan pendekatan ini pada yang terakhir kita lihat menggunakan ::after pada elemen tautan. Kami benar-benar dapat menggunakan :has() ada untuk mengatasi kendala animasi pendekatan itu.
Mari kita mulai dengan markup:
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.
Saya akan menjaga hal-hal sesederhana mungkin dengan menargetkan elemen di CSS alih-alih kelas.
Untuk demo ini, kita akan menambahkan zoom gambar dan bayangan ke kartu saat mengarahkan kursor, dan menganimasikan tautan dengan panah yang muncul dan saat mengubah warna teks tautan. Untuk mempermudah ini, kami akan menambahkan beberapa properti khusus yang dicakup pada kartu kami. Inilah gaya dasar:
/* 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;
}Besar! Kami menambahkan skala awal untuk gambar (--img-scale: 1.001), warna awal judul kartu (--title-color: black) dan beberapa properti tambahan yang akan kita gunakan untuk membuat panah kita keluar dari tautan. Kami juga telah menetapkan status kosong dari box-shadow deklarasi untuk menghidupkannya nanti. Ini mengatur apa yang kita butuhkan untuk kartu yang dapat diklik sekarang, jadi mari tambahkan beberapa pengaturan ulang dan penataan dengan menambahkan properti khusus tersebut ke elemen yang ingin kita animasikan:
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;
}Mari kita bersikap baik kepada orang-orang dan juga menambahkan kelas pembaca layar tersembunyi di balik tautan:
.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;
}Kartu kami mulai terlihat cukup manis. Saatnya untuk menambahkan sedikit keajaiban. Dengan :has() kelas semu, kita sekarang dapat memeriksa apakah tautan kita melayang atau terfokus, lalu perbarui properti khusus kita dan tambahkan box-shadow. Dengan potongan kecil CSS ini, kartu kami benar-benar menjadi hidup:
/* 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;
}Lihat apa yang di atas sana? Sekarang kita mendapatkan gaya yang diperbarui jika Apa pun elemen anak dalam kartu melayang atau terfokus. Dan meskipun elemen tautan adalah satu-satunya hal yang dapat berisi status melayang atau fokus di ::after pendekatan kartu yang dapat diklik, kita dapat menggunakannya untuk mencocokkan elemen induk dan menerapkan transisi.
Dan di sana Anda memilikinya. Hanya kasus penggunaan kuat lainnya untuk :has() pemilih. Kita tidak hanya dapat mencocokkan elemen induk dengan mendeklarasikan elemen lain sebagai argumen, tetapi kita juga dapat mencocokkan menggunakan pseudo untuk mencocokkan dan menata gaya juga.
Pro:
- Diakses
- animasi
- Tidak perlu JavaScript
- penggunaan
:hoverpada elemen yang benar
Cons:
- Teks tidak mudah dipilih.
- Dukungan browser terbatas pada Chrome dan Safari (didukung di Firefox di belakang bendera).
Berikut adalah demo menggunakan teknik ini. Anda mungkin melihat pembungkus ekstra di sekitar kartu, tapi itu hanya saya yang bermain-main pertanyaan kontainer, yang hanyalah salah satu dari hal-hal fantastis lainnya yang diluncurkan di semua browser utama.
Dapat beberapa contoh lainnya Anda ingin berbagi? Solusi atau ide lain lebih dari diterima di bagian komentar.
