Dasar pengukuran 2023

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.

Screenshot Can I Use dengan badge yang tersedia secara luas di Tata Letak Petak CSS.

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.

Screenshot Dapatkah Saya Gunakan dengan badge yang baru tersedia di Kueri Penampung.

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.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Screenshot editor gradient.style dengan gradien cerah merah muda ke biru.
Coba ruang warna baru menggunakan gradient.style.

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);
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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.

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

Demo ini menggunakan fungsi trigonometri untuk memindahkan item pada jalur melingkar di sekitar titik tengah.

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.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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, dan selectRange
  • Pengelompokan enum
  • Opsi pembulatan dan presisi baru
  • Prioritas pembulatan
  • Menafsirkan string sebagai desimal
  • Mode pembulatan
  • Tampilan tanda negatif

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

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.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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:

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.