Apa yang baru sejak CSS3 pada tahun 2015?

Kesan CSS3 tidak dapat dinafikan. Kekayaan ciri -ciri, animasi, sudut bulat, bayang -bayang kotak, perubahan pembangunan CSS yang berubah -ubah. Penerimaan CSS3 (dan moniker "HTML5" yang berkaitan membawa kepada banjir sumber pembelajaran. Walau bagaimanapun, ramai pemaju tidak mengemas kini kemahiran CSS mereka sejak itu. Artikel ini menjembatani jurang itu.

"CSS moden Scott Vandehey secara ringkas" menyoroti lengkung pembelajaran ini. Beliau mencatatkan keperluan yang semakin berkurangan untuk preprocessors (termasuk autoprefixer dan polyfills untuk ciri-ciri masa depan) dan kaitan konteks CSS-in-JS (terutamanya berguna dalam projek JavaScript-berat). Beliau menekankan pentingnya menguasai sifat tersuai, flexbox, dan grid.

Membina ini, mari kita meneroka kemajuan CSS utama sejak kira -kira 2015:

Peningkatan Post-CSS3

Revolusi Layout: Flexbox dan Grid

Flexbox dan grid adalah asas kepada CSS moden. Kuasa Grid dikuatkan oleh susun atur subgrid dan batu (walaupun kebolehpercayaan silang melayari masih berkembang).

 .card {
  paparan: grid;
  Grid-template-lajur: 150px 1FR;
  Gap: 1rem;
}
.card .nav {
  Paparan: Flex;
  Jurang: 0.5rem;
}

CSS Custom Properties: Token Reka Bentuk dan Teming

Sifat tersuai adalah penting untuk menguruskan token reka bentuk, memastikan konsistensi dan memudahkan penyelenggaraan. Pelaksanaan mod gelap adalah contoh utama. Seluruh tapak boleh digayakan terutamanya menggunakan sifat tersuai, melengkapkan kerangka seperti CSS Tailwind (pendekatan yang popular, walaupun memecah belah).

 html {
  --bgColor: #70f1d9;
  -Font-saiz-asas: pengapit (1.833rem, 2vw 1rem, 3rem);
  --Font-Size-LRG: Clamp (1.375REM, 2VW 1REM, 2.25REM);
}

html.dark {
  --BGColor: #2D283E;
}

Pertanyaan Keutamaan: Reka Bentuk User-Centric

Pertanyaan keutamaan, memperluaskan pertanyaan media tradisional, mengesan keutamaan pengguna (misalnya, prefers-reduced-motion , prefers-color-scheme ). Ini membolehkan pengalaman pengguna yang lebih mudah diakses dan diperibadikan.

 @media (lebih suka-dikurangkan-gerakan: mengurangkan) {
  * {
    Animasi-Pemulihan: 0.001s! Penting;
  }
}

@media (lebih suka-warna-skema: gelap) {
  : root {
    --BG: #222;
  }
}

Sintaks warna yang dipertingkatkan dan ruang warna baru

Sintaks warna telah berkembang untuk memasukkan nilai alfa secara langsung dalam fungsi (contohnya, rgb(0 0 255 / 0.5) ). Ruang Warna Baru color() , lab() , lch() , hwb() -membuat keupayaan perwakilan warna yang diperluaskan.

 .block {
  Latar Belakang: HSL (0 33% 53% / 0.5);
  Latar Belakang: RGB (255 0 0);
  Latar Belakang: Warna (Display-P3 0.9176 0.2003 0.1386);
  Latar Belakang: Lab (52.2345% 40.1645 59.9971 / .5);
  Latar Belakang: HWB (194 0% 0% / .5);
}

Fon berubah -ubah: Tipografi yang dipertingkatkan

Fon berubah menawarkan penambahbaikan prestasi dan fleksibiliti reka bentuk berbanding dengan fon web tradisional. Walaupun fon warna wujud, mereka tidak mendapat penggunaan yang meluas.

 badan {
  font-keluarga: 'rekursif', sans-serif;
  Font-Weight: 950;
  Penyesuaian fon-variasi: 'mono' 1, 'casl' 1;
}

Integrasi SVG melalui laluan, keratan, dan pelekat

CSS kini mengintegrasikan dengan lancar dengan SVG, yang membolehkan kliping berasaskan bentuk ( clip-path ), Masking ( mask ), Animasi Berasaskan Laluan ( offset-path ), dan Manipulasi Laluan ( d atribut).

 .cut-out {
  Clip-Path: Polygon (25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Penapis CSS: Manipulasi Imej dan Elemen

Penapis CSS menyediakan keupayaan manipulasi imej yang luas ( filter ), pengadunan latar belakang ( background-blend-mode ), penapisan latar belakang ( backdrop-filter ), dan pengadunan elemen ( mix-blend-mode ).

 .disable {
  Penapis: Blur (1px) Grayscale (1);
}

Houdini: Memperluas CSS dengan JavaScript

Houdini menawarkan sambungan CSS berkuasa JavaScript, termasuk API Cat, Properties & Values ​​API, API susun atur, dan API animasi. Walaupun sokongan penyemak imbas berbeza -beza, modulariti dan kemudahan penggunaannya menjanjikan.

 import "https://unpkg.com/extra.css/confetti.js";

Gaya Shadow Dom dan Komponen Web

Shadow Dom Impak Komponen Web Styling, yang memerlukan pemahaman tentang teknik gaya luaran.

 komponen saya {
  --BG: LightGreen;
}

Masa depan CSS

Semasa menangkap ciri -ciri semasa adalah penting, beberapa kemajuan yang menjanjikan berada di cakrawala: pertanyaan kontena, unit kontena, transformasi bebas, bersarang, lapisan cascade, unit viewport yang lebih baik, :has() pemilih, dan garis masa tatal.

Gambaran keseluruhan ini memberikan kemas kini yang komprehensif mengenai kemajuan CSS sejak ERA CSS3, melengkapkan pemaju dengan pengetahuan untuk membina laman web moden, cekap, dan mesra pengguna.

Atas ialah kandungan terperinci Apa yang baru sejak CSS3 pada tahun 2015?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!