Fitur gaya visual web saat ini dan nanti, seperti yang terlihat di Google IO 2022, ditambah beberapa tambahan.
Tahun 2022 akan menjadi salah satu tahun terbaik CSS, baik dalam hal fitur maupun rilis fitur browser kerja sama, dengan tujuan kolaboratif untuk mengimplementasikan 14 fitur.
Ringkasan
Postingan ini adalah bentuk artikel perbincangan yang diberikan di Google IO 2022. Fitur ini tidak dimaksudkan untuk menjadi panduan mendalam tentang setiap fitur, melainkan pengantar dan ringkasan singkat untuk menarik minat Anda, memberikan cakupan yang lebih luas, bukan kedalaman. Jika Anda tertarik, periksa akhir bagian untuk melihat link referensi ke informasi lebih lanjut.
Daftar isi
Gunakan daftar di bawah untuk langsung ke topik yang diminati:
Kompatibilitas browser
Alasan utama mengapa banyak fitur CSS diatur untuk dirilis secara bersama-sama adalah karena upaya Interop 2022. Sebelum mempelajari upaya Interop, penting untuk memperhatikan upaya Compat 2021.
Compat 2021
Sasaran pada tahun 2021, yang didorong oleh masukan developer melalui survei, adalah untuk menstabilkan fitur saat ini, meningkatkan rangkaian pengujian, dan meningkatkan skor kelulusan browser untuk lima fitur:
stickypenempatan- Ukuran
aspect-ratio - Tata letak
flex - Tata letak
grid - Penempatan posisi dan animasi
transform
Skor tes meningkat secara menyeluruh, yang menunjukkan peningkatan stabilitas dan keandalan. Selamat kepada tim di sini!
Interop 2022
Tahun ini, browser bertemu bersama untuk mendiskusikan fitur dan prioritas yang ingin dikerjakan, sekaligus menyatukan upaya mereka. Mereka berencana untuk menghadirkan fitur web berikut bagi developer:
@layer- Ruang warna dan fungsi
- {i>Containment<i} (Penahan/Pembatasan):
<dialog>- Kompatibilitas formulir
- Scroll
- Subgrid
- Tipografi
- Unit area pandang
- Kompatibilitas web
Ini adalah daftar yang menarik dan ambisius yang saya tidak sabar untuk melihatnya.
Baru untuk 2022
Tidak mengherankan, status CSS 2022 sangat terpengaruh oleh peran Interop 2022.
Lapisan bertingkat
Sebelum @layer, urutan stylesheet yang dimuat yang ditemukan sangat penting,
karena gaya yang dimuat terakhir kali dapat menimpa gaya yang dimuat sebelumnya. Hal ini menyebabkan
style gaya entri yang dikelola dengan cermat, sehingga developer perlu memuat gaya yang kurang
penting terlebih dahulu dan gaya yang lebih penting kemudian. Seluruh metodologi tersedia untuk membantu developer dalam mengelola nilai penting ini, seperti ITCSS.
Dengan @layer, file entri dapat terlebih dahulu menentukan lapisan, dan urutannya. Kemudian, saat gaya dimuat atau ditentukan, gaya tersebut dapat ditempatkan di dalam
lapisan, sehingga nilai penting penggantian gaya dapat dipertahankan, tetapi tanpa
orkestrasi pemuatan yang dikelola dengan cermat.
Video ini menunjukkan bagaimana lapisan kaskade yang ditentukan memungkinkan proses pembuatan dan pemuatan yang lebih bebas dan bergaya bebas, sambil tetap mempertahankan kaskade sesuai kebutuhan.
Chrome DevTools berguna untuk memvisualisasikan gaya mana yang berasal dari lapisan yang mana:
Referensi
- Spesifikasi CSS Cascade 5
- Penjelasan lapisan bertingkat
- Lapisan menurun di MDN
- Una Kravets: Lapisan Cascade
- Ahmad Shadeed: Halo, CSS Cascade Layer
Subgrid
Sebelum subgrid, petak di dalam petak lain tidak dapat disejajarkan dengan
sel induk atau garis petaknya. Setiap tata letak petak unik. Banyak desainer menempatkan
satu petak di seluruh desain mereka dan terus-menerus menyelaraskan item di dalamnya, yang
tidak dapat dilakukan dengan CSS.
Setelah subgrid, turunan dari petak dapat mengadopsi kolom atau baris induknya sebagai
miliknya sendiri, dan menyelaraskan dirinya sendiri atau turunannya.
Dalam demo berikut, elemen isi membuat petak klasik yang terdiri dari tiga kolom:
kolom tengah disebut main, dan kolom kiri dan kanan beri nama
garisnya
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 dari <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 untuk Firefox). Dalam gambar berikut, petak dan subgrid induk telah di-overlay. Sekarang, hal itu menyerupai bagaimana desainer memikirkan tata letak.
Di panel elemen devtools, Anda dapat melihat elemen mana yang merupakan petak dan subgrid, yang sangat membantu untuk men-debug atau memvalidasi tata letak.
Referensi
Kueri penampung
Sebelum @container, elemen halaman web hanya dapat merespons ukuran
seluruh area tampilan. Cara ini bagus untuk tata letak makro. Namun, untuk tata letak mikro, jika
penampung luarnya tidak seluruh area tampilan, tata letak
tidak akan dapat disesuaikan.
Setelah @container, elemen dapat merespons ukuran atau gaya penampung induk.
Satu-satunya peringatan adalah container harus mendeklarasikan diri sebagai target kueri
yang memungkinkan, yang merupakan persyaratan kecil untuk manfaat besar.
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
Gaya inilah yang membuat kolom Sen, Sel, Rab, Kam, dan Jum dalam 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 ini contoh lainnya: satu komponen buku menyesuaikan dirinya dengan ruang yang tersedia di kolom tempat komponen tersebut ditarik:
Una benar dalam menilai situasi ini sebagai responsif
baru. Ada
banyak keputusan desain yang menarik dan bermakna yang harus dibuat saat menggunakan
@container.
Referensi
- Spesifikasi Kueri Container
- Penjelasan Kueri Container
- Kueri Container di MDN
- Aplikasi responsif baru di web.dev
- Demo kalender oleh Una
- Koleksi kueri container keren
- Cara kami membangun Designcember di web.dev
- Ahmad Shadeed: Kueri Say Hello To CSS Container
accent-color
Sebelum accent-color, saat Anda menginginkan formulir dengan warna yang cocok dengan merek, Anda
dapat memiliki library atau solusi CSS kompleks yang menjadi sulit dikelola
dari waktu ke waktu. Meskipun mereka memberi Anda semua opsi, dan yang diharapkan sudah mencakup
aksesibilitas, pilihan untuk menggunakan komponen bawaan atau mengadopsi komponen Anda sendiri
menjadi membosankan untuk terus memilih.
Setelah accent-color, satu baris CSS akan memberikan 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;
}
Untuk mempelajari accent-color lebih lanjut, lihat postingan saya di
web.dev yang membahas lebih banyak aspek
dari properti CSS yang berguna ini.
Referensi
- spesifikasi warna aksen
- aksen warna di MDN
- accent-color di web.dev
- Bramus: Menyesuaikan Kontrol Antarmuka Pengguna dengan warna aksen CSS
Tingkat warna 4 dan 5
Web telah didominasi oleh sRGB selama beberapa dekade terakhir, tetapi di dunia digital yang terus berkembang dengan layar definisi tinggi dan perangkat seluler yang dilengkapi dengan layar OLED atau QLED, sRGB saja tidak cukup. Selain itu, halaman dinamis yang dapat beradaptasi dengan preferensi pengguna juga diharapkan, dan pengelolaan warna telah menjadi perhatian yang terus berkembang bagi desainer, sistem desain, dan pengelola kode.
Namun, tidak pada tahun 2022—CSS memiliki sejumlah fungsi dan ruang warna baru: - Warna yang mencapai kemampuan warna HD pada tampilan. - Ruang warna yang cocok dengan intent, seperti keseragaman persepsi. - Ruang warna untuk gradien yang secara drastis mengubah hasil interpolasi. - Fungsi warna untuk membantu Anda memadupadankan dan membedakan, serta memilih ruang tempat Anda melakukan pekerjaan.
Sebelum semua fitur warna ini, sistem desain perlu menghitung warna kontras yang tepat terlebih dahulu, dan memastikan palet yang cerah dengan tepat, sementara praprosesor atau JavaScript melakukan bagian pekerjaan yang sulit.
Dengan 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 orkestrasi dan penghitungan. CSS juga lebih siap untuk memeriksa dukungan sebelum menggunakan 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 {i>hue<i}, {i>whiteness<i}, dan {i>blackness<i}. Warna ini disajikan sebagai cara yang mudah dipahami manusia untuk mengartikulasikan warna, karena hanya rona dan sejumlah putih atau hitam untuk mencerahkan atau menggelapkan. Seniman yang memadukan warna dengan warna putih atau hitam mungkin menyukai penambahan sintaksis warna ini.
Penggunaan 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.
Referensi
Ruang warna
Cara warna direpresentasikan dilakukan dengan ruang warna. Setiap ruang warna menawarkan berbagai fitur dan kompromi untuk bekerja dengan warna. Beberapa mungkin mengemas semua warna cerah; beberapa mungkin menyejajarkannya terlebih dahulu berdasarkan kecerahannya.
CSS 2022 siap 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 menangani warna, tetapi sekarang 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 menyediakan opsi untuk menentukan ruang warna mana yang akan digunakan untuk pencampuran, yang terkadang mengakibatkan hasil yang membingungkan.
Setelah color-mix(), developer dan desainer dapat mencampur warna di browser,
beserta semua gaya lainnya, tanpa menjalankan proses build atau menyertakan
JavaScript. Selain itu, fungsi tersebut dapat menentukan ruang warna mana yang akan dicampur, atau menggunakan ruang warna pencampuran default LCH.
Sering kali, warna merek digunakan sebagai dasar dan varian dibuat dari warna tersebut, 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-warna tersebut di ruang warna yang berbeda, seperti sRGB, ubahlah:
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
Berikut ini demo penerapan tema menggunakan color-mix(). Coba ubah warna merek
dan lihat pembaruan tema:
Nikmati mencampur warna dalam berbagai ruang warna di stylesheet Anda pada tahun 2022!
Referensi
- spesifikasi color-mix()
- color-mix() di MDN
- Demo tema
- Demo tema lainnya
- Fabio Giolito: Buat tema warna dengan fitur CSS yang akan datang 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
mengontraskan yang benar dengan contoh tersebut.
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 untuk sistem desain dan
meminta browser memilih warna pertama untuk memenuhi rasio kontras yang Anda inginkan.
Berikut adalah screenshot demo set palet warna HWB dengan warna teks otomatis dipilih oleh browser berdasarkan warna pilihan:
Dasar-dasar sintaksis terlihat seperti ini, dengan warna abu-abu diteruskan ke fungsi dan browser akan menentukan apakah warna hitam atau putih memiliki paling kontras:
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 lebih baik untuk 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 hal itu akan menjadi kasus penggunaan utamanya. Pikirkan betapa mudahnya memberikan antarmuka yang mudah diakses dan dibaca setelah pemilihan warna kontras yang tepat ditanamkan ke dalam bahasa CSS itu sendiri.
Referensi
Sintaksis warna relatif
Sebelum sintaksis warna relatif, untuk menghitung warna dan melakukan penyesuaian, saluran warna harus ditempatkan satu per satu ke dalam properti khusus. Batasan
ini juga menjadikan HSL sebagai fungsi warna primer untuk memanipulasi warna
karena hue, saturasi, atau kecerahan semuanya dapat disesuaikan
secara mudah dengan calc().
Setelah sintaksis warna relatif, warna apa pun di ruang mana pun dapat didekonstruksi, dimodifikasi, dan ditampilkan sebagai warna, semuanya dalam satu baris CSS. Tidak ada lagi batasan pada HSL—manipulasi dapat dilakukan di ruang warna apa pun yang diinginkan, dan banyak properti yang lebih sedikit perlu dibuat untuk memfasilitasinya.
Dalam contoh sintaksis berikut, hex dasar disediakan dan dua warna baru
dibuat sesuai dengan hex dasar tersebut. 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 dalam 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);
}
Fungsi ini mirip dengan mencampur warna, tetapi lebih mirip dengan perubahan daripada pencampuran. Anda bisa mentransmisikan warna dari warna lain, mendapatkan akses ke tiga nilai saluran seperti yang diberi nama berdasarkan fungsi warna yang digunakan, dengan peluang untuk menyesuaikan saluran tersebut. Secara keseluruhan, ini adalah sintaksis yang sangat keren dan andal 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 ini adalah demo di mana seluruh palet dibuat menggunakan warna dasar yang disediakan. Satu kumpulan CSS ini mendukung semua beragam palet, setiap palet hanya memberikan basis yang berbeda. Sebagai bonus, karena saya telah menggunakan LCH, lihatlah betapa persepsinya bahkan pada 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 fungsi warna yang berbeda dapat digunakan untuk tujuan yang berbeda, berdasarkan kekuatan dan kelemahannya.
Referensi
- 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 dapat diandalkan, tetapi memiliki beberapa kelemahan seperti zona mati abu-abu.
Setelah ruang warna gradien, beri tahu browser ruang warna mana yang akan digunakan untuk interpolasi warna. Dengan begitu, developer dan desainer dapat memilih gradien yang mereka sukai. Ruang warna default juga berubah menjadi LCH, bukan sRGB.
Penambahan sintaksis berjalan 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. Beberapa mencapai hitam gelap lebih awal dari yang lain, beberapa memudar menjadi putih terlambat.
Pada contoh berikutnya, hitam diubah menjadi biru karena merupakan ruang masalah yang diketahui untuk gradien. Sebagian besar ruang warna merayap menjadi ungu selama interpolasi warna atau, seperti yang saya pikirkan, saat warna berpindah dalam ruang warnanya dari titik A ke titik B. Karena gradien akan mengambil garis lurus dari titik A ke titik B, bentuk ruang warna secara drastis mengubah perhentian yang diambil oleh jalur di sepanjang jalan.
Untuk eksplorasi, contoh, dan komentar yang lebih mendalam, baca rangkaian pesan Twitter ini.
Referensi
- Spesifikasi interpolasi gradien
- Demo yang membandingkan gradien dalam ruang
- Notebook yang dapat diobservasi yang membandingkan gradien
inert
Sebelum inert, sebaiknya arahkan fokus pengguna ke area
halaman atau aplikasi yang perlu segera ditangani. Strategi fokus terpandu ini
dikenal sebagai perangkap fokus karena developer akan menempatkan fokus ke dalam ruang
interaktif, memproses peristiwa perubahan fokus, dan, jika fokus keluar dari ruang
interaktif, maka fokus akan dipaksa masuk. Pengguna yang menggunakan keyboard atau pembaca layar
diarahkan kembali ke ruang interaktif untuk memastikan tugas selesai sebelum
melanjutkan.
Setelah inert, perangkap tidak diperlukan karena Anda dapat membekukan atau melindungi seluruh bagian halaman atau aplikasi. Upaya perubahan klik dan fokus tidak tersedia ketika bagian dokumen tersebut tidak aktif. Orang juga dapat menganggap
hal ini seperti penjaga, bukan jebakan, yang membuat inert tidak tertarik untuk membuat
Anda tinggal di suatu tempat, bukan membuat tempat lain tidak tersedia.
Contoh yang baik dari hal ini adalah fungsi alert() JavaScript:
Perhatikan di video sebelumnya bagaimana halaman dapat diakses menggunakan mouse dan keyboard
hingga alert() dipanggil. Setelah pop-up dialog pemberitahuan ditampilkan, bagian halaman lainnya akan dibekukan, atau inert. Fokus pengguna ditempatkan di dalam dialog pemberitahuan dan tidak memiliki tempat lain untuk dituju. Setelah pengguna berinteraksi dan menyelesaikan permintaan fungsi pemberitahuan, halaman akan interaktif lagi. inert mendukung
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 keluar dari menu samping, tidak boleh membiarkan mouse atau keyboard berinteraksi dengan halaman di belakangnya; hal ini
sedikit rumit bagi pengguna. Sebaliknya, saat menu samping ditampilkan, buat halaman
inert, dan sekarang pengguna harus menutup atau membuka dalam menu samping tersebut, dan tidak akan
menemukan diri mereka hilang di tempat lain di halaman dengan menu yang terbuka.
Referensi
Font COLRv1
Sebelum font COLRv1, web memiliki font OT-SVG, serta format terbuka untuk font dengan gradien serta warna dan efek bawaan. Namun, teks ini dapat berkembang sangat besar, dan meskipun pengeditan teks diizinkan, tidak 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 cocok dengan merek.
Berikut ini contoh dari postingan blog Developer Chrome tentang emoji. Mungkin Anda memperhatikan bahwa jika ukuran font diperbesar pada emoji, ukuran font menjadi tidak tajam. Ini adalah gambar dan bukan seni vektor. Sering kali dalam aplikasi saat emoji digunakan, emoji ditukar dengan aset yang berkualitas lebih tinggi. Dengan font COLRv1, emoji terlihat vektor dan indah:
Font ikon dapat melakukan banyak hal menakjubkan dengan format ini, menawarkan palet warna duo-tone kustom, dan banyak lagi. Cara 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, CSS
at-aturan khusus untuk mengelompokkan dan memberi nama kumpulan opsi penyesuaian ke dalam paket untuk
referensi nanti. 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 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;
}
Dengan makin banyaknya ketersediaan font dan font warna yang bervariasi, tipografi web berada di jalur yang sangat luar biasa menuju penyesuaian yang kaya dan ekspresi kreatif.
Referensi
Unit area pandang
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). Cookie ini berfungsi dengan baik dalam banyak hal, namun {i> browser<i} seluler menimbulkan kerumitan.
Di perangkat seluler, saat memuat halaman, status bar dengan URL ditampilkan, dan panel ini menggunakan sebagian ruang area tampilan. Setelah beberapa detik dan beberapa
interaktivitas, status bar dapat bergeser untuk memberikan pengalaman area pandang
yang lebih besar bagi pengguna. Namun, saat panel tersebut bergeser keluar, tinggi area pandang telah
berubah, serta unit vh akan bergeser dan diubah ukurannya saat ukuran targetnya berubah.
Di tahun-tahun berikutnya, unit vh secara khusus perlu menentukan mana dari dua
ukuran area pandang yang akan digunakan, karena menyebabkan masalah tata letak visual
yang mengganggu pada perangkat seluler. Telah ditentukan 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 yang setara logis dengan unit fisik. Tujuannya adalah
memberi developer dan desainer kemampuan untuk memilih unit mana yang ingin mereka
gunakan untuk skenario tertentu. Anda dapat menggunakan sedikit pergeseran tata letak yang mengganggu
saat status bar menghilang, sehingga dvh (tinggi area pandang dinamis) dapat
digunakan tanpa perlu khawatir.
Berikut adalah daftar lengkap semua opsi unit area pandang baru yang tersedia dengan varian area pandang 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 memberi developer dan desainer fleksibilitas yang diperlukan untuk mencapai desain responsif area pandang mereka.
Referensi
: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
sekaligus memberikan kueri tentang turunan: ul:has(> li). Sangat mudah untuk memahami
bagaimana :has() mendapatkan nama umum "pemilih induk", karena subjek
pemilih kini menjadi induk dalam kasus ini.
Berikut adalah contoh sintaksis dasar dengan class .parent tetap menjadi subjek, tetapi
hanya dipilih jika elemen turunan memiliki class .child:
.parent:has(.child) {...}
Berikut adalah contoh dengan elemen <section> sebagai 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
praktis lebih terlihat. Misalnya, saat ini Anda tidak dapat memilih
tag <a> saat menggabungkan gambar, sehingga sulit untuk mengajarkan tag anchor
cara mengubah gayanya saat dalam kasus penggunaan tersebut. Hal ini dapat dilakukan dengan :has()
meskipun:
a:has(> img) {...}
Ini semua 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 Jeda dipilih, lalu gambar dalam
konteks tersebut. :has() digunakan dan tidak mengubah subjek, karena subjek yang kita targetkan adalah gambar, bukan gambar:
figure:has(figcaption) img {...}
Kombinasi ini sepertinya tidak akan ada habisnya. 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 yang baru.
Proses memeriksa dukungan dapat dilakukan dengan mudah dengan
@supports dan
fungsi
selector(), yang menguji apakah browser memahami sintaksis sebelum menggunakannya:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Referensi
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 lainnya dan solusi yang secara aktif dikembangkan untuk menyelesaikannya. Solusi ini bersifat eksperimental, meskipun mungkin telah ditentukan atau tersedia di balik flag di browser.
Hasil dari bagian berikutnya adalah kenyamanan karena masalah yang tercantum memiliki banyak orang dari banyak perusahaan yang mencari penyelesaian—bukan bahwa solusi ini akan dirilis pada tahun 2023.
Properti khusus yang diketik secara longgar
Properti khusus CSS luar biasa. Library ini memungkinkan segala macam hal disimpan di dalam variabel bernama, yang kemudian dapat diperluas, dihitung, dibagikan, dan banyak lagi. Faktanya, fitur tersebut 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, misalnya --x: red. Seluruh bayangan akan pecah jika salah satu variabel bertingkat hilang atau disetel ke jenis nilai yang tidak valid.
Di sinilah @property berperan: --x dapat
menjadi properti khusus 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 berikutnya dicoba,
red akan diabaikan karena bukan <length>. Ini berarti bayangan akan terus berfungsi, meskipun nilai yang tidak valid diberikan ke salah satu properti khususnya.
Alih-alih gagal, metode ini akan mengembalikan ke initial-value dari 0px.
Animasi
Selain keamanan jenis huruf, 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. Pada dasarnya, fungsi ini membatasi cakupan kemungkinan sehingga
browser dapat menganimasikan aspek gaya yang tidak dapat dilakukan sebelumnya.
Pertimbangkan contoh demo ini, saat gradien radial digunakan untuk membuat bagian overlay, sehingga menciptakan efek fokus sorotan. JavaScript menetapkan mouse x dan y saat tombol alt/opt ditekan, lalu mengubah ukuran fokus ke nilai yang lebih kecil seperti 25%, sehingga membuat lingkaran fokus sorotan pada 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. Elemen ini terlalu fleksibel dan terlalu rumit bagi browser untuk "mendapatkan" animasi yang Anda inginkan. Namun, dengan @property, satu properti dapat diketik dan dianimasikan secara terpisah, sehingga
browser dapat dengan mudah memahami intent-nya.
Video game yang menggunakan efek fokus ini selalu menganimasikan lingkaran, dari lingkaran
besar hingga lingkaran lubang jarum. Berikut cara menggunakan @property dengan demo kami agar 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 sekarang dapat menganimasikan ukuran gradien karena kami telah mengurangi area permukaan modifikasi menjadi hanya satu properti dan mengetik nilainya agar browser dapat menginterpolasi panjang secara cerdas.
@property dapat melakukan lebih banyak hal, tetapi pemberdayaan kecil ini dapat sangat bermanfaat.
Referensi
- @property specification
- @property di MDN
- @property di web.dev
- Demo fokus zoom
- Trik CSS: Menjelajahi @property dan kekuatan animasinya
Berada di min-width atau max-width
Sebelum rentang kueri media, kueri media CSS menggunakan min-width dan max-width untuk
mengartikulasikan berulang kali dalam kondisi. 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 tambahan spesifikasi ini, developer dapat memilih mana yang mereka sukai, atau bahkan menggunakannya secara bergantian.
Referensi
- Spesifikasi sintaksis rentang kueri media
- Sintaksis rentang kueri media di MDN
- Plugin PostCSS sintaksis rentang kueri media
Tidak ada variabel kueri media
Sebelum @custom-media, kueri media harus berulang kali, atau
mengandalkan praprosesor untuk menghasilkan output yang tepat berdasarkan variabel statis
selama waktu build.
Setelah @custom-media, CSS memungkinkan pembuatan alias kueri media dan referensinya, seperti properti kustom.
Penamaan hal-hal sangat penting: hal ini dapat menyelaraskan tujuan dengan sintaksis, membuat hal-hal lebih mudah dibagikan dan lebih mudah digunakan dalam tim. Berikut adalah beberapa kueri media kustom yang menyertai 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 didefinisikan, 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.
Referensi
Penyetelan bertingkat sangat bagus
Sebelum @nest, ada banyak pengulangan di stylesheet. Keadaan ini
menjadi sangat sulit jika pemilih panjang dan masing-masing menarget perbedaan
kecil. Kemudahan penyusunan bertingkat adalah salah satu alasan paling umum untuk
mengadopsi praprosesor.
Setelah @nest, pengulangan akan hilang. Hampir setiap fitur
{i>nesting<i} yang mendukung praprosesor akan tersedia sebagai bawaan di dalam 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 dalam menyusun bertingkat bagi saya, selain tidak mengulangi article di
pemilih bertingkat, adalah konteks gaya visual tetap berada dalam satu blok gaya.
Daripada 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
dipaketkan bersama, sehingga article dapat terlihat memiliki gayanya sendiri.
Kepemilikan juga dapat dianggap sebagai sentralisasi. Daripada mencari gaya yang relevan, semuanya dapat ditemukan bertingkat dalam suatu konteks. Fungsi 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 organisasi, sentralisasi, dan kepemilikan dengan gaya yang lebih sehat secara keseluruhan. Komponen dapat mengelompokkan dan memiliki gayanya sendiri, tanpa harus menyebar di antara blok gaya lainnya. Hal ini mungkin tampak sepele dalam contoh ini, tetapi
dapat berdampak sangat besar, baik untuk kenyamanan maupun keterbacaan.
Referensi
{i>Scopinging style<i} sangat sulit
Dukungan Browser
- 118
- 118
- x
- 17,4
Sebelum @scope, ada banyak strategi karena gaya dalam CSS bersifat menurun, mewarisi, dan dicakup secara global secara default. Fitur CSS ini sangat praktis untuk banyak hal, tetapi untuk situs dan aplikasi yang kompleks, dengan berbagai gaya komponen yang berpotensi berbeda, ruang global dan sifat kaskade dapat membuat gaya terasa seperti bocor.
Setelah @scope, gaya tidak hanya dapat dicakup dalam konteks saja, seperti
class, tetapi juga dapat menyatakan tempat akhir gaya dan tidak terus
berjenjang atau diwarisi.
Pada contoh berikut, cakupan konvensi penamaan BEM
dapat dibalik menjadi intent yang sebenarnya. Pemilih BEM mencoba menentukan cakupan warna elemen header ke penampung .card dengan konvensi penamaan. Hal ini mengharuskan header memiliki nama class ini, untuk menyelesaikan
tujuan. 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 ini contoh lain, yang tidak terlalu spesifik untuk komponen dan lebih banyak tentang sifat cakupan global CSS. Tema gelap dan terang harus berdampingan di dalam stylesheet, yang mana urutan penting dalam menentukan gaya unggulan. Biasanya ini berarti gaya tema gelap
muncul setelah tema terang; ini menetapkan terang sebagai gaya default dan
gelap sebagai gaya opsional. Hindari pertempuran urutan dan cakupan 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. Ini tidak dapat dilakukan dengan konvensi penamaan atau preprosesor apa pun. Ini spesial dan hanya sesuatu yang dapat dilakukan oleh CSS bawaan browser. Dalam contoh berikut, gaya img dan .content diterapkan secara eksklusif saat turunan dari .media-block adalah seinduk atau induk dari .content:
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
Referensi
Tidak ada cara CSS untuk tata letak masonry
Sebelum CSS masonry dengan petak, JavaScript adalah cara terbaik untuk menyusun tata letak masonry, karena setiap metode CSS dengan kolom atau flexbox tidak akan menampilkan urutan konten secara akurat.
Setelah CSS masonry dengan petak, library JavaScript tidak diperlukan dan urutan konten akan benar.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
Demo sebelumnya dapat dilakukan dengan CSS berikut:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
Kami senang mengetahui bahwa hal ini telah diketahui sebagai strategi tata letak yang hilang, dan Anda dapat mencobanya hari ini di Firefox.
Referensi
- Spesifikasi tata letak Masonry
- Tata letak Masonry di MDN
- Smashing Magazine: Tata Letak Masonry CSS Native dengan Petak CSS
CSS tidak dapat membantu pengguna mengurangi data
Sebelum kueri media prefers-reduced-data, JavaScript dan server dapat
mengubah perilakunya berdasarkan opsi "penghemat data" browser atau sistem operasi
pengguna, tetapi CSS tidak dapat melakukannya.
Setelah kueri media prefers-reduced-data, CSS dapat bergabung dengan peningkatan pengalaman pengguna
dan memainkan perannya dalam menyimpan 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 besar penghematan yang diperoleh saat pemuatan halaman. Penyimpanan berlanjut saat pengguna berinteraksi dengan scroller
media. Semua gambar memiliki atribut loading="lazy" dan bahwa,
dikombinasikan dengan CSS yang menyembunyikan elemen sepenuhnya, berarti permintaan jaringan untuk
gambar tidak akan pernah dibuat.
Untuk pengujian saya, pada area pandang berukuran sedang, 40 permintaan dan 700 kb resource awalnya dimuat. 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 akan dimuat. Ini berarti penghematan sebesar setengah megabyte dan pengguna belum men-scroll media apa pun, sehingga tidak ada permintaan tambahan yang dibuat.
Ada lebih banyak manfaat dari pengalaman data yang berkurang 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 megabita data. Kami senang melihat CSS dapat membantu di sini.
Referensi
- lebih memilih spesifikasi data yang dikurangi
- lebih memilih data yang dikurangi di MDN
- lebih suka-mengurangi-data dalam Tantangan GUI
- Smashing Magazine: Meningkatkan Data Web Inti, Studi Kasus Smashing Magazine
Fitur snap scroll terlalu terbatas
Sebelum proposal scroll snap ini, menulis JavaScript Anda sendiri untuk mengelola carousel, penggeser, atau galeri dapat menjadi kompleks dengan cepat, dengan semua observer dan pengelolaan status. Selain itu, jika tidak hati-hati, kecepatan scroll alami dapat dinormalisasi oleh skrip, sehingga membuat interaksi pengguna terasa sedikit tidak wajar dan berpotensi kaku.
API baru
snapChanging()
Segera setelah browser merilis anak snap, peristiwa ini akan aktif. Hal ini memungkinkan UI mencerminkan tidak adanya turunan snap dan status snap yang tidak pasti dari scroller, karena saat ini digunakan dan akan ditempatkan di tempat baru.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
Segera setelah browser disesuaikan ke turunan baru dan scroller diistirahatkan, peristiwa ini akan diaktifkan. Hal ini memungkinkan UI apa pun yang bergantung pada turunan yang diikat untuk melakukan update 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, yang menggeser ke kiri atau ke kanan akan memicu peristiwa yang berbeda, atau kotak penelusuran yang awalnya disembunyikan hingga Anda men-scroll ke atas saat pemuatan halaman. 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 cocok dengan elemen dalam container snap scroll yang saat ini 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 scroll snap ini, pembuatan penggeser, carousel, atau galeri jauh lebih mudah karena browser sekarang menawarkan kemudahan untuk tugas, menghilangkan pengamat dan kode orkestrasi scroll yang mendukung penggunaan API bawaan.
Fitur CSS dan JS ini masih sangat awal, tetapi waspadalah terhadap polyfill yang dapat membantu penerapan dan pengujian fitur tersebut dalam waktu dekat.
Referensi
Bersepeda di antara negara bagian yang diketahui
Sebelum toggle(), hanya status yang dibangun ke dalam browser yang sudah 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 apa pun agar CSS dapat diubah dan digunakan untuk penataan gaya. Layanan ini memungkinkan grup, bersepeda, pengalihan terarah, dan lainnya.
Dalam contoh berikut, efek yang sama dari coretan item daftar pada penyelesaian tercapai, 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 banyaknya crossover yang ada dengan toggle(). Fitur ini akan memungkinkan developer mem-build lebih banyak status
mereka menjadi CSS, yang diharapkan menghasilkan cara yang lebih jelas dan lebih semantik dalam mengorkestrasi
interaksi dan status.
Referensi
Menyesuaikan elemen yang dipilih
Sebelum <selectmenu>, CSS tidak memiliki kemampuan untuk menyesuaikan elemen <option>
dengan HTML yang kaya atau banyak mengubah tampilan daftar opsi.
Hal ini menyebabkan developer memuat library eksternal yang membuat ulang banyak
fungsi <select>, yang akhirnya menjadi banyak pekerjaan.
Setelah <selectmenu>, developer dapat menyediakan HTML yang kaya untuk elemen opsi dan
menata gayanya sebanyak yang mereka butuhkan, sekaligus tetap memenuhi persyaratan aksesibilitas
dan menyediakan 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 tanda eksperimen web yang diaktifkan. Nantikan elemen menu tertentu
pada tahun 2023 dan seterusnya.
Referensi
Menambatkan elemen ke elemen lain
Sebelum anchor(), posisi absolut dan relatif adalah strategi posisi yang disediakan bagi developer agar elemen turunan bergerak dalam elemen induk.
Setelah anchor(), developer dapat memosisikan elemen ke elemen lain, terlepas
dari apakah elemen tersebut turunan atau bukan. Hal ini juga memungkinkan developer menentukan tepi mana
yang menjadi posisi, dan cara lain untuk membuat hubungan posisi antar-elemen.
Penjelasan ini menyediakan beberapa contoh dan contoh kode bagus jika Anda tertarik untuk mempelajari lebih lanjut.