CSS Moden dalam Ciri Teratas Mengubah Reka Bentuk Web

pengenalan

CSS telah berkembang pesat selama bertahun-tahun, dan 2024 memperkenalkan ciri yang meningkatkan secara mendadak cara kami membina aplikasi web moden. Kemajuan ini menjadikan CSS lebih berkuasa, fleksibel dan boleh diakses, memberikan pembangun alat yang mereka perlukan untuk mencipta pengalaman web yang cantik dan berprestasi. Dalam artikel ini, kami meneroka 10 ciri CSS paling berkesan yang perlu diketahui oleh setiap pembangun.

---

1. Pertanyaan Bekas

Pertanyaan Bekas membenarkan pembangun menggayakan elemen berdasarkan saiz bekas induknya dan bukannya port pandangan. Ini ialah penukar permainan untuk mencipta komponen modular dan boleh guna semula yang menyesuaikan dengan lancar dengan persekitaran mereka.

Contoh:

.container {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .child {
    flex-direction: row;
  }
}

---

2. CSS Nesting

CSS Nesting memudahkan organisasi kod dengan membenarkan penstrukturan hierarki gaya, mengurangkan lebihan dan meningkatkan kebolehbacaan. Ia amat berguna dalam pembangunan berasaskan komponen.

Contoh:

.card {
  color: black;

  &-header {
    font-size: 1.5rem;
  }

  &-body {
    padding: 1rem;
  }
}

---

3. :mempunyai() Pemilih

Kelas pseudo :has() membolehkan memilih elemen induk berdasarkan elemen anak mereka, menghapuskan keperluan untuk JavaScript untuk tugasan ini.

Contoh:

form:has(input:invalid) {
  border-color: red;
}

---

4. Animasi Dipacu Tatal

Animasi dipacu tatal menghidupkan tapak web dengan mencipta kesan yang dicetuskan oleh penatalan pengguna, menawarkan tahap interaktiviti baharu.

Contoh:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scroll-element {
  animation: fadeIn 1s scroll-timeline(scroll);
}

---

5. Penambahbaikan Pembolehubah CSS

Peraturan @property meningkatkan pembolehubah CSS dengan memperkenalkan pemeriksaan jenis, lalai dan warisan. Peningkatan ini menjadikan sifat tersuai lebih dipercayai dan berkuasa.

Contoh:

@property --main-color {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}

button {
  color: var(--main-color);
}
</color>

---

6. Subgrid

Ciri Subgrid membolehkan elemen grid kanak-kanak diselaraskan dengan trek grid induknya, membolehkan reka letak yang lebih kompleks dan padat.

Contoh:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.item {
  display: subgrid;
  grid-column: span 2;
}

---

7. Fon Boleh Ubah

Fon boleh ubah menggabungkan berbilang gaya fon ke dalam satu fail, menawarkan fleksibiliti reka bentuk sambil meningkatkan prestasi pemuatan halaman.

Contoh:

h1 {
  font-variation-settings: 'wght' 700, 'ital' 1;
}

---

8. Lapisan Lata

Lapisan Lata (@lapisan) memberi pembangun kawalan ke atas lata CSS dengan menentukan lapisan untuk gaya, mengurangkan perang kekhususan.

Contoh:

@layer base {
  body {
    font-family: Arial, sans-serif;
  }
}

@layer theme {
  body {
    color: darkblue;
  }
}

---

9. Fungsi Warna Baharu

CSS memperkenalkan manipulasi warna dinamik dengan fungsi seperti campuran warna(), menjadikannya lebih mudah untuk mencipta skema warna yang boleh disesuaikan.

Contoh:

.container {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .child {
    flex-direction: row;
  }
}

---

10. : Kelas Pseudo yang boleh dilihat fokus

Kelas pseudo :focus-visible meningkatkan kebolehcapaian dengan menggayakan elemen hanya apabila pengguna menavigasi melalui papan kekunci atau peranti bantuan.

Contoh:

.card {
  color: black;

  &-header {
    font-size: 1.5rem;
  }

  &-body {
    padding: 1rem;
  }
}

---

Kesimpulan

Ciri CSS moden pada tahun 2024 membentuk semula reka bentuk web, menawarkan pembangun lebih banyak alatan untuk mencipta tapak web yang responsif, boleh diakses dan menakjubkan secara visual. Dengan menerima kemajuan ini, anda boleh meningkatkan aliran kerja anda, memudahkan pangkalan kod anda dan menyampaikan pengalaman pengguna yang lebih baik.

---

Tag:

css, #frontend, #webdevelopment

Perihalan Meta:

Temui 10 ciri CSS teratas pada tahun 2024, termasuk Pertanyaan Kontena, CSS Nesting, :has(), Subgrid dan banyak lagi. Bina tapak web yang lebih pantas, lebih pintar dan lebih responsif.

---

TLDR - Sorotan untuk Skimmer:

• Pertanyaan Bekas: Elemen gaya berdasarkan saiz induk.
• Bersarang CSS: Gaya yang lebih bersih, lebih teratur.
• :has() Pemilih: Penggayaan ibu bapa berdasarkan keadaan kanak-kanak.
• Animasi Dipacu Tatal: Animasi interaktif yang dicetuskan oleh tatal.
• Peningkatan Pembolehubah CSS: Pembolehubah ditaip yang lebih kukuh dengan @property.
• Subgrid: Jajarkan grid anak dengan trek grid induk.
• Fon Boleh Ubah: Fon fleksibel dalam satu fail.
• Lapisan Lata: Urus lata dengan @lapisan.
• Fungsi Warna Baharu: Manipulasi warna dinamik dengan campuran warna().
• :fokus-kelihatan: Gaya memfokuskan kebolehaksesan untuk pengguna papan kekunci.

---

Ciri yang manakah anda paling teruja untuk mencuba? Kongsi pendapat anda dalam ulasan!

Atas ialah kandungan terperinci CSS Moden dalam Ciri Teratas Mengubah Reka Bentuk Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!