Halaman ini diterjemahkan oleh Cloud Translation API.

Status CSS 2022

Fitur gaya visual web saat ini dan masa depan, seperti yang terlihat di Google IO 2022, serta beberapa tambahan.

Adam Argyle

Tahun 2022 akan menjadi salah satu tahun terbaik CSS, baik dalam fitur maupun rilis fitur browser kolaboratif, dengan sasaran kolaboratif untuk menerapkan 14 fitur.

Ringkasan

Postingan ini adalah bentuk artikel dari presentasi yang diberikan di Google IO 2022. Konten ini tidak dimaksudkan sebagai panduan mendalam tentang setiap fitur, melainkan pengantar dan ringkasan singkat untuk menarik minat Anda, dengan memberikan kelengkapan, bukan detail. Jika Anda tertarik, periksa akhir bagian untuk melihat link referensi ke informasi selengkapnya.

Daftar isi

Gunakan daftar di bawah untuk membuka topik yang Anda minati:

Baru di tahun 2022	2022 dan seterusnya
Kompatibilitas Browser 2022	@scope
@layer	@nest
subgrid	@media (prefers-reduced-data)
@container	@custom-media
hwb()	Rentang kueri media
lch, oklch, lab, oklab, display-p3, dll.	@property
color-mix()	scroll-start
color-contrast()	:snap-target
Sintaksis warna relatif	snapChanging() dan snapChanged()
Ruang warna gradien	toggle()
accent-color	anchor()
inert	<selectmenu>
Font warna v1
Varian unit area pandang
:has()

Kompatibilitas browser

Alasan utama begitu banyak fitur CSS yang ditetapkan untuk dirilis secara kooperatif adalah karena upaya Interop 2022. Sebelum mempelajari upaya Interop, penting untuk melihat upaya Compat 2021.

Compat 2021

Sasaran untuk tahun 2021, yang didorong oleh masukan developer melalui survei, adalah menstabilkan fitur saat ini, meningkatkan rangkaian pengujian, dan meningkatkan skor kelulusan browser untuk lima fitur:

Pemosisi sticky
Pengaturan ukuran aspect-ratio
Tata letak flex
Tata letak grid
Animasi dan posisi transform

Skor pengujian meningkat secara menyeluruh, yang menunjukkan peningkatan stabilitas dan keandalan. Selamat kepada tim yang telah berpartisipasi.

Interop 2022

Tahun ini, browser berkumpul untuk mendiskusikan fitur dan prioritas yang ingin mereka kerjakan, sehingga menyatukan upaya mereka. Mereka berencana untuk menghadirkan fitur web berikut bagi developer:

@layer
Ruang warna dan fungsi
Pembatasan
<dialog>
Kompatibilitas formulir
Scroll
Subkisi
Tipografi
Unit area pandang
Kompatibilitas web

Ini adalah daftar yang menarik dan ambisius yang tidak sabar saya lihat.

Baru untuk 2022

Tidak mengherankan, status CSS 2022 secara signifikan terpengaruh oleh pekerjaan Interop 2022.

Lapisan bersusun

Dukungan Browser

Sumber

Sebelum @layer, urutan stylesheet yang dimuat yang ditemukan sangat penting, karena gaya yang dimuat terakhir dapat menimpa gaya yang dimuat sebelumnya. Hal ini menyebabkan lembar gaya entri yang dikelola dengan cermat, tempat developer perlu memuat gaya yang kurang penting terlebih dahulu dan gaya yang lebih penting nanti. Ada seluruh metodologi untuk membantu developer mengelola hal ini, seperti ITCSS.

Dengan @layer, file entri dapat menentukan lapisan dan urutannya terlebih dahulu. Kemudian, saat gaya dimuat, dimuat, atau ditentukan, gaya tersebut dapat ditempatkan dalam lapisan, sehingga memungkinkan pelestarian gaya mengganti kepentingan, tetapi tanpa orkestrasi pemuatan yang dikelola dengan cermat.

Video ini menunjukkan bagaimana lapisan cascade yang ditentukan memungkinkan proses penulisan dan pemuatan yang lebih bebas dan bebas gaya, sekaligus tetap mempertahankan cascade sesuai kebutuhan.

Chrome DevTools berguna untuk memvisualisasikan gaya mana yang berasal dari lapisan mana:

Screenshot sidebar Gaya di Chrome Devtools, yang menyoroti cara gaya muncul dalam grup Lapisan baru.

Resource

Subkisi

Dukungan Browser

Sumber

Sebelum subgrid, petak di dalam petak lain tidak dapat disejajarkan dengan sel atau garis petak induknya. Setiap tata letak petak bersifat unik. Banyak desainer menempatkan satu petak di seluruh desain mereka dan terus menyelaraskan item di dalamnya, yang tidak dapat dilakukan di CSS.

Setelah subgrid, turunan petak dapat mengadopsi kolom atau baris induknya sebagai kolom atau barisnya sendiri, dan menyelaraskan dirinya atau turunannya dengan kolom atau baris induknya.

Dalam demo berikut, elemen isi membuat petak klasik dari tiga kolom: kolom tengah disebut main, dan kolom kiri dan kanan menamai baris fullbleed. Kemudian, setiap elemen dalam isi, <nav> dan <main>, mengadopsi baris bernama dari isi dengan menetapkan grid-template-columns: subgrid.

body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

Terakhir, turunan <nav> atau <main> dapat menyelaraskan atau menyesuaikan ukurannya sendiri menggunakan kolom dan garis fullbleed dan main.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

Devtools dapat membantu Anda melihat garis dan subpetak (saat ini hanya Firefox). Pada gambar berikut, petak induk dan subpetak telah ditempatkan. Sekarang, tampilannya menyerupai cara desainer memikirkan tata letak.

Screenshot demo subpetak, menggunakan alat overlay petak Chrome DevTools untuk menampilkan garis yang ditentukan oleh CSS.

Di panel elemen devtools, Anda dapat melihat elemen mana yang merupakan petak dan subpetak, yang sangat membantu untuk men-debug atau memvalidasi tata letak.

Screenshot panel Elemen Chrome Devtools yang memberi label pada elemen yang memiliki tata letak petak atau subpetak. — Screenshot dari Firefox Devtools

Resource

Kueri penampung

Dukungan Browser

Sumber

Sebelum @container, elemen halaman web hanya dapat merespons ukuran seluruh area pandang. Ini sangat bagus untuk tata letak makro, tetapi untuk tata letak mikro, dengan penampung luarnya bukan keseluruhan area pandang, tata letak tidak mungkin menyesuaikan.

Setelah @container, elemen dapat merespons ukuran atau gaya penampung induk. Satu-satunya pengecualian adalah penampung harus mendeklarasikan dirinya sebagai kemungkinan target kueri, yang merupakan persyaratan kecil untuk manfaat besar.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

Gaya ini adalah yang membuat kolom Senin, Selasa, Rabu, Kamis, dan Jumat dalam video berikut dapat dikueri oleh elemen peristiwa.

Demo oleh Una Kravets

Berikut adalah CSS untuk membuat kueri penampung calendar-day sesuai ukurannya, lalu menyesuaikan tata letak dan ukuran font:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

Berikut adalah contoh lain: satu komponen buku menyesuaikan diri dengan ruang yang tersedia di kolom tempat komponen tersebut ditarik:

Demo oleh Max Böck

Una benar dalam menilai situasi sebagai responsif baru. Ada banyak keputusan desain yang menarik dan bermakna yang harus dibuat saat menggunakan @container.

Resource

`accent-color`

Dukungan Browser

Sumber

Sebelum accent-color, jika menginginkan formulir dengan warna yang cocok dengan brand, Anda mungkin akan mendapatkan library atau solusi CSS yang kompleks yang menjadi sulit dikelola seiring waktu. Meskipun mereka memberi Anda semua opsi, dan mudah-mudahan mencakup aksesibilitas, pilihan untuk menggunakan komponen bawaan atau mengadopsi komponen Anda sendiri menjadi melelahkan untuk terus memilih.

Setelah accent-color, satu baris CSS akan menampilkan warna merek ke komponen bawaan. Selain tint, browser dengan cerdas memilih warna kontras yang tepat untuk bagian tambahan komponen dan beradaptasi dengan skema warna sistem (terang atau gelap).

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

Elemen HTML dengan aksen terang dan gelap secara berdampingan untuk perbandingan.

Untuk mempelajari accent-color lebih lanjut, lihat postingan saya di web.dev tempat saya menjelajahi lebih banyak aspek dari properti CSS yang berguna ini.

Resource

Level warna 4 dan 5

Web telah didominasi oleh sRGB selama beberapa dekade terakhir, tetapi di dunia digital layar definisi tinggi yang terus berkembang dan perangkat seluler yang dilengkapi dengan layar OLED atau QLED, sRGB saja tidak cukup. Selain itu, halaman dinamis yang beradaptasi dengan preferensi pengguna diharapkan, dan pengelolaan warna telah menjadi perhatian yang berkembang bagi desainer, sistem desain, dan pengelola kode.

Namun, tidak pada tahun 2022—CSS memiliki sejumlah fungsi warna dan ruang baru: - Warna yang mencapai kemampuan warna HD pada layar. - Ruang warna yang cocok dengan intent, seperti keseragaman persepsi. - Ruang warna untuk gradien yang secara drastis mengubah hasil interpolasi. - Fungsi warna untuk membantu Anda mencampur dan membedakan, serta memilih ruang tempat Anda melakukan pekerjaan.

Sebelum semua fitur warna ini, sistem desain perlu melakukan prapenghitungan warna kontras yang tepat, dan memastikan palet yang cerah secara tepat, semuanya dilakukan oleh preprocessor atau JavaScript.

Setelah semua fitur warna ini, browser dan CSS dapat melakukan semua pekerjaan, secara dinamis dan tepat waktu. Alih-alih mengirim banyak KB CSS dan JavaScript kepada pengguna untuk mengaktifkan warna tema dan visualisasi data, CSS dapat melakukan orkestrasi dan penghitungan. CSS juga lebih siap untuk memeriksa dukungan sebelum penggunaan atau menangani penggantian dengan baik.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

`hwb()`

Dukungan Browser

Sumber

HWB adalah singkatan dari hue, whiteness, dan blackness. Warna ini ditampilkan sebagai cara yang mudah dipahami untuk mengartikulasikan warna, karena hanya berupa hue dan jumlah putih atau hitam untuk mencerahkan atau menggelapkan. Seniman yang mencampur warna dengan putih atau hitam mungkin akan menyukai penambahan sintaksis warna ini.

Menggunakan fungsi warna ini akan menghasilkan warna dari ruang warna sRGB, sama dengan HSL dan RGB. Dalam hal kebaruan untuk tahun 2022, hal ini tidak memberi Anda warna baru, tetapi dapat mempermudah beberapa tugas bagi penggemar sintaksis dan model mental.

Resource

Ruang warna

Cara warna direpresentasikan dilakukan dengan ruang warna. Setiap ruang warna menawarkan berbagai fitur dan kompromi untuk bekerja dengan warna. Beberapa mungkin mengelompokkan semua warna cerah; beberapa mungkin menyusunnya terlebih dahulu berdasarkan kecerahannya.

CSS 2022 akan menawarkan 10 ruang warna baru, masing-masing dengan fitur unik untuk membantu desainer dan developer dalam menampilkan, memilih, dan mencampur warna. Sebelumnya, sRGB adalah satu-satunya opsi untuk menggunakan warna, tetapi sekarang CSS membuka potensi baru dan ruang warna default baru, LCH.

`color-mix()`

Dukungan Browser

Sumber

Sebelum color-mix(), developer dan desainer memerlukan praprosesor seperti Sass untuk mencampur warna sebelum browser melihatnya. Sebagian besar fungsi pencampuran warna juga tidak menyediakan opsi untuk menentukan ruang warna yang akan digabungkan, sehingga terkadang mengakibatkan hasil yang membingungkan.

Setelah color-mix(), developer dan desainer dapat mencampur warna di browser, bersama dengan semua gaya lainnya, tanpa menjalankan proses build atau menyertakan JavaScript. Selain itu, mereka dapat menentukan ruang warna mana yang akan dicampur, atau menggunakan ruang warna campuran default LCH.

Sering kali, warna merek digunakan sebagai dasar dan varian dibuat darinya, seperti warna yang lebih terang atau lebih gelap untuk gaya pengarahan kursor. Berikut tampilannya dengan color-mix():

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

dan jika Anda ingin mencampur warna tersebut dalam ruang warna yang berbeda, seperti srgb, ubah:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

Berikut adalah demo tema menggunakan color-mix(). Coba ubah warna merek dan lihat tema diperbarui:

Nikmati perpaduan warna dalam berbagai ruang warna di stylesheet Anda pada tahun 2022.

Resource

`color-contrast()`

Dukungan Browser

Sumber

Sebelum color-contrast(), penulis stylesheet harus mengetahui warna yang dapat diakses sebelum sebelumnya. Sering kali palet akan menampilkan teks hitam atau putih pada pilihan warna, untuk menunjukkan kepada pengguna sistem warna warna teks mana yang diperlukan untuk memiliki kontras yang tepat dengan pilihan warna tersebut.

Screenshot 3 palet Material, yang menampilkan 14 warna dan warna kontras putih atau hitam yang sesuai untuk teks. — Contoh dari palet warna Desain Material 2014

Setelah color-contrast(), penulis stylesheet dapat memindahkan tugas sepenuhnya ke browser. Anda tidak hanya dapat menggunakan browser untuk memilih warna hitam atau putih secara otomatis, tetapi juga memberikan daftar warna yang sesuai sistem desain dan memintanya memilih warna pertama untuk meneruskan rasio kontras yang diinginkan.

Berikut adalah screenshot demo kumpulan palet warna HWB dengan warna teks otomatis dipilih oleh browser berdasarkan warna swatch:

Screenshot demo HWB dengan setiap palet memiliki pasangan teks terang atau gelap yang berbeda, seperti yang ditentukan oleh browser. — Coba demo

Dasar-dasar sintaksisnya terlihat seperti ini, dengan abu-abu diteruskan ke fungsi dan browser menentukan apakah hitam atau putih memiliki kontras paling tinggi:

color: color-contrast(gray);

Fungsi ini juga dapat disesuaikan dengan daftar warna, yang akan memilih warna kontras tertinggi dari pilihan:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

Terakhir, jika sebaiknya tidak memilih warna kontras tertinggi dari daftar, rasio kontras target dapat diberikan, dan warna pertama yang lulus akan dipilih:

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

Fungsi ini dapat digunakan untuk lebih dari sekadar warna teks, meskipun saya memperkirakan bahwa warna teks akan menjadi kasus penggunaan utamanya. Pikirkan betapa mudahnya untuk memberikan antarmuka yang mudah diakses dan mudah dibaca setelah pemilihan warna kontras yang tepat disertakan dalam bahasa CSS itu sendiri.

Resource

Sintaksis warna relatif

Dukungan Browser

Sumber

Sebelum sintaksis warna relatif, untuk menghitung warna dan melakukan penyesuaian, saluran warna harus ditempatkan satu per satu ke dalam properti kustom. Batasan ini juga menjadikan HSL sebagai fungsi warna utama untuk memanipulasi warna karena hue, saturasi, atau kecerahan semuanya dapat disesuaikan dengan cara yang mudah dengan calc().

Setelah sintaksis warna relatif, warna apa pun di ruang mana pun dapat didekonstruksi, diubah, dan ditampilkan sebagai warna, semuanya dalam satu baris CSS. Tidak ada lagi batasan untuk HSL—manipulasi dapat dilakukan di ruang warna apa pun yang diinginkan, dan banyak properti kustom yang tidak perlu dibuat untuk memfasilitasinya.

Dalam contoh sintaksis berikut, hex dasar disediakan dan dua warna baru dibuat relatif terhadapnya. Warna pertama --absolute-change membuat warna baru di LCH dari warna dasar, lalu melanjutkan untuk mengganti kecerahan warna dasar dengan 75%, mempertahankan kroma (c) dan hue (h). Warna kedua --relative-change membuat warna baru di LCH dari warna dasar, tetapi kali ini mengurangi kroma (c) sebesar 20%.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

Ini mirip dengan mencampur warna, tetapi lebih mirip dengan perubahan daripada pencampuran. Anda dapat memunculkan warna dari warna lain, mendapatkan akses ke tiga nilai saluran seperti yang dinamai oleh fungsi warna yang digunakan, dengan peluang untuk menyesuaikan saluran tersebut. Secara keseluruhan, ini adalah sintaksis yang sangat keren dan canggih untuk warna.

Dalam demo berikut, saya telah menggunakan sintaksis warna relatif untuk membuat varian yang lebih terang dan lebih gelap dari warna dasar, serta menggunakan color-contrast() untuk memastikan label memiliki kontras yang tepat:

Screenshot dengan 3 kolom, setiap kolom lebih gelap atau lebih terang dari kolom tengah. — Coba demo

Fungsi ini juga dapat digunakan untuk pembuatan palet warna. Berikut adalah demo dengan seluruh palet dihasilkan dari warna dasar yang disediakan. Kumpulan CSS ini mendukung berbagai palet, dan setiap palet hanya memberikan basis yang berbeda. Sebagai bonus, karena saya telah menggunakan LCH, lihat bagaimana palet perceptual bahkan—tidak ada hot spot atau dead spot yang terlihat, berkat ruang warna ini.

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

Screenshot 15 palet yang semuanya dibuat secara dinamis oleh CSS. — Coba demo

Semoga sekarang Anda dapat melihat bagaimana ruang warna dan fungsi warna yang berbeda dapat digunakan untuk tujuan yang berbeda, berdasarkan kelebihan dan kekurangannya.

Resource

Ruang warna gradien

Sebelum ruang warna gradien, sRGB adalah ruang warna default yang digunakan. sRGB umumnya dapat diandalkan, tetapi memiliki beberapa kelemahan seperti zona mati abu-abu.

4 gradien dalam petak, semuanya dari cyan hingga deeppink. LCH dan LAB memiliki semangat yang lebih konsisten, dengan sRGB sedikit terdesaturasi di tengahnya.

Setelah ruang warna gradien, beri tahu browser ruang warna yang akan digunakan untuk interpolasi warna. Hal ini memberi developer dan desainer kemampuan untuk memilih gradien yang mereka sukai. Ruang warna default juga berubah menjadi LCH, bukan sRGB.

Penambahan sintaksis dilakukan setelah arah gradien, menggunakan sintaksis in baru, dan bersifat opsional:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

Berikut adalah gradien dasar dan penting dari hitam ke putih. Lihat kisaran hasil di setiap ruang warna. Beberapa mencapai hitam gelap lebih awal dari yang lain, beberapa memudar menjadi putih terlambat.

11 ruang warna ditampilkan yang membandingkan hitam dengan putih.

Dalam contoh berikutnya, hitam ditransisikan ke biru karena merupakan ruang masalah yang diketahui untuk gradien. Sebagian besar ruang warna berubah menjadi ungu selama interpolasi warna atau, seperti yang saya anggap, saat warna bergerak di dalam ruang warna dari titik A ke titik B. Karena gradien akan mengambil garis lurus dari titik A ke titik B, bentuk ruang warna akan mengubah perhentian yang diambil jalur secara drastis.

Catatan: okLCH dan okLAB adalah ruang warna khusus yang memperhitungkan berbagai drift, seperti yang ini menjadi ungu, sehingga membuatnya sangat akurat untuk gradien.

11 ruang warna ditampilkan yang membandingkan biru dengan hitam.

Untuk eksplorasi, contoh, dan komentar lebih mendalam, baca thread Twitter ini.

Resource

`inert`

Dukungan Browser

Sumber

Sebelum inert, sebaiknya fokus pengguna diarahkan ke area halaman atau aplikasi yang memerlukan perhatian segera. Strategi fokus terpandu ini menjadi dikenal sebagai fokus trapping karena developer akan menempatkan fokus ke dalam ruang interaktif, memproses peristiwa perubahan fokus, dan jika fokus keluar dari ruang interaktif, fokus akan dipaksa kembali. Pengguna keyboard atau pembaca layar diarahkan kembali ke ruang interaktif untuk memastikan tugas selesai sebelum dilanjutkan.

Setelah inert, tidak diperlukan trapping karena Anda dapat membekukan atau menjaga seluruh bagian halaman atau aplikasi. Klik dan upaya perubahan fokus tidak tersedia saat bagian dokumen tersebut tidak aktif. Kita juga dapat menganggapnya seperti penjaga, bukan perangkap, dengan inert tidak tertarik untuk membuat Anda tetap berada di suatu tempat, melainkan membuat tempat lain tidak tersedia.

Contoh yang baik untuk hal ini adalah fungsi alert() JavaScript:

Situs ditampilkan sebagai interaktif, lalu alert() dipanggil, dan halaman tidak lagi aktif.

Perhatikan dalam video sebelumnya bahwa halaman dapat diakses dengan mouse dan keyboard hingga alert() dipanggil. Setelah pop-up dialog pemberitahuan ditampilkan, bagian lain halaman akan dibekukan, atau inert. Fokus pengguna ditempatkan di dalam dialog pemberitahuan dan tidak dapat beralih ke tempat lain. Setelah pengguna berinteraksi dan menyelesaikan permintaan fungsi pemberitahuan, halaman akan menjadi interaktif lagi. inert memberdayakan developer untuk mencapai pengalaman fokus terpandu yang sama ini dengan mudah.

Berikut adalah contoh kode kecil untuk menunjukkan cara kerjanya:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

Dialog adalah contoh yang bagus, tetapi inert juga berguna untuk hal-hal seperti pengalaman pengguna menu samping geser. Saat pengguna menggeser menu samping, sebaiknya jangan biarkan mouse atau keyboard berinteraksi dengan halaman di belakangnya; hal ini agak rumit bagi pengguna. Sebagai gantinya, saat menu samping ditampilkan, buat halaman tidak aktif, dan sekarang pengguna harus menutup atau menavigasi dalam menu samping tersebut, dan tidak akan pernah tersesat di tempat lain di halaman dengan menu terbuka.

Resource

Font COLRv1

Sebelum font COLRv1, web memiliki font OT-SVG, juga format terbuka untuk font dengan gradien serta warna dan efek bawaan. Namun, ukurannya dapat menjadi sangat besar, dan meskipun memungkinkan pengeditan teks, tidak ada banyak cakupan untuk penyesuaian.

Setelah font COLRv1, web memiliki font dengan jejak yang lebih kecil, yang dapat diskalakan vektor, dapat diposisikan ulang, menampilkan gradien, dan didukung mode campuran yang menerima parameter untuk menyesuaikan font per kasus penggunaan atau untuk mencocokkan merek.

Visualisasi perbandingan dan diagram batang, yang menunjukkan bagaimana font COLRv1 lebih tajam dan lebih kecil. — Gambar bersumber dari https://developer.chrome.com/blog/colrv1-fonts/

Berikut adalah contoh dari postingan blog Developer Chrome tentang emoji. Mungkin Anda telah memperhatikan bahwa jika Anda memperbesar ukuran font pada emoji, emoji tersebut tidak akan tetap tajam. Ini adalah gambar, bukan gambar vektor. Sering kali dalam aplikasi, saat emoji digunakan, emoji akan diganti dengan aset berkualitas lebih tinggi. Dengan font COLRv1, emoji menjadi vektor dan indah:

Font ikon dapat melakukan beberapa hal luar biasa dengan format ini, menawarkan palet warna duotone kustom, dan lainnya. Memuat font COLRv1 sama seperti file font lainnya:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

Penyesuaian font COLRv1 dilakukan dengan @font-palette-values, aturan at CSS khusus untuk mengelompokkan dan memberi nama serangkaian opsi penyesuaian ke dalam paket untuk referensi di lain waktu. Perhatikan cara Anda menentukan nama kustom seperti properti kustom, dimulai dengan --:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

Dengan --colorized sebagai alias untuk penyesuaian, langkah terakhir adalah menerapkan palet ke elemen yang menggunakan jenis font warna:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

Screenshot font Bungee Spice dengan kata DUNE. — Font Bungee Spice ditampilkan dengan warna kustom, sumber dari https://developer.chrome.com/blog/colrv1-fonts/

Dengan makin banyaknya variasi font dan font warna yang tersedia, tipografi web berada dalam jalur yang sangat bagus menuju penyesuaian yang kaya dan ekspresi kreatif.

Resource

Unit area pandang

Grafik yang menunjukkan tampilan layar perangkat, jendela browser, dan iframe, semuanya memiliki area pandang yang berbeda.

Sebelum varian area pandang baru, web menawarkan unit fisik untuk membantu menyesuaikan area pandang. Ada satu untuk tinggi, lebar, ukuran terkecil (vmin), dan sisi terbesar (vmax). Hal ini berfungsi dengan baik untuk banyak hal, tetapi browser seluler memperkenalkan kompleksitas.

Di perangkat seluler, saat memuat halaman, status bar dengan URL akan ditampilkan, dan status bar ini menggunakan sebagian ruang area pandang. Setelah beberapa detik dan beberapa interaksi, status bar dapat bergeser untuk memungkinkan pengalaman tampilan yang lebih besar bagi pengguna. Namun, saat panel tersebut bergeser keluar, tinggi area pandang telah berubah, dan setiap unit vh akan bergeser dan mengubah ukurannya saat ukuran targetnya berubah. Pada tahun-tahun berikutnya, unit vh secara khusus perlu memutuskan mana dari dua ukuran area pandang yang akan digunakan, karena menyebabkan masalah tata letak visual yang mengganggu di perangkat seluler. Diputuskan bahwa vh akan selalu mewakili area pandang terbesar.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

Setelah varian area pandang baru, unit area pandang kecil, besar, dan dinamis tersedia, dengan penambahan setara logis ke unit fisik. Idenya adalah memberi developer dan desainer kemampuan untuk memilih unit yang ingin mereka gunakan untuk skenario tertentu. Mungkin tidak masalah jika ada pergeseran tata letak yang sedikit mengganggu saat status bar dihapus, sehingga dvh (tinggi area tampilan dinamis) dapat digunakan tanpa perlu khawatir.

Berikut adalah daftar lengkap semua opsi unit area pandang baru yang tersedia dengan varian area pandang baru:

Unit area pandang tinggi

.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

Unit area pandang lebar

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

Unit samping area pandang terkecil

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

Unit samping area pandang terbesar

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

Semoga hal ini akan memberi developer dan desainer fleksibilitas yang diperlukan untuk mencapai desain responsif area pandang mereka.

Resource

`:has()`

Dukungan Browser

Sumber

Sebelum :has(), subjek selector selalu berada di akhir. Misalnya, subjek pemilih ini adalah item daftar: ul > li. Pemilih pseudo dapat mengubah pemilih, tetapi tidak mengubah subjek: ul > li:hover atau ul > li:not(.selected).

Setelah :has(), subjek yang lebih tinggi di hierarki elemen dapat tetap menjadi subjek saat memberikan kueri tentang turunan: ul:has(> li). Sangat mudah untuk memahami cara :has() mendapatkan nama umum "pemilih induk", karena subjek pemilih sekarang adalah induk dalam hal ini.

Berikut adalah contoh sintaksis dasar dengan class .parent yang tetap menjadi subjek, tetapi hanya dipilih jika elemen turunan memiliki class .child:

.parent:has(.child) {...}

Berikut adalah contoh saat elemen <section> adalah subjek, tetapi pemilih hanya cocok jika salah satu turunan memiliki :focus-visible:

section:has(*:focus-visible) {...}

Catatan: :focus-within sudah berperilaku mirip dengan section:has(*:focus-visible) dan harus digunakan sebagai gantinya.

Pemilih :has() mulai menjadi utilitas yang fantastis setelah kasus penggunaan yang lebih praktis terlihat jelas. Misalnya, saat ini Anda tidak dapat memilih tag <a> saat tag tersebut menggabungkan gambar, sehingga sulit untuk mengajarkan tag anchor cara mengubah gayanya saat dalam kasus penggunaan tersebut. Namun, hal ini dapat dilakukan dengan :has():

a:has(> img) {...}

Semua ini adalah contoh saat :has() hanya terlihat seperti pemilih induk. Pertimbangkan kasus penggunaan gambar di dalam elemen <figure> dan sesuaikan gaya pada gambar jika gambar memiliki <figcaption>. Dalam contoh berikut, gambar dengan Begitu akan dipilih, kemudian gambar dalam konteks tersebut. :has() digunakan dan tidak mengubah subjek, karena subjek yang kita targetkan adalah gambar, bukan gambar:

figure:has(figcaption) img {...}

Kombinasinya tampaknya tak terbatas. Gabungkan :has() dengan kueri jumlah dan sesuaikan tata letak petak CSS berdasarkan jumlah turunan. Gabungkan :has() dengan status class pseudo interaktif dan buat aplikasi yang merespons dengan cara kreatif baru.

Memeriksa dukungan menjadi mudah dengan @supports dan fungsi selector(), yang menguji apakah browser memahami sintaksis sebelum menggunakannya:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

Resource

2022 dan seterusnya

Masih ada sejumlah hal yang akan sulit dilakukan setelah semua fitur luar biasa ini hadir pada tahun 2022. Bagian berikutnya membahas beberapa masalah yang tersisa dan solusi yang sedang dikembangkan secara aktif untuk menyelesaikannya. Solusi ini bersifat eksperimental, meskipun dapat ditentukan atau tersedia di balik tanda di browser.

Hasil dari bagian berikutnya adalah kenyamanan bahwa masalah yang tercantum memiliki banyak orang dari banyak perusahaan yang mencari penyelesaian—bukan bahwa solusi ini akan dirilis pada tahun 2023.

Properti kustom dengan jenis longgar

Dukungan Browser

Sumber

Properti khusus CSS sangat luar biasa. Fungsi ini memungkinkan berbagai hal disimpan di dalam variabel bernama, yang kemudian dapat diperluas, dihitung, dibagikan, dan banyak lagi. Faktanya, alat ini sangat fleksibel, jadi akan lebih baik jika ada beberapa yang kurang fleksibel.

Pertimbangkan skenario saat box-shadow menggunakan properti kustom untuk nilainya:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

Semua ini berfungsi dengan baik sampai salah satu properti diubah menjadi nilai yang tidak diterima oleh CSS di sana, misalnya --x: red. Seluruh bayangan akan rusak jika salah satu variabel bertingkat hilang atau ditetapkan ke jenis nilai yang tidak valid.

Di sinilah @property berperan: --x dapat menjadi properti kustom berjenis, tidak lagi longgar dan fleksibel, tetapi aman dengan beberapa batas yang ditentukan:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

Sekarang, saat box-shadow menggunakan var(--x) dan kemudian --x: red dicoba, red akan diabaikan karena bukan <length>. Artinya, bayangan akan terus berfungsi, meskipun nilai yang tidak valid diberikan ke salah satu properti kustomnya. Bukannya gagal, kode ini akan kembali ke initial-value dari 0px.

Animasi

Selain keamanan jenis, hal ini juga membuka banyak peluang untuk animasi. Fleksibilitas sintaksis CSS membuat animasi beberapa hal menjadi tidak mungkin, seperti gradien. @property membantu di sini karena properti CSS yang diketik dapat memberi tahu browser tentang intent developer di dalam interpolasi yang terlalu kompleks. Hal ini pada dasarnya membatasi cakupan kemungkinan sehingga browser dapat menganimasikan aspek gaya yang sebelumnya tidak dapat dilakukan.

Perhatikan contoh demo ini, dengan gradien radial digunakan untuk membuat sebagian dari overlay, sehingga menciptakan efek fokus sorotan. JavaScript menyetel x dan y mouse saat tombol alt/opt ditekan, lalu mengubah ukuran fokus ke nilai yang lebih kecil seperti 25%, sehingga membuat lingkaran fokus sorotan pada posisi mouse:

Coba demo

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

Namun, gradien tidak dapat dianimasikan. Animasi ini terlalu fleksibel dan terlalu rumit bagi browser untuk "hanya mendapatkan" cara Anda ingin menganimasikannya. Namun, dengan @property, satu properti dapat diketik dan dianimasikan secara terpisah, yang intent-nya dapat dipahami dengan mudah oleh browser.

Video game yang menggunakan efek fokus ini selalu menganimasikan lingkaran, dari lingkaran besar hingga lingkaran lubang jarum. Berikut cara menggunakan @property dengan demo kita sehingga browser menganimasikan mask gradien:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

Coba demo

Browser kini dapat menganimasikan ukuran gradien karena kita telah mengurangi luas permukaan modifikasi menjadi hanya satu properti dan mengetik nilai sehingga browser dapat melakukan interpolasi panjang secara cerdas.

@property dapat melakukan banyak hal, tetapi pemberdayaan kecil ini dapat sangat membantu.

Resource

Berada di `min-width` atau `max-width`

Sebelum rentang kueri media, kueri media CSS menggunakan min-width dan max-width untuk menguraikan kondisi di atas dan di bawah. Tampilannya mungkin terlihat seperti ini:

@media (min-width: 320px) {
  …
}

Setelah rentang kueri media, kueri media yang sama dapat terlihat seperti ini:

@media (width >= 320px) {
  …
}

Kueri media CSS yang menggunakan min-width dan max-width mungkin terlihat seperti ini:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

Setelah rentang kueri media, kueri media yang sama dapat terlihat seperti ini:

@media (320px <= width <= 1280px) {
  …
}

Bergantung pada latar belakang coding Anda, salah satunya akan terlihat jauh lebih mudah dibaca daripada yang lain. Berkat penambahan spesifikasi, developer akan dapat memilih spesifikasi yang mereka inginkan, atau bahkan menggunakannya secara bergantian.

Resource

Tidak ada variabel kueri media

Sebelum @custom-media, kueri media harus berulang kali diulang, atau mengandalkan preprocessor untuk menghasilkan output yang sesuai berdasarkan variabel statis selama waktu build.

Setelah @custom-media, CSS memungkinkan pembuatan alias kueri media dan referensinya, seperti halnya properti kustom.

Penamaan sesuatu sangat penting: dapat menyelaraskan tujuan dengan sintaksis, membuat segala sesuatu lebih mudah untuk dibagikan dan lebih mudah digunakan dalam tim. Berikut adalah beberapa kueri media kustom yang mengikuti saya di antara project:

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

Setelah ditentukan, saya dapat menggunakan salah satunya seperti ini:

@media (--OSdark) {
  :root {
    …
  }
}

Temukan daftar lengkap kueri media kustom yang saya gunakan di dalam library properti kustom CSS saya Open Props.

Resource

Pemilih bertingkat sangat bagus

Sebelum @nest, ada banyak pengulangan dalam stylesheet. Hal ini menjadi sangat sulit digunakan saat pemilih panjang dan masing-masing menargetkan perbedaan kecil. Kemudahan penyusunan bertingkat adalah salah satu alasan paling umum untuk mengadopsi preprosesor.

Setelah @nest, pengulangan akan hilang. Hampir setiap fitur nesting yang mendukung preprocessor akan tersedia di CSS.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

Hal yang paling penting bagi saya tentang pembuatan bertingkat, selain tidak mengulangi article dalam pemilih bertingkat, adalah konteks gaya tetap berada dalam satu blok gaya. Alih-alih memantul dari satu pemilih, dan gayanya ke pemilih lain dengan gaya (contoh 1), pembaca dapat tetap berada dalam konteks artikel dan melihat artikel memiliki link di dalamnya. Intent hubungan dan gaya digabungkan, sehingga article akan tampak memiliki gayanya sendiri.

Kepemilikan juga dapat dianggap sebagai sentralisasi. Alih-alih mencari gaya yang relevan di stylesheet, semuanya dapat ditemukan bersarang bersama dalam konteks. Hal ini berfungsi dengan hubungan induk ke turunan, tetapi juga dengan hubungan turunan ke induk.

Pertimbangkan turunan komponen yang ingin menyesuaikan dirinya sendiri saat berada dalam konteks induk yang berbeda, bukan induk yang memiliki gaya dan mengubah turunan:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest secara keseluruhan membantu pengaturan gaya, sentralisasi, dan kepemilikan yang lebih sehat. Komponen dapat mengelompokkan dan memiliki gayanya sendiri, bukan menyebar di antara blok gaya lainnya. Mungkin tampak kecil dalam contoh ini, tetapi dapat memiliki dampak yang sangat besar, baik untuk kemudahan maupun keterbacaan.

Resource

Gaya cakupan sangat sulit

Dukungan Browser

Sumber

Sebelum @scope, ada banyak strategi karena gaya di CSS bersifat menurun, mewarisi, dan tercakup secara global secara default. Fitur CSS ini sangat praktis untuk banyak hal, tetapi untuk situs dan aplikasi yang kompleks, dengan kemungkinan banyak gaya komponen yang berbeda, ruang global dan sifat kaskade dapat membuat gaya terasa seperti bocor.

Setelah @scope, gaya tidak hanya dapat dicakup hanya dalam konteks, seperti class, tetapi juga dapat menjelaskan tempat gaya berakhir dan tidak terus melakukan cascading atau mewarisi.

Dalam contoh berikut, cakupan konvensi penamaan BEM dapat dibalik menjadi intent sebenarnya. Pemilih BEM mencoba mencakup warna elemen header ke penampung .card dengan konvensi penamaan. Tindakan ini mengharuskan header mencantumkan nama class ini, sehingga tujuan dapat diselesaikan. Dengan @scope, tidak ada konvensi penamaan yang diperlukan untuk menyelesaikan tujuan yang sama tanpa me-markup elemen header:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

Berikut adalah contoh lain, yang kurang spesifik per komponen dan lebih banyak tentang sifat cakupan global CSS. Tema gelap dan terang harus ada bersama-sama di dalam stylesheet, dengan urutan yang penting dalam menentukan gaya yang menarik. Biasanya, ini berarti gaya tema gelap muncul setelah tema terang; ini menetapkan terang sebagai default dan gelap sebagai gaya opsional. Hindari pengurutan dan cakupan yang bertentangan dengan @scope:

@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

Untuk menyelesaikan cerita di sini, @scope juga memungkinkan penetapan tempat cakupan gaya berakhir. Hal ini tidak dapat dilakukan dengan konvensi penamaan atau preprocessor apa pun; hal ini bersifat khusus dan hanya dapat dilakukan oleh sesuatu yang disertakan dalam CSS di browser. Dalam contoh berikut, gaya img dan .content diterapkan secara eksklusif saat turunan .media-block adalah saudara atau induk .content:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

Resource

Tidak ada cara CSS untuk tata letak masonry

Sebelum CSS masonry dengan petak, JavaScript adalah cara terbaik untuk mendapatkan tata letak masonry, karena metode CSS apa pun dengan kolom atau flexbox akan mewakili urutan konten secara tidak akurat.

Setelah CSS masonry dengan petak, tidak ada library JavaScript yang diperlukan dan urutan kontennya akan benar.

Screenshot tata letak masonry yang menunjukkan angka di sepanjang bagian atas, lalu turun. — Gambar dan demo dari Smashing Magazine
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Demo sebelumnya dicapai dengan CSS berikut:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Anda dapat merasa lega karena hal ini sudah dipertimbangkan sebagai strategi tata letak yang tidak ada, dan Anda dapat mencobanya sekarang di Firefox.

Resource

CSS tidak dapat membantu pengguna mengurangi data

Dukungan Browser

Sumber

Sebelum kueri media prefers-reduced-data, JavaScript dan server dapat mengubah perilakunya berdasarkan sistem operasi pengguna atau opsi "penghemat data" browser, tetapi CSS tidak dapat melakukannya.

Setelah kueri media prefers-reduced-data, CSS dapat bergabung dengan peningkatan pengalaman pengguna dan berperan dalam menghemat data.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

CSS sebelumnya digunakan dalam komponen scroll media ini dan penghematannya dapat sangat besar. Bergantung pada seberapa besar area pandang yang dikunjungi, semakin banyak penghematan yang diperoleh saat pemuatan halaman. Penyimpanan berlanjut saat pengguna berinteraksi dengan scrollear media. Semua gambar memiliki atribut loading="lazy" dan, digabungkan dengan CSS yang menyembunyikan elemen sepenuhnya, berarti permintaan jaringan untuk gambar tidak pernah dibuat.

Screenshot antarmuka carousel acara TV dengan banyak thumbnail dan judul ditampilkan.

Untuk pengujian saya, pada area pandang berukuran sedang, 40 permintaan dan resource sebesar 700 kb dimuat pada awalnya. Saat pengguna men-scroll pilihan media, lebih banyak permintaan dan resource akan dimuat. Dengan CSS dan kueri media data yang dikurangi, 10 permintaan dan 172 kb resource dimuat. Penghematan ini mencapai setengah megabyte dan pengguna belum men-scroll media apa pun, pada saat itu tidak ada permintaan tambahan yang dibuat.

Screenshot antarmuka carousel acara TV tanpa thumbnail dan banyak judul yang ditampilkan.

Ada lebih banyak manfaat dari berkurangnya pengalaman data ini daripada sekadar penghematan data. Lebih banyak judul dapat dilihat dan tidak ada gambar sampul yang mengganggu yang mencuri perhatian. Banyak pengguna menjelajah dalam mode penghemat data karena mereka membayar per megabyte data—sangat menyenangkan melihat CSS dapat membantu di sini.

Resource

Fitur snap scroll terlalu terbatas

Sebelum proposal snap scroll ini, menulis JavaScript Anda sendiri untuk mengelola carousel, penggeser, atau galeri dapat dengan cepat menjadi rumit, dengan semua pengamat dan pengelolaan status. Selain itu, jika tidak berhati-hati, kecepatan scroll alami dapat dinormalisasi oleh skrip, sehingga interaksi pengguna terasa sedikit tidak wajar dan berpotensi canggung.

API baru

`snapChanging()`

Begitu browser merilis turunan snap, peristiwa ini diaktifkan. Hal ini memungkinkan UI mencerminkan tidak adanya turunan snap dan status snap yang tidak ditentukan dari scroll, karena sekarang digunakan dan akan mendarat di tempat baru.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

`snapChanged()`

Segera setelah browser terhubung ke turunan baru dan scroller diistirahatkan, peristiwa ini akan diaktifkan. Hal ini memungkinkan setiap UI yang bergantung pada turunan yang diikat untuk mengupdate dan mencerminkan koneksi.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

`scroll-start`

Scroll tidak selalu dimulai dari awal. Pertimbangkan komponen yang dapat digeser, dengan geser ke kiri atau kanan akan memicu peristiwa yang berbeda, atau kotak penelusuran yang pada pemuatan halaman awalnya disembunyikan hingga Anda men-scroll ke atas. Properti CSS ini memungkinkan developer menentukan bahwa penggeser harus dimulai pada titik tertentu.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

`:snap-target`

Pemilih CSS ini akan mencocokkan elemen dalam penampung scroll yang saat ini telah diikat oleh browser.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

Setelah proposal snap scroll ini, membuat penggeser, carousel, atau galeri jauh lebih mudah karena browser kini menawarkan kemudahan untuk tugas tersebut, sehingga menghilangkan observer dan kode orkestrasi scroll untuk menggunakan API bawaan.

Fitur CSS dan JS ini masih dalam tahap awal, tetapi nantikan polyfill yang dapat membantu adopsi dan pengujiannya dalam waktu dekat.

Resource

Bersepeda di antara negara bagian yang diketahui

Sebelum toggle(), hanya status yang di-build ke dalam browser yang dapat dimanfaatkan untuk gaya visual dan interaksi. Input kotak centang, misalnya, memiliki :checked, status browser yang dikelola secara internal untuk input yang dapat digunakan CSS untuk mengubah elemen secara visual.

Setelah toggle(), status kustom dapat dibuat di elemen mana pun agar CSS dapat mengubah dan menggunakannya untuk menata gaya. Layanan ini memungkinkan grup, bersepeda, pengalihan arah, dan lainnya.

Dalam contoh berikut, efek yang sama dari item daftar yang dicoret saat selesai dicapai, tetapi tanpa elemen kotak centang:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

Dan gaya toggle() CSS yang relevan:

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

Jika sudah terbiasa dengan mesin status, Anda mungkin melihat seberapa banyak persilangan dengan toggle(). Fitur ini akan memungkinkan developer mem-build lebih banyak status ke dalam CSS, yang diharapkan menghasilkan cara orkestrasi interaksi dan status yang lebih jelas dan semantik.

Resource

Menyesuaikan elemen tertentu

Sebelum <selectmenu>, CSS tidak memiliki kemampuan untuk menyesuaikan elemen <option> dengan HTML yang kaya atau tidak banyak mengubah tampilan daftar opsi. Hal ini menyebabkan developer memuat library eksternal yang membuat ulang sebagian besar fungsi <select>, yang akhirnya merepotkan.

Setelah <selectmenu>, developer dapat memberikan HTML yang kaya untuk elemen opsi dan mengaplikasikan gaya sebanyak yang diperlukan, sekaligus tetap memenuhi persyaratan aksesibilitas dan memberikan HTML semantik.

Pada contoh berikut, yang diambil dari halaman penjelasan <selectmenu>, menu pilihan baru dibuat dengan beberapa opsi dasar:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS dapat menargetkan dan menata gaya bagian elemen:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

Anda dapat mencoba elemen <selectmenu> di Chromium di Canary dengan mengaktifkan tanda eksperimen web. Perhatikan pada tahun 2023 dan seterusnya tentang elemen menu pilihan yang dapat disesuaikan.

Resource

Mengaitkan elemen ke elemen lain

Sebelum anchor(), posisi absolut dan relatif adalah strategi posisi yang disediakan bagi developer agar elemen turunan dapat berpindah-pindah dalam elemen induk.

Setelah anchor(), developer dapat memosisikan elemen ke elemen lain, terlepas dari apakah elemen tersebut merupakan turunan atau bukan. Hal ini juga memungkinkan developer menentukan tepi mana yang akan diposisikan, dan hal-hal menarik lainnya untuk membuat hubungan posisi antara elemen.

Penjelasan ini memiliki beberapa contoh bagus dan contoh kode yang diberikan, jika Anda tertarik untuk mempelajari lebih lanjut.

Resource

Penjelasan anchor()

Status CSS 2022

Ringkasan

Daftar isi

Kompatibilitas browser

Compat 2021

Interop 2022

Baru untuk 2022

Lapisan bersusun

Resource

Subkisi

Resource

Kueri penampung

Resource

accent-color

Resource

Level warna 4 dan 5

hwb()

Resource

Ruang warna

color-mix()

Resource

color-contrast()

Resource

Sintaksis warna relatif

Resource

Ruang warna gradien

Resource

inert

Resource

Font COLRv1

Resource

Unit area pandang

Resource

:has()

Resource

2022 dan seterusnya

Properti kustom dengan jenis longgar

Animasi

Resource

Berada di min-width atau max-width

Resource

Tidak ada variabel kueri media

Resource

Pemilih bertingkat sangat bagus

Resource

Gaya cakupan sangat sulit

Resource

Tidak ada cara CSS untuk tata letak masonry

Resource

CSS tidak dapat membantu pengguna mengurangi data

Resource

Fitur snap scroll terlalu terbatas

API baru

snapChanging()

snapChanged()

scroll-start

:snap-target

Resource

Bersepeda di antara negara bagian yang diketahui

Resource

Menyesuaikan elemen tertentu

Resource

Mengaitkan elemen ke elemen lain

Resource

`accent-color`

`hwb()`

`color-mix()`

`color-contrast()`

`inert`

`:has()`

Berada di `min-width` atau `max-width`

`snapChanging()`

`snapChanged()`

`scroll-start`

`:snap-target`