Dasar pengukuran 2023

Baseline akan hadir di caniuse.com. Dalam postingan ini, pelajari integrasi dan temukan beberapa fitur yang menjadi bagian dari Dasar Pengukuran pada tahun 2023.

Dengan definisi baru Dasar Pengukuran, ada dua tahap dalam siklus proses fitur: saat baru tersedia, dan saat tersedia secara luas setelah 30 bulan. Fitur menjadi bagian dari Baseline baru tersedia saat dapat dioperasikan di browser berikut:

• Safari (macOS dan iOS)
• Firefox (desktop dan Android)
• Chrome (desktop dan Android)
• Edge (desktop)

Dasar pengukuran dimulai pada Dapatkah Saya Menggunakan

Sebagai langkah berikutnya dalam mengklarifikasi ketersediaan fitur, Dasar Pengukuran mulai menggunakan Dapatkah saya Gunakan mulai hari ini. Saat membuka beberapa halaman di "Can I Use", Anda akan melihat badge yang memberi tahu apakah fitur ini tersedia secara luas di Dasar Pengukuran.

Fitur yang baru tersedia di Baseline juga akan menampilkan badge, beserta tahun tersedianya fitur tersebut. Apa pun yang dapat dioperasikan bersama di seluruh browser inti yang ditetapkan tahun ini adalah bagian dari Baseline 2023.

Di bagian selanjutnya dari postingan ini, cari tahu tentang fitur-fitur yang meraih pencapaian ini selama tahun 2023. Semua fitur ini tersedia dalam versi Baseline 2023—baru tersedia.

Mengukur kueri penampung dan unit kueri penampung

Kueri penampung ukuran memungkinkan Anda membuat kueri ukuran elemen, dengan cara yang sama seperti kueri media memungkinkan Anda membuat kueri ukuran area pandang. Ini membuat pembuatan komponen yang dapat digunakan kembali jauh lebih mudah dengan memungkinkan Anda membuat komponen yang bereaksi terhadap ukuran area tempatnya ditempatkan.

Desain kartu berikut berubah bergantung pada lebar komponen. Pelajari lebih lanjut di Kueri penampung ditempatkan di browser stabil.

Ruang dan fungsi warna baru

CSS kini mendukung ruang warna yang memungkinkan Anda mengakses warna di luar gamut sRGB. Ini berarti Anda dapat mendukung layar HD (definisi tinggi) menggunakan warna dari gamut HD.

Model warna baru

Sekarang di Baseline, fungsi warna lch(), lab(), oklch(), dan oklab() memberikan akses ke model warna LCH, Lab, OKLCH, dan OKLab.

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. Pada CSS berikut, 25% warna biru dicampur menjadi putih di 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() mengambil parameter ruang warna terlebih dahulu, lalu serangkaian nilai saluran untuk RGB, dan (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 definisi tinggi CSS memberi Anda lebih banyak contoh ruang dan fungsi warna baru, beserta informasi tentang waktu penggunaannya.

Aliran 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 Aliran kompresi kini didukung di semua browser.

Kanvas luar layar

Sebelum OffscreenCanvas, kemampuan menggambar kanvas terikat dengan elemen <canvas>, yang berarti kemampuan tersebut 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. Ini juga dapat digunakan untuk memindahkan pekerjaan rendering ke Web Worker, meskipun tidak ada DOM yang tersedia, sehingga mengosongkan thread utama dan membuat aplikasi lebih responsif.

Pelajari lebih lanjut di OffscreenCanvas—mempercepat operasi kanvas Anda dengan web worker

Pramuat modul

Modul pramuat dapat mengurangi waktu download dan pemrosesan. Tambahkan rel="modulepreload" ke elemen link yang merujuk ke modul JavaScript, dan browser akan mendapatkan modul, mengurai dan mengompilasinya, serta menempatkan hasilnya ke dalam peta modul yang siap dieksekusi.

Pelajari lebih lanjut di Modul pramuat.

Fungsi trigonometri dalam CSS

Pada tahun 2023, fungsi trigonometri dari spesifikasi Nilai CSS dan Unit Level 4 menjadi dapat dioperasikan. Ini berarti 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 dalam Fungsi trigonometri di CSS.

Atribut inert

Jika Anda menandai elemen DOM sebagai inert, gerakan atau interaksi akan dihapus dari elemen tersebut. Atribut inert menyebabkan browser mengabaikan elemen:

• Peristiwa click tidak akan 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 balik layar atau tersembunyi. Untuk informasi selengkapnya, lihat Atribut inert.

Subgrid dalam tata letak petak CSS

Nilai subgrid untuk grid-template-columns dan grid-template-rows memungkinkan Anda menggunakan jalur yang ditentukan di petak induk, di petak bertingkat. Ini berarti Anda dapat menyelaraskan elemen dalam petak bertingkat yang terpisah satu sama lain.

Di subgrid CSS, Anda akan menemukan beberapa contoh dan link ke banyak postingan dan contoh lain yang menyoroti kasus penggunaan subgrid.

Format Angka V3

Intl.NumberFormat V3 adalah kumpulan fitur baru untuk Intl.NumberFormat yang menjadi bagian dari Dasar Pengukuran selama tahun 2023. Fitur tambahan tersebut adalah:

• Tiga fungsi baru untuk memformat rentang angka: formatRange, formatRangeToParts, dan selectRange
• Mengelompokkan 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 suatu elemen berada dalam mode layar penuh, dan apakah dokumen dalam status yang memungkinkan Anda meminta mode layar penuh.

Pelajari lebih lanjut di Panduan API Layar Penuh di MDN.

Pemilih :has() CSS

Hanya membuat Baseline 2023 adalah pemilih :has(), yang akan tersedia di Firefox 121 pada 19 Desember. Di antara kegunaan 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 selengkapnya di :has(): pemilih keluarga.

Lebih banyak fitur yang bergabung dengan Baseline tahun ini

Fitur lain yang menjadi bagian dari Baseline tahun ini mencakup:

• Stylesheet yang Dapat Dibangun
• Pemilih turunan ke-n yang kompleks di CSS
• Sintaksis rentang untuk kueri media
• Mengimpor Maps
• Beberapa nilai untuk tampilan CSS
• @gaya penghitung
• Properti CSS counter-set
• Fungsi easing linear()
• Sistem File Pribadi Origin (OPFS)
• Penyarangan CSS, termasuk perubahan yang menambahkan penguraian longgar.
• Pemilih class pseudo :dir() CSS
• Unit panjang cap CSS
• Penyamaran CSS
• Dukungan kueri media untuk elemen <source> video HTML
• Elemen <search> HTML
• Pemuatan lambat elemen <iframe> (terbuka di Firefox 121 pada 19 Desember)
• Unit tinggi baris CSS lh dan rlh

Banyak dari fitur ini mencapai interoperabilitas melalui kerja kolaboratif pada Interop 2023. Sangat menarik melihat bagaimana fitur dapat dibawa melalui proses tersebut dan ditempatkan di Baseline sebagai baru tersedia, yang memulai timer untuk menyediakannya secara luas. Dengan demikian, jalur yang tersedia lebih jelas untuk mengambil keputusan terkait kapan harus mengadopsi fitur dalam project Anda sendiri.