Dasar pengukuran akan hadir di caniuse.com. Dalam postingan ini, pelajari integrasi dan temukan beberapa fitur yang menjadi bagian dari Baseline pada tahun 2023.
Dengan definisi Dasar Pengukuran baru, ada dua tahap dalam siklus proses fitur: saat fitur baru tersedia, lalu saat fitur tersedia secara luas setelah 30 bulan. Fitur menjadi bagian dari Dasar Pengukuran yang baru tersedia saat dapat dioperasikan secara bersama-sama di browser berikut:
- Safari (macOS dan iOS)
- Firefox (desktop dan Android)
- Chrome (desktop dan Android)
- Edge (desktop)
Dasar pengukuran membuka halaman Bisakah Saya Menggunakan
Sebagai langkah berikutnya dalam mengklarifikasi ketersediaan fitur, Dasar Pengukuran mulai muncul di Can I Use mulai hari ini. Saat mengunjungi beberapa halaman di Can I Use, Anda akan melihat badge yang memberi tahu apakah fitur tersebut tersedia secara luas di Dasar Pengukuran.
Fitur yang baru tersedia di Dasar Pengukuran juga akan menampilkan badge, beserta tahun saat fitur tersebut tersedia. Apa pun yang menjadi interoperabilitas di seluruh set browser inti tahun ini adalah bagian dari Baseline 2023.
Di bagian lain postingan ini, temukan fitur yang mencapai tonggak pencapaian ini selama tahun 2023. Semua fitur ini adalah Dasar Pengukuran 2023—baru tersedia.
Ukuran kueri penampung dan unit kueri penampung
Kueri penampung ukuran memungkinkan Anda membuat kueri ukuran elemen, dengan cara yang sama seperti kueri media yang memungkinkan Anda membuat kueri ukuran area pandang. Alat ini mempermudah pembuatan komponen yang dapat digunakan kembali dengan memungkinkan Anda membuat komponen yang bereaksi terhadap ukuran area tempat komponen tersebut ditempatkan.
Desain kartu berikut berubah bergantung pada lebar komponen. Pelajari lebih lanjut di Kueri penampung di browser stabil.
Fungsi dan ruang warna baru
CSS kini mendukung ruang warna yang memungkinkan Anda mengakses warna di luar gamut sRGB. Artinya, Anda dapat mendukung layar HD (definisi tinggi) menggunakan warna dari gamut HD.
Model warna baru
Sekarang di Dasar Pengukuran, fungsi warna lch()
, lab()
, oklch()
, dan oklab()
memberikan akses ke model warna LCH, Lab, OKLCH, dan OKLab.
![Screenshot editor gradient.style dengan gradien cerah merah muda ke biru.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=8&hl=id)
Fungsi color-mix()
Selain itu, fungsi warna baru telah menjadi bagian dari Dasar Pengukuran. Fungsi color-mix()
memungkinkan pencampuran satu warna ke warna lain, di ruang warna mana pun.
Dalam CSS berikut, 25% biru dicampur dengan putih, dalam ruang warna srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Pelajari color-mix()
lebih lanjut.
Fungsi color()
Fungsi color()
dapat digunakan untuk ruang warna apa pun yang menentukan warna dengan saluran
R, G, dan B. color()
menggunakan parameter ruang warna terlebih dahulu, lalu serangkaian
nilai saluran untuk RGB dan secara opsional beberapa alfa. Anda dapat menggunakan salah satu dari: srgb
,
srgb-linear
, display-p3
, a98-rgb
, prophoto-rgb
, rec2020
, xyz
,
xyz-d50
, dan xyz-d65
. Contoh:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
Panduan warna resolusi tinggi CSS memberi Anda lebih banyak contoh ruang dan fungsi warna baru, beserta informasi tentang waktu penggunaannya.
Streaming kompresi
Compression Streams API adalah JavaScript API untuk mengompresi dan mendekompresi aliran data. Aplikasi yang menggunakan kompresi bawaan ini tidak perlu lagi menyertakan library kompresi.
Pelajari lebih lanjut di Streaming kompresi kini didukung di semua browser.
Kanvas offscreen
Sebelum OffscreenCanvas, kemampuan menggambar kanvas terikat dengan elemen
<canvas>
, yang berarti bergantung langsung pada DOM. OffscreenCanvas memisahkan
DOM dari Canvas API dengan memindahkan kanvas ke luar layar.
Berkat pemisahan ini, rendering OffscreenCanvas sepenuhnya terlepas dari DOM, sehingga menawarkan beberapa peningkatan kecepatan dibandingkan kanvas biasa karena tidak ada sinkronisasi di antara keduanya. Web Worker juga dapat digunakan untuk memindahkan pekerjaan rendering ke Web Worker, meskipun tidak ada DOM yang tersedia, sehingga membebaskan thread utama dan membuat aplikasi lebih responsif.
Pelajari lebih lanjut di OffscreenCanvas—mempercepat operasi kanvas dengan pekerja web
Pramuat modul
Memuat modul secara otomatis dapat mengurangi waktu download dan pemrosesan. Tambahkan
rel="modulepreload"
ke elemen link yang mereferensikan modul JavaScript, dan browser akan mendapatkan
modul, mengurai dan mengompilasi, serta memasukkan hasilnya ke dalam peta modul yang siap
dijalankan.
Pelajari lebih lanjut di Modul pramuat.
Fungsi trigonometri di CSS
Pada tahun 2023, fungsi trigonometri dari spesifikasi Nilai dan Unit CSS Level 4
menjadi interoperabilitas. Artinya, fungsi sin()
, cos()
,
tan()
, asin()
, acos()
, atan()
, dan atan2()
adalah bagian dari Dasar Pengukuran 2023.
Pelajari cara menggunakan fungsi ini dan temukan beberapa kasus penggunaan di Fungsi trigonometri di CSS.
Atribut inert
Saat menandai elemen DOM sebagai inert
, Anda akan menghapus gerakan atau interaksi dari elemen tersebut. Atribut inert
menyebabkan browser mengabaikan elemen:
- Peristiwa
click
tidak diaktifkan jika pengguna mengklik elemen. - Elemen tidak akan mendapatkan fokus.
- Elemen dan kontennya dikecualikan dari hierarki aksesibilitas.
Tambahkan atribut ini ke elemen yang berada di luar layar atau disembunyikan. Untuk mengetahui informasi
selengkapnya, lihat Atribut inert
.
Subpetak dalam tata letak petak CSS
Nilai subgrid
untuk grid-template-columns
dan grid-template-rows
memungkinkan
Anda menggunakan jalur yang ditentukan pada petak induk, pada petak bertingkat. Artinya, Anda dapat
menyesuaikan elemen dalam petak bertingkat yang terpisah satu sama lain.
Di Sub-petak CSS, Anda akan menemukan beberapa contoh dan link ke banyak postingan dan contoh lainnya yang menyoroti kasus penggunaan sub-petak.
NumberFormat V3
Intl.NumberFormat V3 adalah serangkaian fitur baru untuk Intl.NumberFormat yang menjadi bagian dari Dasar Pengukuran selama tahun 2023. Fitur tambahannya adalah:
- Tiga fungsi baru untuk memformat rentang angka:
formatRange
,formatRangeToParts
, danselectRange
- Pengelompokan enum
- Opsi pembulatan dan presisi baru
- Prioritas pembulatan
- Menafsirkan string sebagai desimal
- Mode pembulatan
- Tampilan tanda negatif
Proposal untuk NumberFormat V3 menjelaskan setiap fitur baru ini.
Fullscreen API
Fullscreen API memungkinkan Anda menempatkan elemen seperti <video>
ke dalam mode
layar penuh dengan memanggil metode requestFullscreen()
. Class ini juga menyediakan metode untuk
mendeteksi apakah elemen dalam mode layar penuh, dan apakah dokumen
dalam status yang memungkinkan Anda meminta mode layar penuh.
Pelajari lebih lanjut di Panduan Fullscreen API di MDN ini.
Pemilih :has()
CSS
Baseline 2023 hanya membuat pemilih :has()
, yang akan hadir di Firefox
121 pada 19 Desember. Di antara penggunaan lainnya, pemilih ini berfungsi sebagai
pemilih induk, yang memungkinkan Anda memilih elemen berdasarkan hal-hal yang ada di
dalamnya. Misalnya, Anda dapat menerapkan CSS yang berbeda bergantung pada apakah ada
gambar di dalam elemen atau tidak.
Cari tahu lebih lanjut di :has(): pemilih keluarga.
Fitur lainnya yang bergabung dengan Dasar Pengukuran tahun ini
Fitur lain yang menjadi bagian dari Dasar Pengukuran tahun ini meliputi:
- Stylesheet yang Dapat Dibuat
- Pemilih turunan ke-n yang kompleks di CSS
- Sintaksis rentang untuk kueri media
- Mengimpor Maps
- Beberapa nilai untuk tampilan CSS
- @counter-style
- Properti CSS
counter-set
- Fungsi easing
linear()
- Origin Private File System (OPFS)
- Penetasan CSS, termasuk perubahan yang menambahkan penguraian longgar.
- Pemilih pseudo-class
:dir()
CSS - Unit panjang
cap
CSS - Masking CSS
- Dukungan kueri media untuk elemen
<source>
video HTML - Elemen
<search>
HTML - Pemuatan lambat elemen
<iframe>
(diluncurkan di Firefox 121 pada 19 Desember) - Unit tinggi baris CSS
lh
danrlh
Banyak fitur ini mencapai interoperabilitas melalui kerja kolaboratif di Interop 2023. Sangat menarik untuk melihat bagaimana fitur dapat dihadirkan melalui proses tersebut dan muncul di Dasar Pengukuran saat baru tersedia, yang memicu timer agar fitur tersebut tersedia secara luas. Hal ini akan membuat jalur yang lebih jelas untuk keputusan tentang kapan harus mengadopsi fitur dalam project Anda sendiri.