Haruskah kita tutup? | Kiat CSS – Beragampengetahuan

Selama beberapa bulan terakhir saya telah menulis banyak tentang pseudo-selector CSS, seperti ::picker() atau ::checkmark. Dan, dalam prosesnya, saya perhatikan bahwa saya cenderung menggunakan :open Dalam kasus saya, dan dalam pekerjaan saya secara umum, ada banyak penyeleksi semu.

Pinjam kata-kata dari penulis yang hebat :open Entri di almanak:

CSS :open Penyeleksi semu menargetkan elemen yang mendukung keadaan terbuka dan tertutup – mis. <details> Dan <select> elemen – dan di dalamnya keadaan terbuka.

Jadi, mengingat ini:

details:open {
  background: lightblue;
  color: darkred;
}

kami harapkan <details> Saat elemen terbuka, ia mendapat latar belakang biru muda dan teks merah tua (di semua tempat kecuali Safari saat saya menulis ini):

Namun bagaimana jika kita ingin memilih keadaan “off”? inilah yang kami punya:closed Kelas semu, kan? Itu harus sesuai dengan keadaan tertutup elemen. saya berkata, hipotesa Karena belum ditentukan.

Tapi apakah itu benar-benar perlu ditentukan? Saya hanya bertanya karena kita masih bisa menargetkan keadaan tertutup suatu elemen tanpa menggunakan :not():

/* When details is _not_ open, but closed */
details:not(:open) {
  /* ... */
}

Jadi, sekali lagi: kita sangat membutuhkan a :closed Kelas semu? Jawabannya mungkin akan mengejutkan Anda! (Hanya bercanda, ini bukan artikel semacam itu…)

beberapa latar belakang

Bicarakan lingkungan sekitar :open Dimulai pada Mei 2022, ketika Mason Freed mengangkat isu penambahan :open (Juga dianggap diberi nama :top-layer Pada saat itu) temukan elemen tingkat atas (seperti popup):

Hari ini, OpenUI WC juga memutuskan untuk menambahkan :top-layer Kelas semu harus diterapkan pada (setidaknya) elemen yang menggunakan API Popup tingkat atas saat ini. Namun, maksud dari penamaan dan perilakunya adalah agar kelas semu ini juga harus bersifat generik. Itu harus cocok dengan semua jenis elemen di tingkat atas, termasuk elemen modal <dialog>elemen layar penuh, dan ::backdrop Elemen semu.

Hal ini menimbulkan diskusi tentang apakah nama elemen semu yang ditargetkan di tingkat atas dari semua jenis elemen (misalnya popup, pemilih, dll.) harusnya. :open atau :top-layer. Ketika CSSWG akhirnya memutuskan :open Agustus 2022. Nama itu lebih masuk akal bagi saya karena “terbuka” mengandung arti sesuatu di atas.

tiba :close atau :not(:open)?

Tapi bertahanlah! Pada bulan September tahun itu, Mason bertanya apakah kami harus mengadakan hal serupa :closed kelas semu pendamping :open. Dengan cara ini, kita bisa mencocokkan elemen dalam keadaan “mati” sama seperti kita mencocokkan elemen dalam keadaan “aktif”. Hal ini masuk akal, setidaknya di permukaan. Tab Atkins menimpali:

Saya menyukai definisi ini karena menurut saya definisi ini menangkap gagasan “terbuka”, yang konsisten dengan apa yang menurut sebagian besar pengembang berarti “terbuka”. Saya juga berpikir ini membuatnya relatif mudah bagi HTML untuk menghubungkannya ke elemen tertentu.

Apa yang orang pikirkan?

Haruskah kita juga mendiskusikan penambahan yang sesuai :closed Kelas semu? Dengan cara ini Anda dapat menghindari masalah seperti ini :not(:open) bisa menandingi apa puntermasuk hal-hal yang tidak dapat dibuka atau ditutup.

Coba tebak? Semua orang sepertinya setuju. Mengapa? Karena itu masuk akal pada saat itu. Maksudku, karena kita memiliki kelas semu yang menargetkan elemen-elemen di dalamnya :open status, tentu saja masuk akal :closed Menargetkan elemen yang berada dalam keadaan tertutup, bukan? Benar? ?

TIDAK. Alasan ini sebenarnya problematis. Pada bulan Oktober tahun yang sama, Joey Arhar berkomentar:

Saya membuka pertanyaan baru tentang :closed Karena belum ada konsensus mengenai hal ini (#11039).

Tunggu, apa yang terjadi dengan konsensus? Ini adalah pertanyaan yang sama yang saya tanyakan di bagian atas posting ini. Menurut Luke Warlow:

membuat :closed Rasanya aneh mencocokkan sesuatu yang tidak pernah bisa dibuka. dan pada dasarnya akan berhasil :not(:open) Dalam keadaan apa kita membutuhkannya :closed? sepertinya kita tidak melakukannya :popover-closed karena yang terjadi justru sebaliknya :popover-open.

TIDAK :closed… saat ini

Maju cepat satu bulan ke November 2024. Semua orang mencapai konsensus bahwa sejak awal saja :open dan hapus :closed untuk sementara.

Dang Dang. Namun menurut WHATWG dan CSSWG, keputusan ini mungkin berubah di masa mendatang. Faktanya, hanya sebulan sebelum keputusan WHATWG, Bramus meninggalkan catatan bermanfaat di sana:

Anggap saja ini sebagai FYI: :read-only didefinisikan sebagai :not(:read-write)dan kemudian dikirim.

Manakah yang menurut Anda lebih mudah dipahami?

Secara pribadi, saya setuju :closed —atau bahkan menggunakan :not(:open) – sejauh itu berhasil. Nyatanya, saya terus bertukar :closed untuk :not(:open) di saya ::checkmark Dan ::picker() contoh. Itu sebabnya mereka menjadi seperti sekarang ini.

Tetapi! Jika Anda bertanya kepada saya mana yang lebih mudah bagi saya pada hari-hari biasa, saya rasa saya akan menjawabnya :closed. Lebih mudah untuk berpikir secara harfiah daripada menyangkal suatu pernyataan.

Tapi bagaimana menurut Anda? apakah kamu bersedia memilikinya :closed Atau biarkan saja sebagai :not(:open)?

Jika Anda seperti saya dan ingin mengikuti diskusi seperti ini, Anda selalu dapat membuka draf CSSWG di GitHub untuk menonton atau berpartisipasi.