Kumpulan Kerja CSS memutuskan untuk membangunkan pernyataan bersyarat sejajar, yang mencetuskan perbincangan yang dipanaskan di bahagian komen. Sesetengah pemaju teruja dengan ini, sementara yang lain bimbang bahawa ini akan menjadikan masa depan CSS tidak pasti. Adakah slaid ini menjadi situasi neraka yang penuh dengan pemaju yang menyalahgunakan CSS, yang melaksanakan terlalu banyak logik di mana ia harus menjadi bahasa gaya? Tidak akan. Walaupun sesetengah orang berbuat demikian, tiada blog arus perdana menyiarkan karut orang gila hipotetikal yang menambah logik gila kepada CSS untuk tujuan mereka sendiri. Oleh itu, kita tahu bahawa masa depan CSS adalah selamat.

akhir dunia? Sudah lama dahulu

Hujah -hujah dalam artikel ini selanjutnya mengesahkan bahawa pernyataan bersyarat sebaris mungkin tidak menjadi penghujung penghujung tamadun: Saya fikir kita kini boleh menggunakan pertanyaan gaya untuk mencapai fungsi yang sama, yang mendapat sokongan penyemak imbas yang cukup baik.

Cadangan Lea lebih seperti gula sintaks, kadang -kadang mudah dan membolehkan markup yang lebih bersih. Sebarang kenyataan panik mengenai penyataan bersyarat sebaris yang merosakkan CSS bersamaan dengan membesar -besarkan penambahan pengendali ternary ke bahasa yang sudah menyokong jika kenyataan.

Malah, Lea berkata mengenai sintaks yang dicadangkannya: "Sama seperti pengendali ternary di JS, ia juga mungkin lebih ergonomik untuk situasi di mana hanya sebahagian kecil daripada perubahan nilai." Bukannya pernyataan bersyarat dalam CSS dilarang, tetapi CSS tidak selalu baik mengendalikannya.

Saya mahukan oompa loompa bersyarat!

begitu juga. Terdapat banyak lagi, seperti yang dibuktikan oleh senarai teratur Lea yang teratur dari helah kompleks yang menakjubkan, orang telah menemui cara untuk mensimulasikan penyata bersyarat sebaris menggunakan CSS semasa. Sesetengah petua ini sangat rumit sehingga saya masih tidak pasti jika saya faham mereka, tetapi nama mereka benar -benar keren. Lea membuat kesimpulan: "Jika anda tahu apa -apa teknik lain, sila beritahu saya supaya saya dapat menambahnya."

hmm ... Saya pasti terlepas beberapa soalan mengenai petua ini untuk diselesaikan. Saya perhatikan bahawa Lea mempunyai PhD dan saya seorang bodoh. Jadi saya tatal ke atas dan membaca semula, tetapi saya tidak boleh berhenti berfikir:

Adakah orang -orang ini cuba mengelak daripada menambah Divs tambahan di sekitar bahagian mereka dan menggunakan pertanyaan gaya?

Adalah adil jika orang ingin mengelakkan unsur -unsur yang tidak perlu di DOM, tetapi senarai tips Lea menunjukkan bahawa alternatifnya sangat kompleks, jadi ia patut mencuba seberapa jauh pertanyaan gaya dengan membungkus Divs dapat membawa kita.

Contoh yang meyakinkan

Contoh Lea Lea berkisar sekitar menetapkan harta "variasi" pada kotak prompt dan menunjukkan bahawa kita hampir dapat melaksanakan apa yang dia inginkan dengan pertanyaan gaya, tetapi sintaks dari asumsi ini malangnya tidak sah

:

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

Dia mahu gaya bekas itu sendiri dan unsur -unsur anaknya mengikut -variant. Sekarang, dalam contoh konkrit ini, saya boleh menggunakan Z-indeks untuk mengubah suai :: Selepas Pseudo-Element untuk mencipta ilusi bahawa ia adalah bekas. Kemudian saya boleh menetapkan sempadan dan latar belakangnya. Malangnya, penyelesaian ini adalah rapuh seperti yang saya lakukan, dalam contoh lain ini, Lea mahu menetapkan aliran flex kontena berdasarkan varian. Penyelesaian elemen pseudo saya tidak cukup baik dalam kes ini.

ingat, cadangan Lea dimasukkan ke dalam norma CSS, sama seperti hadiah ulang tahun yang diberikan oleh alam semesta, jadi tidak adil untuk cuba menggantikan hadiahnya dengan bekas -bekas palsu yang saya beli di temu. Dia layak mendapat bekas yang sebenar.

mari kita cuba lagi.

menggunakan pembalut

Comment Cadangan LEA menyebut jenis pengisaran, tetapi menyebutnya "cara yang sangat (saya katakan sekali lagi) kompleks tetapi berkesan" untuk menyelesaikan masalah yang disatukan oleh penyataan bersyarat yang dirancang untuk diselesaikan. Ini tidak adil. Jenis pengisaran membawa saya sedikit masa untuk memahami, tetapi saya fikir ia lebih mudah difahami daripada petua lain dan mempunyai kelemahan yang lebih sedikit. Walau bagaimanapun, kod jenis ini dalam pengeluaran boleh membosankan apabila anda melihat contoh -contohnya. Oleh itu, mari kita gigih gigi dan cuba membina versi alternatif varian Flexbox Lea. Versi saya tidak menggunakan jenis pengisaran atau apa-apa cara, tetapi menggunakan pertanyaan gaya "kuno" (tidak begitu lama) serta membungkus Div untuk menyelesaikan masalah yang kita tidak boleh gaya bekas itu sendiri menggunakan pertanyaan gaya.

jenis perbandingan pembungkusan pengisaran

Bandingkan contoh Lea dengan versi kod saya untuk membantu kita memahami perbezaan kerumitan.

Berikut adalah dua versi CSS:

Berikut adalah dua versi tag:

Oleh itu, CSS yang lebih mudah dan sedikit lebih banyak markup. Mungkin kita dapati arahnya.

Sebab saya suka pertanyaan gaya adalah cadangan Lea menggunakan fungsi gaya (), jadi jika cadangannya diterima pakai oleh penyemak imbas, nampaknya layak untuk memindahkan pertanyaan gaya ke pernyataan bersyarat secara inline dan mengeluarkan pembalut. Jika saya tidak menyebut bahawa memindahkan kod jenis ini mungkin merupakan kes penggunaan yang berdaya maju untuk AI, jawatan ini bukan artikel 2025. Mungkin AI tidak akan menjadi buruk apabila kita mendapat kenyataan bersyarat.

Tetapi kami sedikit topik. Pernahkah anda cuba mengadopsi beberapa kerangka JavaScript yang sejuk yang kelihatan elegan dalam contoh yang perlu dilakukan? Jika apa -apa, anda akan tahu bahawa penyelesaian yang kelihatan menarik dalam contoh mudah boleh mencabar kehendak anda untuk bertahan dalam contoh sebenar. Oleh itu mari kita lihat seberapa berkesan ia berfungsi dengan pertanyaan gaya dalam contoh yang lebih realistik.

Mencari pengesahan

Gabungkan contoh saya di atas dengan contoh MDN mengenai pengesahan HTML5 dan demonstrasi sejuk Seth Jeffery untuk mengubah ikon CSS tulen, dan kemudian taipkan semuanya ke dalam mesin "bagaimana jika" untuk demonstrasi berikut.

Jika anda membuat borang yang sah, semua perubahan yang dibuat ke kotak prompt adalah berdasarkan harta tersuai. Harta ini tidak pernah digunakan secara langsung dalam nilai harta CSS kotak prompt, tetapi ia mengawal pertanyaan gaya yang menetapkan warna sempadan, ikon, warna latar belakang, dan kandungan kotak prompt. Kami menetapkan harta-variant di peringkat .callout-wrapper. Saya menetapkannya menggunakan CSS seperti berikut:

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

Walau bagaimanapun, pembolehubah ini boleh ditetapkan dengan gaya inline dalam JavaScript atau HTML, seperti contoh Lea. Pengesahan bentuk adalah cara saya untuk menjadikan demo lebih interaktif untuk menunjukkan kotak prompt yang boleh diubah secara dinamik berdasarkan -variant.

Ringkasan

Saya menulis artikel terhadap teknik membongkok CSS kepada kehendak kita, yang tidak sesuai dengan gaya saya, dan saya benar -benar memihak kepada bahasa "penipuan" untuk melakukan apa yang kita mahu lakukan. Walau bagaimanapun, menggunakan pembalut dan pertanyaan gaya mungkin merupakan cara paling mudah untuk mendapatkan sokongan untuk penyataan bersyarat sebaris. Jika kita ingin berasa lebih seperti hidup di masa depan, kita boleh menggunakan pendekatan di atas sebagai asas untuk polyfills penyata bersyarat sebaris atau menggunakan sihir preprocessor seperti plugin Parcel atau Plugin Postcss - tetapi untuk kompromi ini, jari pencetus saya akan sentiasa mengidamkan kunci padam. Lea mengakui, "Jika anda boleh melakukan sesuatu dengan pertanyaan gaya, gunakan pertanyaan gaya sebanyak yang anda suka - mereka hampir pasti penyelesaian yang lebih baik."

Melalui eksperimen dalam artikel ini, saya telah meyakinkan diri saya bahawa pertanyaan gaya masih merupakan pilihan yang baik walaupun dalam kes Lea - tetapi saya masih menantikan pernyataan bersyarat sebaris. Sementara itu, pertanyaan gaya lebih mudah difahami sekurang -kurangnya dibandingkan dengan penyelesaian lain yang diketahui. Ironinya, saya bersetuju dengan komen yang mempersoalkan keperluan penyataan bersyarat sebaris, bukan kerana ia akan merosakkan CSS, tetapi kerana saya percaya kita kini boleh melaksanakan LEA dengan CSS moden, tanpa sebarang helah. Oleh itu, kita mungkin tidak memerlukan penyataan bersyarat dalam talian, tetapi mereka membenarkan kita menulis lebih banyak kod yang boleh dibaca dan lebih ringkas. Jika anda boleh memikirkan beberapa contoh halangan kerumitan yang boleh anda hadapi menggunakan pertanyaan gaya dan bukannya pernyataan bersyarat sebaris, sila beritahu saya di bahagian komen.

Atas ialah kandungan terperinci What If Machine: Membawa Masa Depan 'Iffy' CSS ke masa kini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!