CSS baharu boleh menjadikan hidup anda lebih mudah

Tujuan panduan ini adalah untuk memperkenalkan anda kepada koleksi ciri inovatif dan berkuasa yang diperkenalkan baru-baru ini dalam CSS. Walaupun artikel ini memberikan gambaran keseluruhan sintaks dan kes penggunaan praktikal mereka, terdapat lebih banyak kedalaman untuk diterokai dengan setiap ciri. Gunakan ini sebagai titik permulaan untuk menyelam lebih dalam ke dalam kemajuan termaju ini.

1. Pertanyaan Bekas (Saiz)

Apakah Pertanyaan Bekas Berdasarkan Saiz?

Pertanyaan bekas berdasarkan saiz membolehkan anda menggunakan gaya pada elemen anak berdasarkan dimensi bekas induknya, dan bukannya bergantung pada keseluruhan saiz port pandangan, seperti pertanyaan media tradisional.

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

Mengapa Ini Penting?

Ini menghidupkan konsep "campuran CSS". Sama seperti campuran Sass meningkatkan kebolehselenggaraan, pertanyaan kontena berasaskan gaya memanjangkan keupayaan asli CSS, dengan mengambil kira lata dan membolehkan lebih fleksibiliti.

Sokongan Pelayar:

• Disokong: Chrome dan derivatif.

• Akan Datang: Safari.

• Tidak Disokong: Firefox.

• Penambahbaikan: Terhad.

• Polyfill: Tidak tersedia.

3. Unit Bekas

Apakah Unit Bekas?

Unit bekas ialah unit ukuran responsif (cth., cqw, cqh, cqmin, cqmax) yang mengira dimensi berdasarkan saiz bekas dan bukannya port pandangan. Ini berfungsi sama seperti vw (1% daripada lebar port pandangan) tetapi diskop kepada bekas.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Mengapa Ini Penting?

Jika elemen dalaman perlu menskalakan secara berkadaran dengan bekas induknya, unit kontena menyediakan penyelesaian CSS sahaja yang bersih. Kes penggunaan biasa ialah menskalakan tipografi atau jarak di dalam kad atau komponen modular.

Sokongan Pelayar:

• Sokongan Penuh: Penyemak imbas moden.

• Penambahbaikan: Ya, dengan sandaran.

• Polyfill: Tersedia.

4. :has() Pseudo-Selector

Apakah Pemilih :has()?

Kelas pseudo :has() membolehkan anda menggayakan elemen induk berdasarkan kehadiran elemen anak tertentu di dalamnya.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Mengapa Ini Penting?

Pemilih :has() berfungsi dengan berkesan sebagai "pemilih ibu bapa" dalam CSS, membolehkan anda menggayakan ibu bapa berdasarkan anak-anak mereka. Sebagai contoh, anda boleh menggunakan :has() untuk menyerlahkan medan borang induk hanya apabila mesej ralat hadir.

Sokongan Pelayar:

• Disokong: Semua penyemak imbas utama.

• Polyfill: JavaScript sahaja.

*5. Lihat Peralihan
*
Apakah Peralihan Paparan?

Ciri ini memperkenalkan dua jenis animasi:

1. Peralihan satu halaman (memerlukan JavaScript).

2. Peralihan berbilang halaman (CSS sahaja).
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*Mengapa Ini Penting?
*
Peralihan meningkatkan pengalaman pengguna dengan menghidupkan elemen semasa perubahan keadaan, menjadikan interaksi terasa lebih lancar. Mereka menggunakan "tweening", di mana animasi interpolasi antara keadaan permulaan dan tamat tanpa mentakrifkan setiap langkah secara manual.

Sokongan Pelayar:

• Disokong: Chrome dan derivatif.

• Tidak Disokong: Safari, Firefox.

• Penambahbaikan: Ya, dengan animasi sandaran.

6. Bersarang

Apakah Itu Bersarang?

Sarang CSS membolehkan anda menulis pemilih anak di dalam peraturan induk mereka, menjadikan kod lebih bersih dan lebih boleh diselenggara.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

Mengapa Ini Penting?

Bersarang mengurangkan lebihan dalam CSS, mengumpulkan gaya berkaitan bersama-sama. Walau bagaimanapun, penggunaan berlebihan boleh menyebabkan pemilih yang terlalu spesifik dan mengurangkan kebolehgunaan semula.

Sokongan Pelayar:

• Sokongan Penuh: Penyemak imbas moden.

7. Animasi Dipacu Tatal

Apakah Animasi Dipacu Tatal?

Animasi ini terikat pada penatalan dan boleh dilaksanakan menggunakan CSS tanpa bergantung pada JavaScript.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Mengapa Ini Penting?

Daripada penunjuk kemajuan kepada kesan paralaks, animasi dipacu tatal meningkatkan interaktiviti dan mengurangkan pergantungan pada JavaScript untuk tugas kritikal prestasi.

Sokongan Pelayar:

• Disokong: Chrome.

• Akan Datang: Firefox.

8. Subgrid

Apakah Subgrid?

Nilai subgrid membolehkan item grid kanak-kanak diselaraskan dengan baris atau lajur grid induknya tanpa menduplikasi definisi grid.

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

Mengapa Ini Penting?

Subgrid memastikan penjajaran yang konsisten merentas struktur grid bersarang, menjadikan reka letak yang kompleks lebih mudah diselenggara.

Sokongan Pelayar:

• Sokongan Penuh: Semua penyemak imbas moden.

Pemikiran Akhir

CSS terus berkembang pada kadar yang menarik. Dengan ciri seperti pertanyaan kontena, peralihan paparan dan subgrid, bahasa menjadi lebih mantap dan intuitif untuk pembangunan web moden. Pantau perkembangan masa hadapan, termasuk sintaks warna relatif, CSS berskop dan elemen HTML baharu seperti , yang menjanjikan kemungkinan reka bentuk yang lebih besar.