Status CSS 2022

Fitur gaya web masa kini dan masa depan, seperti yang terlihat di Google I/O 2022, ditambah beberapa fitur tambahan.

Adam Argyle

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

Ringkasan

Postingan ini adalah bentuk artikel dari pembicaraan yang disampaikan di Google I/O 2022. Panduan ini tidak dimaksudkan sebagai panduan mendalam tentang setiap fitur, melainkan pengantar dan ringkasan singkat untuk membangkitkan minat Anda, yang memberikan keluasan, bukan kedalaman. Jika Anda tertarik, lihat bagian akhir suatu bagian untuk menemukan link referensi ke informasi selengkapnya.

Daftar isi

Gunakan daftar di bawah untuk membuka topik yang menarik:

Kompatibilitas browser

Alasan utama begitu banyak fitur CSS 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 kualitas rangkaian pengujian, dan meningkatkan skor lulus browser untuk lima fitur:

1. sticky penentuan posisi
2. aspect-ratio ukuran
3. Tata letak flex
4. Tata letak grid
5. Pemosisian dan animasi transform

Skor pengujian meningkat secara keseluruhan, yang menunjukkan peningkatan stabilitas dan keandalan. Selamat kepada tim yang ada di sini!

Interop 2022

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

1. @layer
2. Ruang dan fungsi warna
3. Pembatasan
4. <dialog>
5. Kompatibilitas formulir
6. Scroll
7. Sub-grid
8. Tipografi
9. Unit area pandang
10. Kompatibilitas web

Ini adalah daftar yang menarik dan ambisius yang saya nantikan perkembangannya.

Baru untuk tahun 2022

Tidak mengherankan, status CSS 2022 sangat dipengaruhi oleh pekerjaan Interop 2022.

Lapisan berjenjang

Sebelum @layer, urutan stylesheet yang dimuat sangat penting, karena gaya yang dimuat terakhir dapat menggantikan gaya yang dimuat sebelumnya. Hal ini menyebabkan lembar gaya entri dikelola dengan cermat, yang mengharuskan developer memuat gaya yang kurang penting terlebih dahulu dan gaya yang lebih penting kemudian. Seluruh metodologi ada untuk membantu developer mengelola kepentingan 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 pentingnya penggantian gaya, tetapi tanpa pengelolaan orkestrasi pemuatan yang cermat.

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

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

Resource

• Spesifikasi CSS Cascade 5
• Penjelasan lapisan bertingkat
• Lapisan bertingkat di MDN
• Una Kravets: Cascade Layers
• Ahmad Shadeed: Hello, CSS Cascade Layers

Sub-grid

Sebelum subgrid, petak di dalam petak lain tidak dapat menyelaraskan diri dengan sel induk atau garis petaknya. 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 tersebut.

Dalam demo berikut, elemen body membuat petak klasik tiga kolom: kolom tengah disebut main, dan kolom kiri serta kanan menamai garisnya fullbleed. Kemudian, setiap elemen dalam isi, <nav> dan <main>, mengadopsi garis bernama dari isi dengan menyetel 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 meratakan atau menyesuaikan ukuran sendiri menggunakan kolom dan garis fullbleed dan main.

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

.fullbleed {
  grid-column: fullbleed;
}

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

Di panel elemen devtools, Anda dapat melihat elemen mana yang merupakan {i>grid<i} dan {i>subgrid<i}, yang sangat berguna untuk men-debug atau memvalidasi tata letak.

Resource

• Spesifikasi subpetak
• Subgrid di MDN
• Bramus: Video Tutorial Subgrid CSS Praktis

Kueri container

Sebelum @container, elemen halaman web hanya dapat merespons ukuran seluruh area pandang. Hal ini sangat bagus untuk tata letak makro, tetapi untuk tata letak mikro, yang penampung luarnya bukan seluruh area tampilan, tata letak tidak dapat disesuaikan dengan tepat.

Setelah @container, elemen dapat merespons ukuran atau gaya penampung induk. Satu-satunya peringatan adalah penampung harus menyatakan 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 membuat kolom Sen, Sel, Rab, Kam, dan Jum di video berikut dapat dikueri oleh elemen peristiwa.

Berikut adalah CSS untuk mengkueri penampung calendar-day untuk 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 contoh lainnya: satu komponen buku menyesuaikan diri dengan ruang yang tersedia di kolom tempat buku ditarik:

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

Resource

• Spesifikasi Container Queries
• Penjelasan Kueri Container
• Kueri Penampung di MDN
• Responsif baru di web.dev
• Demo Kalender oleh Una
• Kumpulan kueri penampung yang luar biasa
• Cara kami membuat Designcember di web.dev
• Ahmad Shadeed: Say Hello To CSS Container Queries

accent-color

Sebelum accent-color, saat Anda menginginkan formulir dengan warna yang cocok dengan merek, Anda dapat menggunakan library atau solusi CSS yang kompleks dan sulit dikelola seiring waktu. Meskipun mereka memberi Anda semua opsi, dan semoga menyertakan aksesibilitas, pilihan untuk menggunakan komponen bawaan atau mengadopsi komponen Anda sendiri menjadi membosankan untuk terus dipilih.

Setelah accent-color, satu baris CSS akan menampilkan warna merek ke komponen bawaan. Selain warna semu, browser secara 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;
}

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

Resource

• spesifikasi accent-color
• accent-color di MDN
• accent-color di web.dev
• Bramus: Mewarnai Kontrol Antarmuka Pengguna dengan CSS accent-color

Tingkat warna 4 dan 5

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

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

Sebelum semua fitur warna ini, sistem desain perlu menghitung terlebih dahulu warna kontras yang tepat, dan memastikan palet yang cerah dengan tepat, sementara praprosesor atau JavaScript melakukan tugas berat.

Setelah semua fitur warna ini, browser dan CSS dapat melakukan semua pekerjaan secara dinamis dan tepat waktu. Daripada mengirim banyak KB CSS dan JavaScript kepada pengguna untuk mengaktifkan warna tema dan visualisasi data, CSS dapat melakukan pengaturan 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()

HWB adalah singkatan dari hue, whiteness, dan blackness. Cara ini menampilkan dirinya sebagai cara yang mudah dipahami untuk mengartikulasikan warna, karena hanya berupa hue dan jumlah putih atau hitam untuk mencerahkan atau menggelapkan. Artis yang mencampur warna dengan putih atau hitam mungkin akan mengapresiasi penambahan sintaksis warna ini.

Penggunaan fungsi warna ini menghasilkan warna dari ruang warna sRGB, sama seperti HSL dan RGB. Dari segi hal baru untuk tahun 2022, hal ini tidak memberi Anda warna baru, tetapi dapat mempermudah beberapa tugas bagi penggemar sintaksis dan model mental.

Resource

• Spesifikasi HWB
• HWB di MDN
• Stefan Judis: hwb() – notasi warna untuk manusia?

Ruang warna

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

CSS 2022 ditetapkan untuk menawarkan 10 ruang warna baru, yang masing-masing memiliki fitur unik untuk membantu desainer dan developer dalam menampilkan, memilih, dan memadukan warna. Sebelumnya, sRGB adalah satu-satunya opsi untuk bekerja dengan warna, tetapi kini CSS membuka potensi baru dan ruang warna default baru, LCH.

color-mix()

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

Setelah color-mix(), developer dan desainer dapat memadukan warna di browser, bersama dengan semua gaya lainnya, tanpa menjalankan proses build atau menyertakan JavaScript. Selain itu, mereka dapat menentukan ruang warna untuk melakukan pencampuran, atau menggunakan ruang warna pencampuran default LCH.

Sering kali, warna merek digunakan sebagai dasar dan variannya dibuat dari warna tersebut, seperti warna yang lebih terang atau lebih gelap untuk gaya saat mengarahkan 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 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

• Spesifikasi color-mix()
• color-mix() di MDN
• Demo penerapan tema
• Demo tema lainnya
• Fabio Giolito: Membuat tema warna dengan fitur CSS mendatang ini

color-contrast()

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

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

Berikut screenshot demo set palet warna HWB tempat warna teks dipilih secara otomatis oleh browser berdasarkan warna contoh:

Dasar-dasar sintaksisnya terlihat seperti ini, dengan warna 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 dengan kontras tertinggi dari pilihan:

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

Terakhir, jika Anda tidak ingin memilih warna dengan kontras tertinggi dari daftar, rasio kontras target dapat diberikan, dan warna pertama yang memenuhi rasio tersebut 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 itulah kasus penggunaan utamanya. Pikirkan betapa mudahnya menghadirkan antarmuka yang dapat diakses dan mudah dibaca setelah pemilihan warna kontras yang tepat dibangun ke dalam bahasa CSS itu sendiri.

Resource

• Spesifikasi color-contrast()
• color-contrast() di MDN
• Demo

Sintaksis warna relatif

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 dapat disesuaikan dengan mudah menggunakan calc().

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

Dalam contoh sintaksis berikut, hex dasar diberikan dan dua warna baru dibuat relatif terhadapnya. Warna pertama --absolute-change membuat warna baru di LCH dari warna dasar, lalu mengganti kecerahan warna dasar dengan 75%, sambil 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 mentransmisikan 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 warna dasar yang lebih terang dan lebih gelap, serta menggunakan color-contrast() untuk memastikan label memiliki kontras yang tepat:

Fungsi ini juga dapat digunakan untuk pembuatan palet warna. Berikut adalah demo tempat seluruh palet dibuat dari warna dasar yang diberikan. Satu set CSS ini mendukung semua palet, dan setiap palet hanya menyediakan dasar yang berbeda. Sebagai bonus, karena saya telah menggunakan LCH, lihat betapa meratanya persepsi palet—tidak ada titik panas atau mati 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);
}

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

Resource

• Spesifikasi sintaksis warna relatif
• Membuat palet warna dengan sintaksis warna relatif
• Membangun varian warna dengan sintaksis warna relatif

Ruang warna gradien

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

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 rentang hasil di setiap ruang warna. Sebagian mencapai hitam pekat lebih awal daripada yang lain, sebagian memudar menjadi putih terlalu lambat.

Dalam contoh berikutnya ini, warna hitam diubah menjadi biru karena merupakan ruang masalah yang diketahui untuk gradien. Sebagian besar ruang warna merayap ke ungu selama interpolasi warna atau, seperti yang saya suka pikirkan, saat warna bergerak di dalam ruang warnanya 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 dilalui jalur secara drastis.

Untuk eksplorasi, contoh, dan komentar yang lebih mendalam, baca rangkaian tweet ini.

Resource

• Spesifikasi interpolasi gradien
• Demo yang membandingkan gradien di ruang
• Notebook yang dapat diamati yang membandingkan gradien

inert

Sebelum inert, sebaiknya arahkan fokus pengguna ke area halaman atau aplikasi yang perlu segera diperhatikan. Strategi fokus terpandu ini dikenal sebagai penguncian fokus karena developer akan menempatkan fokus ke ruang interaktif, memproses peristiwa perubahan fokus, dan jika fokus keluar dari ruang interaktif, fokus akan dipaksa kembali. Pengguna yang menggunakan keyboard atau pembaca layar akan dipandu kembali ke ruang interaktif untuk memastikan tugas selesai sebelum melanjutkan.

Setelah inert, tidak diperlukan penangkapan karena Anda dapat membekukan atau melindungi seluruh bagian halaman atau aplikasi. Upaya mengklik dan mengubah fokus tidak tersedia saat bagian dokumen tersebut tidak aktif. Orang juga dapat menganggapnya seperti penjaga, bukan jebakan, di mana inert tidak tertarik membuat Anda tetap berada di suatu tempat, melainkan membuat tempat lain tidak tersedia.

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

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

Berikut 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, tidak boleh membiarkan mouse atau keyboard berinteraksi dengan halaman di belakangnya; hal ini agak rumit bagi pengguna. Sebagai gantinya, saat menu samping ditampilkan, buat halaman menjadi tidak aktif, dan kini pengguna harus menutup atau membuka menu samping tersebut, dan tidak akan pernah tersesat di tempat lain di halaman dengan menu yang terbuka.

Resource

• Spesifikasi inert
• Inert di MDN
• Chrome Developers: Memperkenalkan inert

Font COLRv1

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

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

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

Font ikon dapat melakukan beberapa hal luar biasa dengan format ini, menawarkan palet warna dua warna kustom, dan banyak lagi. 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 CSS khusus untuk mengelompokkan dan memberi nama serangkaian opsi penyesuaian ke dalam paket untuk rujukan di lain waktu. Perhatikan cara Anda menentukan nama kustom seperti properti kustom, yang 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 family 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;
}

Dengan makin banyaknya font variabel dan font warna yang tersedia, tipografi web berada di jalur yang sangat luar biasa menuju penyesuaian yang kaya dan ekspresi kreatif.

Resource

• Spesifikasi colrv1 di GitHub
• Chrome Developers: Font Colrv1
• Video penjelasan developer BlinkOn

Unit area pandang

Sebelum adanya 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). Ini berfungsi dengan baik untuk banyak hal, tetapi browser seluler memperkenalkan kerumitan.

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

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

Setelah varian area tampilan baru, unit area tampilan kecil, besar, dan dinamis tersedia, dengan penambahan persamaan logis dengan yang 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 kecil yang mengganggu saat status bar hilang, sehingga dvh (tinggi area tampilan dinamis) dapat digunakan tanpa khawatir.

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

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

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

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

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

Semoga hal ini akan memberikan fleksibilitas yang diperlukan bagi developer dan desainer untuk mencapai desain responsif viewport mereka.

Resource

• Spesifikasi unit relatif area pandang
• Bramus: The Large, Small, and Dynamic Viewports

:has()

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

Setelah :has(), subjek yang lebih tinggi dalam hierarki elemen dapat tetap menjadi subjek sambil memberikan kueri tentang turunan: ul:has(> li). Anda dapat dengan mudah memahami bagaimana :has() mendapatkan nama umum "pemilih induk", karena subjek pemilih sekarang adalah induk dalam kasus ini.

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

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

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

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

Pemilih :has() mulai menjadi utilitas yang fantastis setelah kasus penggunaan yang lebih praktis menjadi jelas. Misalnya, saat ini tidak mungkin memilih tag <a> saat tag tersebut membungkus gambar, sehingga sulit untuk mengajari tag anchor cara mengubah gaya saat dalam kasus penggunaan tersebut. Hal ini dapat dilakukan dengan :has() meskipun:

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

Semua contoh di atas adalah contoh saat :has() hanya terlihat seperti pemilih induk. Pertimbangkan kasus penggunaan gambar di dalam elemen <figure> dan menyesuaikan gaya pada gambar jika gambar memiliki <figcaption>. Dalam contoh berikut, gambar dengan teks gambar dipilih, lalu gambar dalam konteks tersebut. :has() digunakan dan tidak mengubah subjek, karena subjek yang kami targetkan adalah gambar, bukan angka:

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 semu interaktif dan buat aplikasi yang merespons dengan cara kreatif baru.

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

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

Resource

• :has() specification
• :has() di MDN
• Pemilih CSS :has() lebih dari sekadar "pemilih induk"

2022 dan seterusnya

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

Kesimpulan dari bagian berikutnya adalah bahwa masalah yang tercantum sedang dicari solusinya oleh banyak orang dari berbagai perusahaan, bukan bahwa solusi ini akan dirilis pada tahun 2023.

Properti kustom yang tidak memiliki jenis

Properti kustom CSS sangat luar biasa. Jenis data ini memungkinkan berbagai hal disimpan dalam variabel bernama, yang kemudian dapat diperluas, dihitung, dibagikan, dan lainnya. Sebenarnya, karena sangat fleksibel, 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 hingga salah satu properti diubah menjadi nilai yang tidak diterima CSS di sana, seperti --x: red. Seluruh bayangan akan rusak jika salah satu variabel bertingkat tidak ada atau ditetapkan ke jenis nilai yang tidak valid.

Di sinilah @property berperan: --x dapat menjadi properti kustom yang diketik, 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 --x: red dicoba kemudian, red akan diabaikan karena bukan <length>. Artinya, bayangan terus berfungsi, meskipun nilai yang tidak valid diberikan ke salah satu properti kustomnya. Daripada gagal, kode ini akan dikembalikan ke initial-value 0px.

Animasi

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

Perhatikan contoh demo ini, di mana gradien radial digunakan untuk membuat sebagian overlay, sehingga menciptakan efek fokus sorotan. JavaScript menetapkan x dan y mouse saat tombol alt/opt ditekan, lalu mengubah focal-size ke nilai yang lebih kecil seperti 25%, sehingga membuat lingkaran fokus sorotan di posisi mouse:

.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, sehingga browser dapat dengan mudah memahami maksudnya.

Video game yang menggunakan efek fokus ini selalu menganimasikan lingkaran, dari lingkaran besar hingga lingkaran kecil. Berikut cara menggunakan @property dengan demo kami 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;
}

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

@property dapat melakukan lebih banyak hal, tetapi pengaktifan kecil ini dapat memberikan dampak yang besar.

Resource

• @property specification
• @property di MDN
• @property di web.dev
• Demo fokus zoom
• CSS Tricks: Exploring @property and its animating powers

Berada di min-width atau max-width

Sebelum rentang kueri media, kueri media CSS menggunakan min-width dan max-width untuk mengartikulasikan 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 dapat 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 satu di antaranya akan terlihat jauh lebih mudah dibaca daripada yang lain. Berkat penambahan spesifikasi, developer akan dapat memilih mana yang mereka sukai, atau bahkan menggunakannya secara bergantian.

Resource

• Spesifikasi sintaksis rentang kueri media
• Sintaksis rentang kueri media di MDN
• Sintaksis rentang kueri media PostCSS plugin

Tidak ada variabel kueri media

Sebelum @custom-media, kueri media harus berulang-ulang, atau mengandalkan praprosesor untuk menghasilkan output yang tepat berdasarkan variabel statis selama waktu build.

Setelah @custom-media, CSS memungkinkan pemberian alias pada kueri media dan perujukan nya, seperti properti kustom.

Penamaan sangat penting: penamaan dapat menyelaraskan tujuan dengan sintaksis, sehingga memudahkan berbagi dan penggunaan dalam tim. Berikut beberapa kueri media kustom yang mengikuti saya di antara berbagai 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 Open Props.

Resource

• Spesifikasi kueri media kustom
• Plugin PostCSS kueri media kustom

Pemilih bersarang sangat bagus

Sebelum @nest, ada banyak pengulangan dalam stylesheet. Hal ini menjadi sangat sulit dikelola jika pemilihnya panjang dan masing-masing menargetkan perbedaan kecil. Kemudahan penyusunan adalah salah satu alasan paling umum untuk mengadopsi praprosesor.

Setelah @nest, pengulangan akan hilang. Hampir setiap fitur nesting yang diaktifkan praprosesor akan tersedia dan dibuat ke dalam CSS.

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

Hal terpenting tentang penyusunan bertingkat bagi saya, selain tidak mengulangi article dalam pemilih bertingkat, adalah konteks penataan gaya tetap berada dalam satu blok gaya. Daripada berpindah dari satu pemilih, dan gayanya, ke pemilih lain dengan gaya (contoh 1), pembaca dapat tetap berada dalam konteks artikel dan melihat link yang dimiliki artikel di dalamnya. Maksud hubungan dan gaya digabungkan, sehingga article dapat muncul dengan gayanya sendiri.

Kepemilikan juga dapat dianggap sebagai sentralisasi. Daripada mencari-cari stylesheet untuk menemukan gaya yang relevan, semua gaya tersebut dapat ditemukan bersama-sama 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 membantu secara keseluruhan dalam pengorganisasian, sentralisasi, dan kepemilikan gaya yang lebih sehat. Komponen dapat mengelompokkan dan memiliki gaya mereka sendiri, alih-alih menyebarkannya di antara blok gaya lainnya. Mungkin tampak kecil dalam contoh ini, tetapi dapat memberikan dampak yang sangat besar, baik untuk kenyamanan maupun keterbacaan.

Resource

• @spesifikasi nest
• @nest PostCSS plugin
• Bramus: Masa depan CSS: Selektor Nesting

Menentukan cakupan gaya sangat sulit

Sebelum @scope, ada banyak strategi karena gaya dalam CSS di-cascade, diwarisi, dan secara default memiliki cakupan global. Fitur CSS ini sangat nyaman untuk banyak hal, tetapi untuk situs dan aplikasi yang kompleks, dengan banyak gaya komponen yang berbeda, ruang global dan sifat kaskade dapat membuat gaya terasa bocor.

Setelah @scope, gaya tidak hanya dapat dicakup hanya dalam konteks, seperti class, tetapi juga dapat mengartikulasikan di mana gaya berakhir dan tidak terus bertingkat atau diwariskan.

Dalam contoh berikut, cakupan konvensi penamaan BEM dapat dibalik menjadi maksud sebenarnya. Pemilih BEM mencoba mencakup warna elemen header ke penampung .card dengan konvensi penamaan. Hal ini mengharuskan header memiliki nama class ini, sehingga tujuan tercapai. Dengan @scope, tidak ada konvensi penamaan yang diperlukan untuk menyelesaikan tujuan yang sama tanpa menandai elemen header:

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

/* with @scope becomes */

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

Berikut contoh lain, yang kurang spesifik per komponen dan lebih berfokus pada sifat cakupan global CSS. Tema gelap dan terang harus ada bersama dalam stylesheet, dengan urutan yang penting dalam menentukan gaya yang menang. Biasanya, ini berarti gaya tema gelap muncul setelah tema terang; hal ini menetapkan terang sebagai default dan gelap sebagai gaya opsional. Hindari pertarungan pengurutan dan cakupan dengan @scope:

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

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

Untuk melengkapi cerita di sini, @scope juga memungkinkan penetapan tempat cakupan gaya berakhir. Hal ini tidak dapat dilakukan dengan konvensi penamaan atau praprosesor apa pun; hal ini khusus dan hanya dapat dilakukan oleh CSS bawaan browser. Dalam contoh berikut, gaya visual 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

• Spesifikasi@scope
• @scope explainer

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 dengan kolom atau flexbox akan secara tidak akurat merepresentasikan urutan konten.

Setelah tata letak CSS dengan petak, tidak ada library JavaScript yang diperlukan dan urutan konten akan benar.

Demo di atas dicapai dengan CSS berikut:

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

Sangat menyenangkan mengetahui bahwa strategi tata letak yang hilang ini sudah dalam pertimbangan, dan Anda dapat mencobanya sekarang di Firefox.

Resource

• Spesifikasi tata letak petak
• Tata letak petak di MDN
• Smashing Magazine: Tata Letak Masonry CSS Native dengan CSS Grid

CSS tidak dapat membantu pengguna mengurangi data

Sebelum kueri media prefers-reduced-data, JavaScript dan server dapat mengubah perilakunya berdasarkan opsi "penghemat data" sistem operasi atau browser pengguna, 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 bisa sangat besar. Bergantung pada seberapa besar area pandang yang dikunjungi, semakin banyak penghematan yang dapat diperoleh saat memuat halaman. Penyimpanan berlanjut saat pengguna berinteraksi dengan penggeser media. Semua gambar memiliki atribut loading="lazy" dan jika digabungkan dengan CSS yang menyembunyikan elemen sepenuhnya, berarti permintaan jaringan untuk gambar tidak pernah dilakukan.

Untuk pengujian saya, pada area pandang berukuran sedang, 40 permintaan dan 700 KB resource dimuat pada awalnya. Saat pengguna men-scroll pilihan media, lebih banyak permintaan dan resource dimuat. Dengan CSS dan kueri media data yang dikurangi, 10 permintaan dan 172 KB resource dimuat. Itu adalah penghematan setengah megabyte dan pengguna bahkan belum men-scroll media apa pun, yang berarti tidak ada permintaan tambahan yang dibuat.

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

Resource

• spesifikasi prefers-reduced-data
• prefers-reduced-data di MDN
• prefers-reduced-data di GUI Tantangan
• Smashing Magazine: Meningkatkan Core Web Vitals, Studi Kasus Smashing Magazine

Fitur paskan scroll terlalu terbatas

Sebelum proposal penyelarasan 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 hati-hati, kecepatan scrolling alami dapat dinormalisasi oleh skrip, sehingga interaksi pengguna terasa sedikit tidak alami dan berpotensi kaku.

API baru

snapChanging()

Peristiwa ini dipicu segera setelah browser melepaskan turunan snap. Hal ini memungkinkan UI mencerminkan tidak adanya turunan yang disesuaikan dan status penyesuaian scroller yang tidak ditentukan, karena kini 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 di-snap ke turunan baru dan scroller berhenti, peristiwa ini akan diaktifkan. Hal ini memungkinkan UI apa pun yang bergantung pada turunan yang disesuaikan untuk diperbarui dan mencerminkan koneksi.

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

scroll-start

Scrolling tidak selalu dimulai di awal. Pertimbangkan komponen yang dapat digeser di mana menggeser ke kiri atau kanan memicu peristiwa yang berbeda, atau kotak penelusuran yang awalnya tersembunyi saat halaman dimuat hingga Anda men-scroll ke bagian atas. Properti CSS ini memungkinkan developer menentukan bahwa scroller 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 snap scroll yang saat ini di-snap 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 penyambungan scroll ini, membuat penggeser, carousel, atau galeri menjadi jauh lebih mudah karena browser kini menawarkan kemudahan untuk tugas tersebut, sehingga tidak perlu lagi menggunakan pengamat dan kode orkestrasi scroll karena dapat menggunakan API bawaan.

Fitur CSS dan JS ini masih dalam tahap awal, tetapi segera cari polyfill yang dapat membantu adopsi dan pengujiannya.

Resource

• Draf spesifikasi Scroll Snap 2
• Penjelasan Scroll Snap 2
• Demo pengepasan

Berpindah-pindah di antara status yang diketahui

Sebelum toggle(), hanya status yang sudah ada di browser yang dapat dimanfaatkan untuk gaya 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 gaya. Fitur ini memungkinkan pengelompokan, siklus, pengalihan terarah, dan lainnya.

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

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

Dan gaya CSS toggle() yang relevan:

li {
  toggle-root: check self;
}

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

Jika Anda sudah terbiasa dengan mesin status, Anda mungkin melihat betapa banyak persilangan dengan toggle(). Fitur ini akan memungkinkan developer membangun lebih banyak status mereka ke dalam CSS, sehingga diharapkan menghasilkan cara yang lebih jelas dan semantik untuk mengatur interaksi dan status.

Resource

• toggle() spesifikasi draf
• Bramus: Masa Depan CSS: Tombol CSS

Menyesuaikan elemen pilihan

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

Setelah <selectmenu>, developer dapat menyediakan HTML lengkap untuk elemen opsi dan menata gayanya sesuai kebutuhan, sambil tetap memenuhi persyaratan aksesibilitas dan menyediakan HTML semantik.

Dalam 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 dalam Canary dengan tanda web experiments diaktifkan. Nantikan elemen menu pilihan yang dapat disesuaikan pada tahun 2023 dan seterusnya.

Resource

• Spesifikasi selectmenu
• Demo selectmenu

Menyematkan elemen ke elemen lain

Sebelum anchor(), posisi mutlak dan relatif adalah strategi posisi yang disediakan bagi developer agar elemen turunan dapat bergerak di dalam elemen induk.

Setelah anchor(), developer dapat memosisikan elemen ke elemen lain, terlepas dari apakah elemen tersebut adalah turunan atau bukan. Hal ini juga memungkinkan developer menentukan tepi yang akan digunakan untuk memosisikan, dan kemudahan lainnya untuk membuat hubungan posisi antar-elemen.

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

Resource

• anchor() explainer