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
, danselectRange
- 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
danrlh
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.