Dasar pengukuran 2023

Rachel Andrew

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

Dengan definisi baru Dasar Pengukuran, adalah dua tahap dalam siklus proses fitur: saat fitur baru tersedia, dan saat tersedia secara luas setelah 30 bulan. Sebuah fitur menjadi bagian Dasar Pengukuran baru tersedia saat dapat dioperasikan bersama di hal berikut browser:

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

Baseline mendarat di Dapatkah Saya Menggunakan

Sebagai langkah selanjutnya dalam mengklarifikasi ketersediaan fitur, Baseline mulai mendarat di {i>Can I Use<i} mulai hari ini. Saat mengunjungi beberapa halaman di Dapatkah Saya Gunakan, Anda akan melihat badge yang memberi tahu Anda apakah fitur tersebut tersedia secara luas di Dasar Pengukuran.

Screenshot Dapatkah Saya Gunakan dengan badge yang tersedia secara luas di CSS Grid Layout.

Fitur yang baru tersedia di Dasar Pengukuran juga akan menampilkan badge, beserta tahun tersedianya produk tersebut. Apa pun yang dapat dioperasikan dengan set browser inti tahun ini adalah bagian dari Dasar Pengukuran 2023.

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

Di sisa postingan ini, cari tahu berbagai fitur yang meraih pencapaian ini selama tahun 2023. Semua fitur ini Dasar pengukuran 2023—baru tersedia.

Ukuran kueri penampung dan unit kueri penampung

Ukuran kueri penampung memungkinkan Anda melakukan kueri ukuran elemen, dengan cara yang sama seperti memungkinkan Anda melakukan kueri ukuran area pandang. Mereka membuat komponen yang dapat digunakan kembali jauh lebih mudah dengan membiarkan Anda membuat komponen yang bereaksi terhadap ukuran area tempat mereka ditempatkan.

Dukungan Browser

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

Sumber

Desain kartu berikut berubah bergantung pada lebar komponen. Pelajari lebih lanjut di Kueri container berada 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 HD gamuts.

Model warna baru

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

Dukungan Browser

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

Sumber

Screenshot editor gradient.style dengan gradasi cerah dari 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. color-mix() memungkinkan pencampuran satu warna ke warna lain, di salah satu ruang warna. Di CSS berikut, 25% warna biru dicampur ke putih, di ruang warna sRGB.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Dukungan Browser

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

Sumber

Pelajari color-mix() lebih lanjut.

Fungsi color()

color() fungsi yang dapat digunakan untuk ruang warna apa pun yang menentukan warna dengan R, G, dan B saluran TV Anda. 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 warna dan fungsi baru, bersama dengan informasi kapan harus digunakan.

Streaming kompresi

Compression Streams API adalah JavaScript API untuk mengompresi dan mendekompresi aliran data. Aplikasi penggunaan kompresi bawaan ini tidak perlu lagi menyertakan pustaka kompresi.

Dukungan Browser

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

Sumber

Pelajari lebih lanjut di Aliran kompresi kini didukung di semua browser.

Kanvas di luar layar

Sebelum OffscreenCanvas, kemampuan menggambar kanvas dikaitkan dengan <canvas> , yang berarti variabel tersebut bergantung langsung pada DOM. OffscreenCanvas memisahkan DOM dari Canvas API dengan memindahkan kanvas keluar-layar.

Berkat pemisahan ini, rendering OffscreenCanvas akan sepenuhnya terlepas dari DOM, sehingga memberikan beberapa peningkatan kecepatan dibandingkan kanvas biasa karena tidak ada sinkronisasi di antara keduanya. Alat ini juga bisa digunakan untuk memindahkan merender pekerjaan ke Web Worker, meskipun tidak ada DOM yang tersedia, sehingga thread utama dan membuat aplikasi lebih responsif.

Dukungan Browser

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

Sumber

Pelajari lebih lanjut di OffscreenCanvas—mempercepat operasi kanvas dengan pekerja web

Pramuat modul

Pramuat modul dapat mengurangi waktu download dan pemrosesan. Tambah rel="modulepreload" ke elemen link yang merujuk ke modul JavaScript, dan browser mendapatkan modul, mengurai dan mengompilasinya, dan menempatkan hasilnya ke dalam peta modul siap untuk melaksanakannya.

Dukungan Browser

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

Sumber

Pelajari lebih lanjut di Pramuat modul.

Fungsi trigonometri di CSS

Pada tahun 2023, fungsi trigonometri dari Nilai CSS dan Unit Level 4 spesifikasi menjadi interoperabilitas. Ini berarti fungsi sin(), cos(), tan(), asin(), acos(), atan(), dan atan2() adalah bagian dari Dasar Pengukuran 2023.

Dukungan Browser

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

Sumber

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

Pelajari cara menggunakan fungsi-fungsi ini dan temukan beberapa kasus penggunaan di Fungsi trigonometri di CSS.

Atribut inert

Saat menandai elemen DOM sebagai inert, Anda akan menghapus perpindahan atau interaksi dari anotasi. 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.

Dukungan Browser

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

Sumber

Tambahkan atribut ini ke elemen yang berada di balik layar atau tersembunyi. Untuk selengkapnya informasinya, lihat Atribut inert.

Subkisi pada tata letak petak CSS

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

Dukungan Browser

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

Sumber

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

NumberFormat V3

Intl.NumberFormat V3 adalah serangkaian 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
  • Enum pengelompokan
  • Opsi pembulatan dan presisi baru
  • Prioritas pembulatan
  • Menginterpretasikan {i>string<i} sebagai desimal
  • Mode pembulatan
  • Tampilan tanda negatif

Dukungan Browser

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

Sumber

Proposal untuk NumberFormat V3 menjelaskan setiap fitur baru ini.

Fullscreen API

Fullscreen API memungkinkan Anda menempatkan elemen seperti <video> ke dalam layar penuh dengan memanggil metode requestFullscreen(). {i>Software<i} ini juga menyediakan metode untuk mendeteksi apakah suatu elemen berada dalam mode layar penuh, dan apakah dokumen dalam keadaan yang memungkinkan Anda meminta mode layar penuh.

Dukungan Browser

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

Sumber

Pelajari lebih lanjut dalam Panduan untuk Fullscreen API di MDN.

Pemilih :has() CSS

Hanya membuat Dasar Pengukuran 2023 adalah pemilih :has(), yang akan mendarat di Firefox 121 pada tanggal 19 Desember. Di antara kegunaan lainnya, pemilih ini bertindak sebagai pemilih induk, yang memungkinkan Anda memilih elemen berdasarkan hal-hal yang ada di dalamnya anotasi. Misalnya, Anda dapat menerapkan CSS yang berbeda tergantung pada ada atau tidak gambar di dalam elemen.

Dukungan Browser

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

Sumber

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 dari fitur ini dapat interoperabilitas melalui sistem kerja kolaboratif di Interop 2023. Sangat menarik untuk melihat bagaimana fitur dapat dibawa melalui proses tersebut dan ditempatkan di Dasar Pengukuran sebagai baru tersedia, yang memicu pengaturan waktu agar file itu tersedia secara luas. Hal ini menghasilkan jalur yang lebih jelas untuk mengambil keputusan kapan harus menggunakan fitur-fitur dalam proyek Anda sendiri.