CSS akan menjadi babi liar yang diharapkan, saya memberitahu ya apa

Menyaksikan evolusi CSS, kita nampaknya berada dalam salah satu tempoh inovasi yang paling menarik dalam sejarah CSS. Ia benar -benar menarik apabila semua pelayar menyokong Flexbox dan kemudian grid lagi tidak lama lagi. Mereka benar -benar mengubah CSS, menjadikannya tidak lagi menjadi koleksi helah yang canggung, tetapi sesuatu yang lebih munasabah dan lebih sesuai dengan trend masa.

Perasaan ini semakin kuat dan lebih kuat. Baru -baru ini, perkara -perkara berikut telah berlaku.

⚠️? ? ⚠️

Bersarang asli

Sarang asli telah menjadi draf kerja awam yang pertama, yang bermaksud ia lebih dekat dari sebelumnya menjadi kenyataan. Ramai orang menggunakan preprocessors hanya untuk kemudahan bersarang, yang sepatutnya membantu mereka yang ingin memudahkan alat bangunan untuk mengelakkannya.

Saya sangat suka bagaimana peraturan bersyarat bersyarat.

 <code>.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { } }</code>

Saya pernah mendengar khabar angin mengenai penyelesaian yang berdaya maju ini, yang mengelakkan keperluan untuk & pada pemilih mudah dan juga mengelakkan sepenuhnya @Nest.

 <code>.card {{ .title { } .body { } body.dark & { } }}</code>

Pertanyaan kontena

Pertanyaan kontena pada masa ini hanya draf editor (modul pembendungan CSS tahap 3), tetapi ia telah dilaksanakan dalam Chrome (perlu membolehkan bendera). Mereka membuat banyak akal kerana mereka membenarkan kita membuat keputusan gaya berdasarkan saiz bekas itu sendiri, yang merupakan idea yang sangat baik dalam dunia yang didorong komponen hari ini.

• Miriam Suzanne: Cadangan & Penjelasan Pertanyaan Container
• Stephanie Eckles: Bermula dengan pertanyaan kontena CSS
• Geoff Graham: Koleksi pertanyaan kontena
• Una Kravets: CSS Generasi Seterusnya: @Container

Semak kod untuk tapak contoh mudah (mungkin kelihatan pelik jika anda tidak mempunyai bendera yang diaktifkan di Chrome).

 <code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card { display: flex; } @container (max-width: 500px) { /* 必须设置子元素的样式，而不是容器*/ .card { flex-direction: column; } }</code>

Unit kontena

Unit kontena juga mempunyai spesifikasi draf yang bagi saya hampir menggandakan kepraktisan pertanyaan kontena. Ideanya ialah anda mempunyai unit berdasarkan saiz kontena (lebar, ketinggian, atau "saiz inline"/"saiz blok"). Saya fikir unit Qi adalah yang paling berguna.

Mudah-mudahan tidak lama lagi, kami akan menulis CSS seluruh kontena yang gaya berdasarkan saiz kita sendiri dan boleh lulus saiz untuk digunakan oleh sifat dalaman yang lain. Harta saiz fon adalah contoh praktikal yang mudah (fon berdasarkan saiz skala kontena), tetapi saya percaya unit kontena akan digunakan untuk pelbagai tujuan, seperti jurang, padding, dan banyak tujuan lain.

 <code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card h2 { font-size: 1.5rem; /* 备用*/ } @container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem 2qi, 56px) } }</code>

Lapisan Cascade

Lapisan cascade (dalam spesifikasi draf kerja) memperkenalkan paradigma yang benar -benar baru untuk menentukan pemenang pemilih CSS di Cascade. Pada masa ini, ia adalah persaingan khusus. Pemilih dengan kekhususan tertinggi menang, hanya gaya sebaris dan peraturan khusus dengan klausa penting! Tetapi dengan lapisan, mana -mana pemilih yang sepadan pada lapisan yang lebih tinggi akan menang.

• Miriam Suzanne: Contoh ringkas/demo dan dokumentasi penjelasan.
• Bramus Van Damme: Masa Depan CSS: Lapisan Cascade (CSS@Layer)

 <code>@layer base; @layer theme; @layer utilities; /* 没有层的重置样式（超低）*/ * { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); } } @layer base { /* 大多数样式？*/ } @layer utilities { .no-margin { margin: 0; } }</code>

@When

CSS When/Esy Rule yang dicadangkan oleh tab Atkins diterima, ia adalah cara untuk menyatakan @media dan @supports pertanyaan, dan anda boleh menyatakan keadaan lain dengan lebih mudah. Walaupun pertanyaan media sudah mempunyai beberapa keupayaan logik, menyatakan pertanyaan yang saling eksklusif telah lama sukar, yang menjadikannya sangat mudah.

 <code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>

Skop

Idea gaya skop (yang merupakan editor draf) adalah bahawa ia menyediakan sintaks untuk menulis gaya yang hanya digunakan untuk blok pemilih dan dalaman, tetapi juga mempunyai keupayaan untuk menghentikan skop, dengan itu mewujudkan gelung skop.

Perkara kegemaran saya ialah perkara intensiti "jarak". Miriam menerangkan cara ini:

 <code>.light-theme a { color: purple; } .dark-theme a { color: plum; }</code>

<code><div>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Plum</a>

  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Mungkin itu plum? ? ?</a>
  </div>
</div></code>

Betul? ! Tidak ada cara yang baik untuk menyatakan sejauh mana anda mahu pautan itu menang dengan .light-Theme. Pada masa ini, kekhususan kedua -dua topik adalah sama, tetapi .dark -tema berada di belakang - jadi ia menang. Semoga gaya skop dapat menyelesaikan masalah ini juga.

 <code>@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

 <code>/* 邻近性帮助！*/ @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color: plum; } }</code>

Anda kini tidak dapat menggunakan apa -apa dari senarai ini di laman web pengeluaran anda. Selepas bertahun -tahun cuba mengikuti perkara seperti ini, saya masih tidak tahu bagaimana ini berakhir. Saya fikir spesifikasi perlu diselesaikan terlebih dahulu dan dipersetujui. Penyemak imbas kemudian memilihnya, dengan harapan lebih daripada satu. Saya fikir apabila mereka memilikinya, spesifikasi boleh dimuktamadkan?

Saya tidak mempunyai idea. Mungkin sebahagian daripada mereka akan hilang. Mungkin sesetengah daripada mereka akan berlaku dengan cepat, sementara yang lain akan sangat perlahan. Mungkin, sesetengah daripada mereka akan muncul dalam beberapa pelayar, dan bukan pada orang lain. Hei, sekurang -kurangnya kita mempunyai pelayar hijau sekarang, jadi apabila keadaan berlaku, ia berlaku dengan cepat. Saya rasa kita kini berada di peringkat di mana kebanyakan ciri CSS terbesar dan terbaik disokong oleh semua pelayar, tetapi dengan semua ini datang, kita akan berada dalam fasa sokongan yang lebih berpecah untuk teknologi terkini.

Atas ialah kandungan terperinci CSS akan menjadi babi liar yang diharapkan, saya memberitahu ya apa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!