Baseline akan hadir di caniuse.com. Dalam postingan ini, pelajari integrasi, dan temukan juga beberapa fitur yang menjadi bagian dari Dasar Pengukuran pada tahun 2023.
Dengan definisi baru Dasar Pengukuran, ada dua tahap dalam siklus proses fitur. Pertama, saat baru tersedia, lalu saat tersedia secara luas setelah 30 bulan. Fitur menjadi bagian dari Dasar Pengukuran 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 mengunjungi 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 ketersediaannya. Jadi, apa pun yang menjadi interoperabilitas di seluruh browser inti yang ditetapkan tahun ini adalah bagian dari Baseline 2023.
Di bagian selanjutnya dari postingan ini, cari tahu berbagai fitur yang meraih pencapaian ini selama tahun 2023. Semua fitur ini tersedia untuk 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 yang memungkinkan Anda membuat kueri ukuran area pandang. Mereka membuat pembuatan komponen yang dapat digunakan kembali jauh lebih mudah, karena Anda dapat membuat komponen yang bereaksi terhadap ukuran area tempat mereka 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() 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 definisi tinggi CSS memberi Anda lebih banyak contoh ruang warna dan fungsi baru, beserta informasi tentang waktu penggunaannya.
Aliran kompresi
Compression Streams API adalah JavaScript API untuk mengompresi dan mendekompresi aliran data. Dengan menggunakan kompresi bawaan ini, aplikasi 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 secara langsung bergantung pada DOM. OffscreenCanvas, seperti namanya,
memisahkan DOM dan Canvas API dengan memindahkannya ke luar layar.
Berkat pemisahan ini, rendering OffscreenCanvas sepenuhnya terlepas dari DOM dan oleh karena itu menawarkan beberapa peningkatan kecepatan dibandingkan kanvas biasa karena tidak ada sinkronisasi di antara keduanya. Yang lebih menarik adalah dapat digunakan untuk memindahkan pekerjaan rendering ke Web Worker, meskipun tidak ada DOM yang tersedia, sehingga membebaskan thread utama dan membuat aplikasi menjadi 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 mengompilasi, serta menempatkan hasilnya ke dalam peta modul yang siap dijalankan.
Pelajari lebih lanjut di artikel Modul pramuat.
Fungsi trigonometri dalam CSS
Pada tahun 2023, fungsi trigonometri dari spesifikasi Nilai CSS dan Unit Level 4 dapat dioperasikan. Ini berarti fungsi sin(), cos(), tan(), asin(), acos(), atan(), dan atan2() adalah bagian dari Dasar Pengukuran 2023.
Pelajari cara menggunakan fungsi tersebut, dan temukan beberapa kasus penggunaan dalam Fungsi trigonometri di CSS.
Atribut inert
Inert berarti kurangnya kemampuan untuk berpindah, jadi saat Anda menandai sesuatu yang inert, Anda menghapus gerakan atau interaksi dari elemen DOM tersebut. Atribut inert menyebabkan browser mengabaikan elemen.
- Peristiwa
clicktidak akan diaktifkan jika pengguna mengklik elemen. - Elemen tidak akan mendapatkan fokus.
- Elemen dan kontennya dikecualikan dari hierarki aksesibilitas.
Atribut ini harus ditambahkan ke elemen yang berada di balik layar atau tersembunyi. Anda dapat mempelajari lebih lanjut di 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 bahwa Anda dapat menyelaraskan elemen di dalam petak bertingkat ini satu sama lain.
Dalam artikel subgrid CSS, Anda akan menemukan beberapa contoh dan link ke banyak postingan serta contoh lain yang menyoroti kasus penggunaan subgrid.
Format Angka V3
Intl.NumberFormat V3 adalah serangkaian fitur baru untuk Intl.NumberFormat, yang menjadi bagian dari Baseline 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.
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 berada dalam status yang memungkinkan Anda meminta mode layar penuh.
Pelajari lebih lanjut di Panduan API Layar Penuh di MDN.
Pemilih CSS :has()
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 item 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
Postingan ini telah membagikan beberapa fitur utama yang menjadi bagian dari Baseline tahun ini, tetapi masih ada banyak fitur lainnya.
- 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
capCSS - 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
lhdanrlh
Banyak dari fitur ini mencapai interoperabilitas melalui kerja kolaboratif pada Interop 2023. Sangat menarik untuk melihat bagaimana fitur dapat dibawa melalui proses tersebut, dan mendarat di Baseline sebagai baru tersedia, yang memulai timer untuk menyediakannya secara luas. Hal ini menciptakan jalur yang lebih jelas untuk mengambil keputusan terkait kapan harus mengadopsi fitur dalam project Anda sendiri.