CSS “Jika” mendapat kondisi sebaris – Beragampengetahuan

Beberapa minggu yang lalu, ketika Kelompok Kerja CSS (CSSWG) memutuskan untuk menambahkan a if() Bersyarat pada spesifikasi Modul Nilai CSS Level 5. Di hari yang sama, postingan X Lea Verou menarik perhatian saya:

Hari bersejarah bagi CSS😀🎉

Jika Anda telah menulis komponen apa pun yang digunakan dan/atau dirancang orang lain, Anda pasti tahu betapa besarnya hal ini!

Latar Belakang: if(style(–varian: sukses), var(–hijau));

Bahkan jika Anda tidak melakukannya, hal ini akan memungkinkan:
Bantalan: if(var(–2xl), 1em, var(–xl) atau var(–m),… pic.twitter.com/cXeqwBuXvK

— Lea Verou (@LeaVerou) 13 Juni 2024

Benar-benar kebetulan (atau kebetulan) bahwa Lea-lah yang membuka masalah GitHub dan memicu diskusi, dan resolusinya muncul pada hari ulang tahunnya. Ini pasti hari yang sangat melelahkan! Apa yang kamu dapatkan untuk ulang tahunmu? “Oh, tahukah Anda, itu hanya proposal yang diterima untuk spesifikasi CSS.” Liar, liar sekali.

Proposal yang diterima memberikan lampu hijau pada ide CSSWG untuk menyebarkan rancangan spesifikasi untuk masukan dan pertimbangan lebih lanjut, dan diharapkan menjadi fitur CSS yang direkomendasikan. Jadi, ini akan menjadi satu menit yang panas sebelum memanggangnya, yaitu, jika Ini dipanggang dengan sempurna.

Namun ide menerapkan gaya berdasarkan persyaratan bersyarat sangat menarik dan layak untuk dicermati sejak dini. Saya menulis beberapa catatan tentang hal itu di blog saya pada hari yang sama ketika Lea dibebaskan

ini bukanlah ide baru

Banyak proposal yang lahir dari proposal yang sebelumnya ditolak if() tidak ada perbedaan. Faktanya, dalam beberapa hari terakhir kami mendapatkan beberapa fitur CSS yang memungkinkan penataan gaya bersyarat – :has() dan kueri gaya kontainer adalah dua contoh yang lebih jelas. Lea bahkan mengutip tiket tahun 2018 yang terlihat dan terbaca sangat mirip dengan proposal yang diterima.

perbedaan?

Kueri gaya telah dipublikasikan dan kita cukup merujuk ke sintaks kondisional yang sama (plus media() Dan supports() dari label @when proposal), sedangkan dalam proposal tahun 2018, sebagian besar kondisi yang akan diterapkan masih belum ditentukan.

Lea Verou, “Persyaratan sebaris di CSS?”

Saya suka cara Lea menunjukkan CSS dan selanjutnya menjelaskan mengapa CSS selalu menjadi bahasa bersyarat:

Teman-teman…CSS telah bersyarat sejak awal. Setiap pemilih pada dasarnya adalah sebuah kondisi!

Lea Verou, “Persyaratan sebaris di CSS?”

nyata! Cascade adalah alat yang mengevaluasi penyeleksi dan mencocokkannya dengan elemen HTML pada halaman. Apa if() Apa yang dibawanya adalah cara untuk menulis kondisi inline menggunakan penyeleksi.

sintaksis

Intinya begini:

<if()> = if( <container-query>, [<declaration-value>]{1, 2} )

…Di mana:

• Nilai dapat disarangkan untuk menghasilkan banyak cabang.
• Jika argumen ketiga tidak diberikan, argumen tersebut setara dengan aliran token kosong.

Semua ini masih bersifat konseptual saat ini dan tidak ada yang pasti. Kami mungkin melihat banyak hal berubah saat CSSWG bekerja pada fitur ini. Namun untuk saat ini, idenya tampaknya berkisar pada penentuan kondisi dan pengaturan salah satu dari dua gaya yang dideklarasikan – satu sebagai gaya “default” dan yang lainnya sebagai gaya “perbarui” ketika terjadi kecocokan.

.element {
  background-color:
    /* If the style declares the following custom property: */
    if(style(--variant: success),
      var(--color-green-50), /* Matched condition */
      var(--color-blue-50);  /* Default style */
    );
}

Dalam hal ini kami mencari a style() Ketentuan untuk memanggil variabel CSS --variant Dideklarasikan dan ditetapkan ke nilai successDan:

• …jika --variant diatur ke successnilai yang kita tetapkan success tiba --color-green-50 Ini adalah variabel yang dipetakan ke beberapa nilai hijau.
• …jika --variant tidak disetel ke successnilai yang kita tetapkan success tiba --color-blue-50 Ini adalah variabel yang dipetakan ke beberapa nilai biru.

Gaya defaultnya opsional, jadi menurut saya gaya ini dapat dihilangkan agar lebih mudah dibaca dalam beberapa kasus:

.element {
  background-color:
    /* If the style declares the following custom property: */
    if(style(--variant: success),
      var(--color-green-50) /* Matched condition */
    );
}

Definisi sintaksis di atas menyebutkan bahwa selain kondisi yang cocok dan gaya default, kita juga dapat mendukung parameter ketiga, yang memungkinkan kita untuk menyarangkan kondisi dalam kondisi:

background-color: if(
  style(--variant: success), var(--color-success-60), 
    if(style(--variant: warning), var(--color-warning-60), 
      if(style(--variant: danger), var(--color-danger-60), 
        if(style(--variant: primary), var(--color-primary)
      )
    ),
  )
);

Oh, sepertinya ada kejadian gila yang terjadi di sana! Lea selanjutnya mengusulkan sintaksis yang menghasilkan struktur yang lebih datar:

<if()> = if( 
  [ <container-query>, [<declaration-value>]{2}  ]#{0, },
  <container-query>, [<declaration-value>]{1, 2} 
)

Dengan kata lain, kondisi tersarang lebih datar karena dapat dideklarasikan luar kondisi awal. Konsep yang sama seperti sebelumnya, tetapi sintaksisnya berbeda:

background-color: if(
  style(--variant: success), var(--color-success-60), 
  style(--variant: warning), var(--color-warning-60),
  style(--variant: danger), var(--color-danger-60), 
  style(--variant: primary), var(--color-primary)
);

Jadi, alih-alih a if() pernyataan di dalam yang lain if() Dalam sebuah pernyataan, kita dapat mengumpulkan semua kemungkinan kondisi pencocokan ke dalam satu pernyataan.

Ini semua tentang pertanyaan gaya

Kami mencoba mencocokkan a if() Tentukan kondisi dengan menanyakan gaya elemen. Tidak ada yang sesuai size() Fungsi yang digunakan untuk mengkueri dimensi – Kueri kontainer secara implisit mengasumsikan ukuran:

.element {
  background: var(--color-primary);

  /* Condition */
  @container parent (width >= 60ch) {
    /* Applied styles */
    background: var(--color-success-60);
  }
}

Kueri kontainer menjadi gaya Pertanyaan saat kami menelepon style() berfungsi sebagai gantinya:

.element {
  background: orangered;

  /* Condition */
  @container parent style(--variant: success) {
    /* Applied styles */
    background: dodgerblue;
  }
}

Kueri gaya lebih masuk akal bagi saya bila dilihat dalam konteks if(). TIDAK if(), mudah untuk mempertanyakan tujuan umum kueri gaya. Namun dari perspektif ini, jelas bahwa kueri gaya adalah bagian dari gambaran yang lebih besar, bukan hanya kueri kontainer.

Masih banyak hal yang harus diselesaikan if() sintaksis. Misalnya, Tab Atkins menjelaskan kemungkinan situasi yang dapat menyebabkan kebingungan antara kondisi kecocokan dan parameter gaya default. Jadi, siapa yang tahu bagaimana semua ini akan terjadi pada akhirnya!

Kondisi yang mendukung kondisi lainnya

Seperti yang telah kami tunjukkan, if() Ini bukan satu-satunya jenis pemeriksaan bersyarat yang tersedia di CSS. Tulis pernyataan kondisional sebaris untuk memeriksa kondisi lain (mis. @supports Dan @media?

Dalam kode:

background-color: if(
  supports( /* etc. */ ),
  @media( /* etc. */ )
);

Tantangannya terletak pada mendukung container untuk kueri besar dan kecil. Seperti disebutkan sebelumnya, tidak ada yang jelas size() fungsi; sebaliknya, ini lebih seperti fungsi anonim.

@andruud menjelaskan tantangan ini secara ringkas dalam diskusi GitHub:

Saya tidak mengerti mengapa kami tidak bisa supports() Dan media(), tetapi kueri ukuran dapat menyebabkan perulangan tata letak yang bahkan sulit/tidak mungkin dideteksi. (Inilah mengapa kita memerlukan batasan ukuran CQ saat ini.

“Tidak bisakah kita melakukan ini? [X] metode? “

Ketika kita melihat sintaksnya sebelumnya, Anda mungkin telah memperhatikan if() Sama pentingnya dengan properti khusus dan pernyataan kondisional. Beberapa solusi telah muncul selama bertahun-tahun untuk meniru hasil yang kami peroleh if() Kami dapat menetapkan nilai properti khusus secara kondisional, termasuk:

• Gunakan properti khusus sebagai boolean untuk menerapkan gaya atau tidak bergantung pada apakah itu sama dengan 0 atau 1. (Anna punya artikel bagus tentang ini.)
• Menggunakan properti khusus placeholder dengan nilai nol yang disetel saat menyetel properti khusus lainnya adalah apa yang Chris gambarkan sebagai “trik peralihan properti khusus”.
• Kueri gaya kontainer! Masalahnya (selain kurangnya implementasi) adalah bahwa container hanya menerapkan gaya pada turunannya, yaitu mereka tidak dapat menerapkan gaya pada dirinya sendiri, hanya pada kontennya, ketika memenuhi kondisi tertentu.

Lea mengeksplorasi hal ini secara mendalam di artikel lain berjudul “Persyaratan sebaris di CSS, sekarang?” Ini termasuk tabel yang menguraikan dan membandingkan metode, yang akan saya tempelkan di bawah. Penjelasan ini penuh dengan para kutu buku CSS yang rumit, tetapi sangat membantu untuk memahami kebutuhan CSS. if() Dan perbandingannya dengan “trik” cerdas yang telah kami gunakan selama bertahun-tahun.

Selamat ulang tahun, Lea!

Terlambat dua minggu, tapi terima kasih telah berbagi hasil hari besar Anda dengan kami! 🎂

mengacu pada

Untuk berbagi tautan — Tautan permanen pada Trik CSS

Kondisi “Jika” CSS Dapatkan Inline awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.