Mewujudkan Kad Animasi, Diklik dengan: Mempunyai () Kelas Pseudo Relasi

penyemak imbas krom dan safari telah menyokong sepenuhnya pseudo-kelas CSS, yang secara beransur-ansur dilancarkan dalam banyak penyemak imbas. Ia sering dipanggil "pemilih induk" - kita boleh memilih dan menetapkan gaya elemen induk melalui pemilih kanak -kanak - tetapi

digunakan jauh lebih daripada itu. Salah satu kegunaannya adalah untuk mengubah reka bentuk mod kad yang boleh diklik yang sering digunakan oleh ramai orang. :has() :has() kami akan meneroka

bagaimana untuk membantu kami dengan kad pautan, tetapi pertama ...

:has()

Apakah kelas pseudo?

:has() Terdapat banyak artikel yang sangat baik yang menjelaskan tujuan

dengan baik, tetapi ia masih agak baru, jadi kita juga harus memperkenalkannya secara ringkas di sini.

:has()

adalah kelas pseudo relasi yang merupakan sebahagian daripada draf W3C Level 4 Working W3C. Inilah kurungan untuk: elemen perlawanan yang berkaitan dengan elemen kanak -kanak tertentu (lebih tepatnya, mengandungi elemen kanak -kanak tertentu).

:has()

supaya anda dapat memahami mengapa kita mungkin merujuknya sebagai pemilih "ibu bapa". Tetapi kita juga boleh menggunakannya bersempena dengan kelas pseudo berfungsi lain untuk mendapatkan perlawanan yang lebih spesifik. Katakan kita mahu gaya artikel

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

tidak mengandungi sebarang imej. Kita boleh menggabungkan keupayaan hubungan

dengan keupayaan negatif untuk mencapai ini: :has() :not() tetapi ini hanya permulaan bagaimana kita dapat menggabungkan pelbagai keupayaan untuk mencapai lebih banyak fungsi menggunakan

. Sebelum kita menyelesaikan teka -teki kad yang boleh diklik, mari kita lihat beberapa cara untuk menangani mereka tanpa menggunakan

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

.

:has() bagaimana kita sekarang berurusan dengan kad yang boleh diklik :has()

Pada masa kini, terdapat tiga cara utama bagi orang untuk membuat kad yang boleh diklik sepenuhnya.

"pautan sebagai pembungkus" kaedah

Kaedah ini sering digunakan. Saya tidak pernah menggunakan kaedah ini, tetapi saya mencipta demo cepat untuk menunjukkannya:

Terdapat banyak isu di sini, terutamanya ketika datang ke aksesibilitas. Apabila pengguna melayari laman web anda menggunakan ciri pemutar, mereka mendengar teks penuh di dalam elemen

tajuk, teks, dan pautan. Sesetengah orang mungkin tidak mahu mendengar semua ini. Kita boleh melakukan yang lebih baik. Bermula dengan HTML5, kita boleh bersarang unsur -unsur blok dalam

elemen. Tetapi ini selalu terasa salah kepada saya, terutamanya atas sebab ini.

<a></a> <a></a> Pro:

cepat melaksanakan

semantik betul
Kekurangan:

Isu Kebolehcapaian

teks tidak boleh dipilih
sangat menyusahkan untuk mengatasi gaya yang digunakan dalam pautan lalai
• kaedah javascript

Dengan JavaScript, kita boleh melampirkan pautan ke kad dan bukannya menulisnya ke dalam tag. Saya dapati demo Codepen yang hebat ini oleh Costdev, yang juga menjadikan teks kad pilihan dalam proses:

Kaedah ini mempunyai banyak faedah. Pautan kami boleh diakses apabila difokuskan dan kami juga boleh memilih teks. Tetapi terdapat beberapa kelemahan dari segi gaya. Sebagai contoh, jika kita mahu menghidupkan kad ini, kita perlu menambah gaya .card dalam pembungkus utama :hover dan bukannya pautan itu sendiri. Kami juga tidak mendapat manfaat daripada animasi apabila pautan difokuskan melalui kekunci tab papan kekunci.

Pro:

• kebolehcapaian penuh dapat dicapai
• teks yang boleh dipilih

Kekurangan:

• JavaScript diperlukan
• tidak boleh klik kanan (walaupun ia boleh diperbaiki dengan beberapa skrip tambahan)
• Banyak gaya yang diperlukan untuk dilakukan pada kad itu sendiri, yang tidak berfungsi apabila memberi tumpuan kepada pautan

::after kaedah pemilih

Kaedah ini menghendaki kami menetapkan kad ke kedudukan relatif dan kemudian tetapkan kedudukan mutlak pada pemilih pseudo yang dipautkan. Ini tidak memerlukan mana -mana JavaScript dan mudah dilaksanakan: ::after

Terdapat beberapa kelemahan di sini, terutamanya apabila memilih teks. Anda tidak akan dapat memilih teks melainkan anda memberikan indeks Z yang lebih tinggi pada badan kad, tetapi jika anda lakukan, ketahui bahawa mengklik pada teks tidak akan mengaktifkan pautan anda. Sama ada anda mahukan teks yang boleh dipilih terpulang kepada anda. Saya fikir ini mungkin isu UX, tetapi ia bergantung kepada kes penggunaan. Teks ini masih boleh diakses melalui pembaca skrin, tetapi masalah utama saya dengan pendekatan ini adalah kekurangan kemungkinan animasi.

Pro:

mudah dilaksanakan
pautan yang boleh diakses, tiada teks berlebihan
dilaksanakan ketika melayang dan fokus

Kekurangan:

teks tidak boleh dipilih
Anda hanya boleh menghidupkan pautan kerana ini adalah elemen yang anda hover.

Kaedah baru: Gunakan

gabungan dengan ::after :has()

Sekarang kami telah mengenal pasti kaedah sedia ada untuk kad yang boleh diklik, saya ingin menunjukkan cara menambah

campuran untuk menyelesaikan kebanyakan kekurangan ini. :has()

Malah, mari kita mendasarkan pendekatan ini pada kaedah yang terakhir kita lihat menggunakan

pada elemen pautan. Kita sebenarnya boleh menggunakan ::after di sana untuk mengatasi batasan animasi kaedah. :has()

mari kita mulakan dengan penanda:

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

Untuk memastikan ia mudah, saya akan meletakkan unsur -unsur secara langsung dalam CSS, bukannya menggunakan kelas.

Untuk demo ini, kami akan menambah skala imej dan bayang -bayang ke kad untuk melayang dan menghidupkan pautan supaya anak panah muncul dan mengubah warna teks pautan. Untuk memudahkan operasi, kami akan menambah beberapa sifat tersuai scoped ke kad. Ini adalah gaya asas:

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

sangat bagus! Kami telah menambah penskalaan awal (--img-scale: 1.001), warna awal tajuk kad (--title-color: black) dan beberapa sifat tambahan yang akan kami gunakan untuk membuat anak panah muncul dari pautan. Kami juga menetapkan keadaan kosong pengisytiharan box-shadow untuk menghidupkannya kemudian. Ini menetapkan asas untuk kad yang boleh diklik yang perlu kita buat sekarang, jadi mari tambahkan beberapa reset dan gaya dengan menambahkan sifat -sifat tersuai ini kepada unsur -unsur yang kita ingin menghidupkan:

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

mari kita mesra pengguna dan tambahkan kelas yang tersembunyi di pembaca skrin di belakang pautan:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Animated, Clickable Cards With the :has() Relational Pseudo Class "><div clas="article-body">
    <h2>Some Heading</h2>
    <p>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.</p>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
      Read more
       <svg fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg></a>
  </div>

kad kami mula kelihatan cantik. Sudah tiba masanya untuk menambah sihir kepadanya. Menggunakan kelas pseudo :has(), kini kami boleh menyemak sama ada pautan kami dilegakan atau difokuskan, kemudian kemas kini sifat tersuai kami dan tambah box-shadow. Dengan kod CSS yang kecil ini, kad kami benar -benar hidup:

/* 卡片元素 */
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: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* 链接的::after伪元素 */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

adakah anda melihat kandungan di atas? Sekarang, jika ada unsur -unsur kanak -kanak di dalam kad yang dilegakan atau difokuskan, kami akan mendapat gaya terkini. Walaupun elemen pautan adalah satu -satunya elemen yang boleh mengandungi keadaan hover atau fokus dalam kaedah kad yang boleh diklik, kita boleh menggunakannya untuk memadankan elemen induk dan menggunakan transformasi. itu sahaja. Satu lagi kes penggunaan yang kuat untuk pemilih. Kita bukan sahaja boleh memadankan elemen induk dengan mengisytiharkan elemen lain sebagai parameter, tetapi juga menggunakan kelas pseudo untuk dipadankan dan menetapkan gaya elemen induk. ::after

Pro: :has()

boleh diakses

anime boleh ditetapkan

• Tiada JavaScript diperlukan
• Gunakan pada elemen yang betul
• :hover Kekurangan:

teks tidak mudah dipilih.

Sokongan penyemak imbas terhad kepada Chrome dan Safari (di Firefox, ia disokong di belakang logo).

Ini adalah demonstrasi menggunakan teknik ini. Anda mungkin melihat pembungkus tambahan di sekitar kad, tetapi ini hanya beberapa percubaan yang saya buat semasa menggunakan pertanyaan kontena, yang merupakan salah satu daripada beberapa ciri hebat lain yang dilancarkan di semua pelayar utama.
Adakah anda mempunyai beberapa contoh lain yang ingin anda kongsi? Bahagian komen sangat dialu -alukan untuk penyelesaian atau idea lain.

Atas ialah kandungan terperinci Mewujudkan Kad Animasi, Diklik dengan: Mempunyai () Kelas Pseudo Relasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!