Cara Menunggu Fungsi Saingan () dan Sibling-Index ()

Ciri -ciri baru CSS tidak muncul dari udara tipis, tetapi melalui proses yang panjang: perbincangan, penilaian, definisi, penulisan, prototaip, ujian, penerbitan, sokongan, dan banyak lagi. Proses ini sangat panjang, dan walaupun kita ingin menggunakan ciri -ciri baru, kita hanya boleh menunggu.

Tetapi kita boleh memilih cara yang berbeza menunggu: mengelakkan antara muka atau demonstrasi sepenuhnya menggunakan ciri ini? Atau mencabar sempadan CSS dan cuba melaksanakannya sendiri?

Banyak pemaju yang giat dan ingin tahu telah memilih yang terakhir. Tanpa mentaliti ini, CSS akan bertakung. Jadi hari ini kita akan meneroka dua fungsi yang akan datang:

dan sibling-count(). Kami telah menantikan mereka selama bertahun -tahun, jadi biarkan saya membiarkan rasa ingin tahu saya terbang dan merasakan daya tarikan mereka terlebih dahulu! sibling-index()

Fungsi kiraan pokok

Anda mungkin perlu tahu di mana elemen berada dalam elemen adiknya, atau berapa elemen kanak -kanak elemen tertentu untuk mengira dalam CSS, seperti melaksanakan beberapa animasi interleaving, setiap elemen mempunyai kelewatan yang lebih panjang, atau mengubah warna latar belakang elemen berdasarkan bilangan unsur saudara. Ini telah lama menjadi projek yang lama ditunggu-tunggu di senarai keinginan CSS saya. Semak 2017 CSSWG GitHub Issue:

permintaan fungsi. Ia akan menjadi baik untuk dapat menggunakan fungsi

dalam fungsi calc(). Ini akan membawa kemungkinan baru ke susun atur. counter()

Walau bagaimanapun, fungsi

menggunakan rentetan, yang menjadikannya tidak berguna dalam fungsi

yang mengendalikan nombor. Kami memerlukan satu set fungsi yang sama yang mengembalikan indeks elemen dan bilangan unsur saudara dalam bentuk integer counter() calc(). Ini tidak sepatutnya menjadi permintaan yang terlalu banyak. Pada masa ini, kita boleh menggunakan pemilih pseudo-pseudo (dan variannya) kepada elemen pertanyaan berdasarkan lokasi pokok, belum lagi menggunakan pemilih pseudo untuk pertanyaan berdasarkan bilangan item yang mengandungi elemen. :nth-child() bernasib baik, tahun ini CSSWG meluluskan pelaksanaan fungsi :has() dan

! Sesetengah kandungan telah ditulis dalam spesifikasi:

sibling-count() Fungsi sibling-index()

mewakili jumlah elemen kanak -kanak dalam elemen induk elemen menggunakan fungsi, dinyatakan sebagai

.

sibling-count() Fungsi <integer></integer> mewakili indeks elemen menggunakan fungsi dalam elemen kanak -kanak elemen induknya, yang diwakili oleh

. Sama seperti

, sibling-index() dikira dari 1. <integer></integer> :nth-child() sibling-index() Berapa lama masa yang diperlukan untuk kita menggunakannya? Awal tahun ini, Adam Argyle berkata: "Seorang jurutera kromium yang disebutkan untuk melakukan ini, tetapi kami tidak mempunyai logo untuk mencubanya. Saya akan berkongsi apabila ada berita!" Sementara itu, mari kita lihat apa yang boleh kita lakukan sekarang!

Kemas kini (5 Mac, 2025):

Chrome telah mengemukakan niat untuk prototaip kedua -dua fungsi ini. Kaedah Asal

Dari segi sintaks dan penggunaan, perkara yang paling dekat dengan fungsi kiraan pokok adalah sifat tersuai. Walau bagaimanapun, masalah terbesar ialah bagaimana untuk mengisi mereka dengan indeks dan tuduhan yang betul. Cara yang paling mudah dan paling lama adalah untuk menghancurkan kod setiap nilai menggunakan CSS tulen: kita boleh menggunakan pemilih

untuk memberikan setiap elemen indeks yang sepadan:

nth-child()

Menetapkan

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

Kesamaan memerlukan lebih banyak subtleties kerana kita perlu menggunakan bilangan pemilih

untuk meminta pertanyaan. Pertanyaan kuantiti mempunyai sintaks berikut: sibling-count() :has()

... di mana m adalah bilangan elemen yang ingin kita cari. Ia berfungsi dengan memeriksa jika elemen terakhir bekas juga merupakan unsur nth kita kedudukan; oleh itu ia hanya mempunyai banyak elemen. Anda boleh menggunakan alat ini dari Temani AFIF untuk membuat pertanyaan kuantiti anda sendiri. Dalam kes ini, pertanyaan kuantiti kami kelihatan seperti ini:

.container:has(> :last-child:nth-child(m)) { }

Untuk keringkasan, contoh ini sengaja mengandungi hanya sebilangan kecil elemen, tetapi ketika senarai tumbuh, ia akan menjadi sukar untuk dikendalikan. Mungkin kita boleh menggunakan preprocessors seperti SASS untuk menulisnya untuk kita, tetapi kita mahu memberi tumpuan kepada penyelesaian CSS tulen di sini. Sebagai contoh, demonstrasi berikut boleh menyokong sehingga 12 elemen, dan anda sudah dapat melihat bagaimana kod hodoh itu.

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

Bagi mereka yang menjaringkan gol, ia mengambil 24 peraturan untuk memahami indeks dan mengira 12 elemen. Kami pastinya berasa seperti kami dapat mengurangkan nombor ini kepada nombor yang lebih mudah diurus, tetapi jika kami menghidupkan setiap indeks, kami meningkatkan jumlah kod yang kami tulis. Perkara terbaik yang boleh kita lakukan ialah menulis semula CSS kita supaya kita boleh sarang

dan

sifat bersama -sama. Daripada menulis setiap atribut secara berasingan: --sibling-index --sibling-count

kita boleh sarang peraturan

li:nth-child(2) {
  --sibling-index: 2;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

dalam peraturan

. --sibling-count --sibling-index

Walaupun kelihatan pelik untuk sarang elemen induk di dalam elemen anaknya, kod CSS berikut benar -benar sah; Sintaks mana yang lebih mudah untuk dikendalikan? Ia bergantung pada anda.

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

Tetapi ini hanya sedikit peningkatan. Jika kita mempunyai 100 elemen, kita masih perlu mengikat kod li dan li 100 kali. Nasib baik, kaedah berikut akan menambah peraturan dengan cara logaritma, terutamanya dengan Base 2. Oleh itu, bukannya menulis 100 peraturan untuk 100 elemen, kita hanya perlu menulis kira -kira 100 peraturan untuk kira -kira 100 elemen. ol

Kaedah Penambahbaikan

--sibling-index Kaedah ini mula -mula diterangkan oleh Roman Komarov pada bulan Oktober tahun lepas, di mana dia prototaip fungsi kiraan dua pokok dan fungsi masa depan --sibling-count. Ini adalah jawatan yang hebat, jadi saya sangat mengesyorkan anda membacanya.

Kaedah ini juga menggunakan sifat tersuai, bagaimanapun, bukannya berkod keras setiap harta, kami akan menggunakan dua sifat tersuai untuk membina harta --sibling-index setiap elemen. Untuk selaras dengan artikel Roman, kami memanggil mereka --si1 dan --si2, kedua -duanya bermula pada 0:

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

Real --sibling-index akan dibina menggunakan kedua -dua sifat ini dan faktor (f), yang mewakili integer lebih besar daripada atau sama dengan 2, yang memberitahu kita bilangan unsur yang boleh dipilih mengikut formula sqrt(F) - 1. Jadi ...

• Untuk faktor 2, kita boleh memilih 3 elemen.
• Untuk faktor 3, kita boleh memilih 8 elemen.
• Untuk faktor 5, kita boleh memilih 24 elemen.
• Untuk faktor 10, kita boleh memilih 99 elemen.
• Untuk faktor 25, kita boleh memilih 624 elemen.

seperti yang anda lihat, meningkatkan faktor dengan 1 akan meningkatkan bilangan elemen yang boleh kita pilih secara eksponen. Tetapi bagaimana ini diterjemahkan ke dalam CSS?

Perkara pertama yang perlu diketahui ialah formula untuk mengira atribut --sibling-index adalah calc(F * var(--si2) var(--si1)). Jika faktor kami adalah 3, nampaknya ini:

.container:has(> :last-child:nth-child(m)) { }

pemilih di bawah mungkin rawak, tetapi sila bersabar dengan saya untuk menerangkan. Untuk atribut --si1, kami akan menulis peraturan untuk unsur -unsur yang dipilih sebagai gandaan faktor dan mengimbangi mereka dengan 1 hingga f - 1 dicapai, dan kemudian tetapkan --si1 sebagai offset. Ini diterjemahkan ke CSS berikut:

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

Jadi jika faktor kami adalah 3, kami akan menulis peraturan berikut sehingga kami mencapai F-1, iaitu 2 peraturan:

li:nth-child(2) {
  --sibling-index: 2;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

Untuk atribut --si2, kami akan menulis peraturan untuk memilih elemen dengan bilangan elemen dalam kelompok sebagai faktor (jadi jika faktor kami adalah 3, kami akan memilih 3 elemen setiap peraturan), bergerak ke belakang dari indeks yang mungkin terakhir (8 dalam kes ini) sehingga kami tidak lagi dapat memilih lebih banyak elemen dalam batch. Ini agak rumit untuk menulis dalam CSS:

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

Begitu juga, jika faktor kami adalah 3, kami akan menulis dua peraturan berikut:

li {
  --si1: 0;
  --si2: 0;
}

itu sahaja! Dengan menetapkan hanya nilai --si1 dan --si2, kita boleh mengira sehingga 8 elemen. Pengiraan matematik di sebalik bagaimana ia berfungsi kelihatan pelik pada pandangan pertama, tetapi apabila anda memahaminya secara intuitif, semuanya jelas. Saya membuat demo interaktif ini di mana anda dapat melihat bagaimana untuk mengakses semua elemen menggunakan formula ini. Hover di atas coretan kod untuk melihat unsur -unsur mana yang anda boleh pilih dan klik setiap coretan kod untuk menggabungkannya ke dalam indeks yang mungkin.

Jika anda menyesuaikan elemen dan faktor maksimum, anda akan melihat bahawa kami boleh memilih 48 elemen dengan hanya 14 coretan kod!

dan lain -lain, ada satu perkara yang hilang: sibling-count() fungsi. bernasib baik, kami akan menggunakan semula segala yang kami pelajari dari prototaip sibling-index(). Kami akan bermula dengan dua sifat tersuai: --sc1 dan --sc1 dalam bekas, dan kedua -duanya bermula dengan 0 juga. Formula untuk mengira --sibling-count adalah sama.

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

artikel Roman juga menerangkan cara menulis pemilih untuk atribut --sibling-count secara berasingan, tetapi kami akan menggunakan kaedah pemilihan :has() dalam teknik pertama kami supaya kami tidak perlu menulis pemilih tambahan. Kita boleh memasukkan sifat -sifat ini --sc1 dan --sc2 ke dalam peraturan yang kita tentukan sibling-index() sifat:

.container:has(> :last-child:nth-child(m)) { }

Ini menggunakan Faktor 3, jadi kita boleh mengira sehingga lapan elemen dengan hanya empat peraturan. Contoh berikut mempunyai faktor 7, jadi kita boleh mengira sehingga 48 elemen dengan hanya 14 peraturan.

Kaedah ini hebat, tetapi mungkin bukan untuk semua orang kerana ia berfungsi hampir ajaib atau semata -mata kerana anda tidak dapati ia menyenangkan secara estetika. Walaupun ini mudah bagi mereka yang berminat untuk membakar dengan batu api dan keluli, ramai orang tidak boleh menyalakan api mereka.

kaedah javascript

Untuk pendekatan ini, kami akan menggunakan ciri-ciri tersuai untuk mensimulasikan fungsi kiraan pokok, dan yang terbaik, kami akan menulis kurang daripada 20 baris kod untuk dikira kepada infiniti-atau saya akan mengatakan 1.7976931348623157E 308, yang merupakan had untuk nombor terapung ketepatan dua kali!

Kami akan menggunakan API Observer Mutasi, jadi tentu saja JavaScript diperlukan. Saya tahu ia seperti mengakui kegagalan ramai orang, tetapi saya tidak bersetuju. Jika kaedah JavaScript lebih mudah (yang memang benar dalam kes ini), maka ia adalah pilihan yang paling sesuai. Dengan cara ini, jika prestasi adalah kebimbangan utama anda, berpegang pada kod keras setiap indeks dalam CSS atau HTML.

Pertama, kami akan mendapatkan bekas kami dari Dom:

ol:has(> :nth-child(1)) {
  --sibling-count: 1;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

ol:has(> :last-child:nth-child(3)) {
  --sibling-count: 3;
}

/* 以此类推... */

Kami kemudian akan membuat fungsi yang menetapkan atribut --sibling-index dalam setiap elemen dan --sibling-count dalam bekas (ia akan tersedia untuk unsur -unsur kanak -kanak kerana cascade). Untuk --sibling-index, kita perlu melangkah ke atas elements.children, dan kita boleh mendapatkan elements.children.length dari --sibling-count.

li:nth-child(2) {
  --sibling-index: 2;
}

ol:has(> :last-child:nth-child(2)) {
  --sibling-count: 2;
}

sebaik sahaja kita mempunyai fungsi kita, ingatlah untuk memanggilnya sekali supaya kita mempunyai harta kiraan pokok awal:

li:nth-child(2) {
  --sibling-index: 2;

  ol:has(> &:last-child) {
    --sibling-count: 2;
  }
}

Akhir sekali, pemerhati mutasi. Kita perlu memulakan pemerhati baru menggunakan pembina MutationObserver. Ia menerima fungsi panggil balik yang dipanggil setiap kali elemen berubah, jadi kami menulis fungsi updateCustomProperties. Menggunakan objek Observer yang dihasilkan, kita boleh memanggil kaedah observe(), yang menerima dua parameter:

1. unsur -unsur yang ingin kita perhatikan, dan
2. Objek konfigurasi yang mentakrifkan apa yang ingin kita perhatikan melalui tiga sifat boolean: attributes, childList, dan subtree. Dalam kes ini, kami hanya ingin menyemak perubahan dalam childList, jadi kami menetapkan harta itu kepada true:

li:nth-child(1) {
  --sibling-index: 1;
}

li:nth-child(2) {
  --sibling-index: 2;
}

li:nth-child(3) {
  --sibling-index: 3;
}

/* 以此类推... */

Ini semua yang perlu kita lakukan! Menggunakan kaedah ini, kita boleh mengira banyak unsur -unsur, dalam demonstrasi berikut saya menetapkan nilai maksimum kepada 100, tetapi dengan mudah mencapai sepuluh kali:

Jadi ya, itulah flamethrower kami. Ia pasti menyalakan api, tetapi untuk kebanyakan kes penggunaan, ia terlalu kuat. Tetapi itulah yang kita ada ketika kita menunggu lebih ringan.

Apa yang akan anda lakukan seterusnya?

Saya tidak mempunyai mesin masa, jadi saya tidak boleh mengatakan apabila fungsi

dan sibling-index() akan diterbitkan. Walau bagaimanapun, CSSWG telah menulis sesuatu dalam spesifikasi, dan niat penyemak imbas (terutamanya kromium) untuk menerbitkan perkara telah sangat kuat akhir -akhir ini, jadi saya percaya kita akan melihat kedua -dua fungsi ini tidak lama lagi! sibling-count() Nasib baik, sebaik sahaja mereka diterbitkan dan sokongan boleh diterima, anda hanya perlu menetapkan sifat tersuai ini dengan nama yang sama dengan fungsi mereka. Sudah tentu, jika anda tidak mahu mengubah suai CSS untuk menukar setiap atribut tersuai, anda juga boleh melakukan ini:

Maklumat dan tutorial lebih lanjut

.container:has(> :last-child:nth-child(m)) { }

Kemungkinan CSS Masa Depan: Fungsi pengiraan pokok dan nilai rawak (Roman Komarov)

• Lihat peralihan mengejutkan (Chris Coyier)
• indeks elemen (Chris Coyier)
Soalan berkaitan

membolehkan penggunaan kaunter () di dalam calc () #1026

• Cadangan: Tambah adik-beradik-kiraan () dan adik-beradik () #4559
• memperluaskan saudara-indeks () dan saudara-saudara () dengan argumen pemilih #9572
• Cadangan: Fungsi Kanak-kanak () Kanak-kanak #11068
• Cadangan: Fungsi Descendant-Count () #11069
Output yang disemak semula ini mengekalkan imej asal dan formatnya, menyusun semula ayat dan perenggan untuk mencapai perapian tanpa mengubah makna teras, dan menggunakan lebih banyak bahasa yang ringkas dan menarik.

Atas ialah kandungan terperinci Cara Menunggu Fungsi Saingan () dan Sibling-Index (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!