Rumah > hujung hadapan web > tutorial css > CSS Moden dalam Ciri Teratas Mengubah Reka Bentuk Web

CSS Moden dalam Ciri Teratas Mengubah Reka Bentuk Web

Mary-Kate Olsen
Lepaskan: 2024-12-28 07:11:39
asal
541 orang telah melayarinya

Modern CSS in Top Features Transforming Web Design

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;
  }
}
Salin selepas log masuk
Salin selepas log masuk

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;
  }
}
Salin selepas log masuk
Salin selepas log masuk

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;
}
Salin selepas log masuk

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);
}
Salin selepas log masuk

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);
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
  }
}
Salin selepas log masuk

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;
  }
}
Salin selepas log masuk
Salin selepas log masuk

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;
  }
}
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan