Properti CSS color-scheme dan tag meta yang sesuai
memungkinkan developer mengikutsertakan halaman mereka ke default khusus tema dari stylesheet agen pengguna.
Latar belakang
Fitur media preferensi pengguna prefers-color-scheme
Fitur media
preferensi pengguna prefers-color-scheme
memberi developer kontrol penuh atas tampilan halaman mereka.
Jika Anda tidak terbiasa dengannya, baca artikel saya
prefers-color-scheme: Halo kegelapan, teman lama saya,
yang berisi semua hal yang saya ketahui tentang cara membuat pengalaman mode gelap yang luar biasa.
Satu bagian teka-teki yang hanya disebutkan secara singkat dalam artikel ini adalah
properti CSS color-scheme dan tag meta yang sesuai dengan nama yang sama.
Keduanya membuat hidup Anda sebagai developer lebih mudah
dengan memungkinkan Anda mengikutsertakan halaman ke setelan default khusus tema dari stylesheet agen pengguna,
seperti, misalnya, kontrol formulir, scroll bar, serta warna sistem CSS.
Pada saat yang sama, fitur ini mencegah browser menerapkan transformasi sendiri.
Dukungan browser
prefers-color-scheme
color-scheme
Stylesheet agen pengguna
Sebelum melanjutkan, izinkan saya menjelaskan secara singkat apa itu stylesheet agen pengguna. Sering kali, Anda dapat menganggap kata agen pengguna (UA) sebagai cara yang elegan untuk menyebut browser. Stylesheet UA menentukan tampilan dan nuansa default halaman. Seperti namanya, stylesheet UA adalah sesuatu yang bergantung pada UA yang dimaksud. Anda dapat melihat stylesheet UA Chrome (dan Chromium) dan membandingkannya dengan Firefox atau Safari (dan WebKit). Biasanya, stylesheet UA menyetujui sebagian besar hal. Misalnya, semuanya membuat link berwarna biru, teks umum hitam, dan warna latar belakang menjadi putih, tetapi ada juga perbedaan penting (dan terkadang mengganggu), misalnya, cara mereka menata gaya kontrol formulir.
Lihat lebih dekat stylesheet UA WebKit dan pengaruhnya terkait mode gelap.
(Lakukan penelusuran teks lengkap untuk "gelap" di stylesheet.)
Default yang disediakan oleh stylesheet berubah berdasarkan apakah mode gelap aktif atau nonaktif.
Untuk menggambarkan hal ini, berikut adalah salah satu aturan CSS yang menggunakan
class pseudo :matches
dan variabel internal WebKit seperti -apple-system-control-background,
serta perintah preprosesor internal WebKit #if defined:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
Anda akan melihat beberapa nilai non-standar untuk properti color dan background-color di atas.
text atau -apple-system-control-background bukan warna CSS yang valid.
Yaitu warna semantik internal WebKit.
Ternyata, CSS memiliki warna sistem semantik yang terstandardisasi.
Semuanya ditetapkan dalam
CSS Color Module Level 4.
Misalnya,
Canvas
(berbeda dengan tag <canvas>)
adalah untuk latar belakang konten atau dokumen aplikasi,
sedangkan
CanvasText
adalah untuk teks dalam konten atau dokumen aplikasi.
Keduanya digunakan bersamaan dan tidak boleh digunakan secara terpisah.
Stylesheet UA dapat menggunakan warna eksklusif atau warna sistem semantiknya sendiri,
untuk menentukan cara elemen HTML harus dirender secara default.
Jika sistem operasi disetel ke mode gelap atau menggunakan tema gelap,
CanvasText (atau text) akan disetel bersyarat ke putih,
dan Canvas (atau -apple-system-control-background) akan disetel ke hitam.
Stylesheet UA kemudian menetapkan CSS berikut sekali saja, dan mencakup mode terang dan gelap.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
Properti CSS color-scheme
Spesifikasi CSS Color Adjustment Module Level 1 memperkenalkan model dan kontrol atas penyesuaian warna otomatis oleh agen pengguna dengan tujuan menangani preferensi pengguna seperti mode gelap, penyesuaian kontras, atau skema warna tertentu yang diinginkan.
Properti color-scheme
yang ditentukan di dalamnya memungkinkan elemen untuk menunjukkan
skema warna mana yang nyaman untuk dirender.
Nilai ini dinegosiasikan dengan preferensi pengguna, sehingga menghasilkan skema warna terpilih
yang memengaruhi hal-hal antarmuka pengguna (UI) seperti warna default kontrol formulir
dan scroll bar, serta nilai warna sistem CSS yang digunakan.
Nilai-nilai berikut saat ini didukung:
normalMenunjukkan bahwa elemen tidak mengetahui skema warna sama sekali, sehingga elemen harus dirender dengan skema warna default browser.[ light | dark ]+Menunjukkan bahwa elemen tersebut mengetahui dan dapat menangani skema warna yang tercantum, dan menyatakan preferensi yang diurutkan di antara skema warna tersebut.
Dalam daftar ini, light merepresentasikan skema warna terang,
dengan warna latar belakang terang dan warna latar depan yang gelap,
sedangkan dark mewakili sebaliknya, dengan warna latar belakang gelap dan warna latar depan yang terang.
Untuk semua elemen, rendering dengan skema warna harus menyebabkan warna yang digunakan di semua UI yang disediakan browser agar elemen sesuai dengan intent skema warna. Contohnya adalah scroll bar, garis bawah periksa ejaan, kontrol formulir, dll.
Pada elemen :root, rendering dengan skema warna
juga harus memengaruhi warna permukaan kanvas (yaitu, warna latar belakang global),
nilai awal properti color, dan nilai warna sistem yang digunakan,
dan juga harus memengaruhi scroll bar area pandang.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
Tag meta color-scheme
Untuk memenuhi properti CSS color-scheme, CSS harus didownload terlebih dahulu (jika dirujuk melalui <link rel="stylesheet">) dan diurai.
Untuk membantu agen pengguna dalam merender latar belakang halaman dengan skema warna yang diinginkan dengan segera,
nilai color-scheme juga dapat diberikan dalam elemen
<meta name="color-scheme">.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
Menggabungkan color-scheme dan prefers-color-scheme
Karena tag meta dan properti CSS (jika diterapkan ke elemen :root) pada akhirnya menghasilkan perilaku yang sama, sebaiknya tentukan skema warna melalui tag meta agar browser dapat lebih cepat mengadopsi skema yang dipilih.
Meskipun untuk halaman dasar pengukuran absolut tidak ada aturan CSS tambahan yang diperlukan,
dalam kasus umum, Anda harus selalu menggabungkan color-scheme dengan prefers-color-scheme.
Misalnya, warna CSS WebKit eksklusif -webkit-link, yang digunakan oleh WebKit dan Chrome
untuk link biru link klasik rgb(0,0,238),
memiliki rasio kontras yang tidak memadai sebesar 2,23:1 pada latar belakang hitam dan
tidak lulus
baik WCAG AA maupun persyaratan
AAA WCAG.
Saya telah memperbaiki bug untuk Chrome, WebKit, dan Firefox, serta masalah meta di HTML Standard agar masalah ini teratasi.
Berinteraksi dengan prefers-color-scheme
Interaksi properti CSS color-scheme dan tag meta yang sesuai
dengan fitur media preferensi pengguna prefers-color-scheme mungkin tampak membingungkan pada awalnya.
Bahkan, mereka bermain bersama dengan sangat baik.
Hal terpenting yang harus dipahami adalah bahwa color-scheme
secara eksklusif menentukan tampilan default,
sedangkan prefers-color-scheme menentukan tampilan yang memiliki gaya.
Untuk lebih jelasnya, asumsikan halaman berikut:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
Kode CSS inline di halaman
menetapkan background-color elemen <fieldset> ke gainsboro dalam kasus umum,
dan ke darkslategray jika pengguna lebih memilih skema warna dark
sesuai dengan fitur media preferensi pengguna prefers-color-scheme.
Melalui elemen <meta name="color-scheme" content="dark light">,
halaman memberi tahu browser bahwa tema gelap dan terang didukung
dengan preferensi tema gelap.
Bergantung pada apakah sistem operasi disetel ke mode gelap atau terang, seluruh halaman akan tampak terang pada gelap atau sebaliknya, berdasarkan stylesheet agen pengguna. Tidak ada CSS tambahan yang disediakan developer untuk mengubah teks paragraf atau warna latar belakang halaman.
Perhatikan bagaimana background-color elemen <fieldset> berubah
berdasarkan apakah mode gelap diaktifkan atau tidak, dengan mengikuti aturan
di stylesheet inline yang disediakan developer pada halaman.
Salah satu dari gainsboro atau darkslategray.
background-color elemen <fieldset> adalah gainsboro sesuai stylesheet developer inline.
background-color elemen <fieldset> adalah darkslategray sesuai stylesheet developer inline.
Tampilan elemen <button> dikontrol oleh stylesheet agen pengguna.
color disetel ke
warna sistem ButtonText, dan background-color serta keempat border-color disetel ke warna sistem
ButtonFace.
background-color dan berbagai
border-color disetel ke warna sistem
ButtonFace.
Sekarang perhatikan bagaimana border-color elemen <button> berubah.
Nilai yang dihitung untuk border-top-color dan border-bottom-color
beralih dari rgba(0, 0, 0, 0.847) (kehitaman) ke rgba(255, 255, 255, 0.847) (putih),
karena agen pengguna memperbarui ButtonFace secara dinamis berdasarkan skema warna.
Hal yang sama berlaku untuk color elemen <button>
yang ditetapkan ke warna sistem ButtonText yang sesuai.
border-top-color
dan border-bottom-color yang ditetapkan ke ButtonFace
di stylesheet agen pengguna sekarang adalah rgba(0, 0, 0, 0.847).
border-top-color
dan border-bottom-color yang keduanya ditetapkan ke ButtonFace
di stylesheet agen pengguna sekarang menjadi rgba(255, 255, 255, 0.847).
Demo
Anda dapat melihat efek color-scheme yang diterapkan ke sejumlah besar elemen HTML dalam demo di Glitch.
Demo sengaja menampilkan pelanggaran
WCAG AA dan AAA WCAG dengan warna link yang disebutkan dalam peringatan di atas.
color-scheme: light.
color-scheme: dark.
Perhatikan
pelanggaran
WCAG AA dan WCAG AAA
dengan warna link.
Ucapan terima kasih
Properti CSS color-scheme dan tag meta terkait diimplementasikan oleh Rune Lillesveen.
Rune juga merupakan co-editor spesifikasi CSS Color Adjustment Module Level 1.
Banner besar oleh
Philippe Leone
di Unsplash.