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 belum terbiasa dengan fitur ini, baca artikel saya
prefers-color-scheme
: Halo kegelapan, teman lama saya,
tempat saya mendokumentasikan semua yang saya ketahui tentang cara menciptakan pengalaman mode gelap yang luar biasa.
Salah satu potongan teka-teki yang hanya disebutkan secara singkat dalam artikel adalah
properti CSS color-scheme
dan tag meta yang sesuai dengan nama yang sama.
Keduanya mempermudah pekerjaan Anda sebagai developer
dengan memungkinkan Anda mengikutsertakan halaman ke 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 apa pun sendiri.
Dukungan browser
prefers-color-scheme
color-scheme
Stylesheet agen pengguna
Sebelum melanjutkan, saya akan 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 menjadi hitam, dan warna latar belakang putih, tetapi ada juga perbedaan penting (dan terkadang menjengkelkan), misalnya, cara mereka menata gaya kontrol formulir.
Pelajari lebih lanjut
stylesheet UA WebKit
dan fungsinya terkait mode gelap.
(Lakukan penelusuran teks lengkap untuk "dark" di stylesheet.)
Default yang disediakan oleh stylesheet berubah berdasarkan apakah mode gelap aktif atau nonaktif.
Untuk menggambarkan hal ini, berikut salah satu aturan CSS yang menggunakan
class semu :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.
Keduanya adalah warna semantik internal WebKit.
Ternyata, CSS memiliki warna sistem semantik yang terstandardisasi.
Nilai ini ditentukan 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 berjalan bersama dan tidak boleh digunakan secara terpisah.
Stylesheet UA dapat menggunakan warna eksklusifnya sendiri atau warna sistem semantik standar, 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 ke putih secara kondisional,
dan Canvas
(atau -apple-system-control-background
) akan disetel ke hitam.
Kemudian, stylesheet UA menetapkan CSS berikut hanya sekali, 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 Modul Penyesuaian Warna CSS 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 yang nyaman untuk dirender.
Nilai-nilai ini dinegosiasikan dengan preferensi pengguna, sehingga menghasilkan skema warna
pilihan 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:
normal
Menunjukkan bahwa elemen sama sekali tidak mengetahui skema warna, sehingga elemen harus dirender dengan skema warna default browser.[ light | dark ]+
Menunjukkan bahwa elemen mengetahui dan dapat menangani skema warna yang tercantum, serta menyatakan preferensi yang diurutkan di antara skema warna tersebut.
Dalam daftar ini, light
mewakili skema warna terang,
dengan warna latar belakang terang dan warna latar depan gelap,
sedangkan dark
mewakili sebaliknya, dengan warna latar belakang gelap dan warna latar depan terang.
Untuk semua elemen, rendering dengan skema warna harus menyebabkan warna yang digunakan di semua UI yang disediakan browser untuk elemen tersebut cocok 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,
serta 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 menerapkan properti CSS color-scheme
, CSS harus didownload terlebih dahulu (jika direferensikan melalui <link rel="stylesheet">
) dan diurai.
Untuk membantu agen pengguna merender latar belakang halaman dengan skema warna yang diinginkan 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 mengadopsi skema pilihan dengan lebih cepat.
Meskipun untuk halaman dasar pengukuran absolut tidak diperlukan aturan CSS tambahan, 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 rgb(0,0,238)
klasik, memiliki rasio kontras yang tidak memadai sebesar 2,23:1 pada latar belakang hitam dan gagal baik pada AA WCAG maupun persyaratan WCAG AAA.
Saya telah membuka bug untuk Chrome, WebKit, dan Firefox serta masalah meta pada HTML Standard untuk memperbaikinya.
Lakukan interaksi dengan prefers-color-scheme
Interaksi properti CSS color-scheme
dan tag meta yang sesuai
dengan fitur media preferensi pengguna prefers-color-scheme
pada awalnya mungkin tampak membingungkan.
Bahkan, keduanya sangat cocok satu sama lain.
Hal yang paling penting untuk dipahami adalah bahwa color-scheme
secara eksklusif menentukan tampilan default,
sedangkan prefers-color-scheme
menentukan tampilan bergaya.
Untuk lebih memperjelasnya, 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 halaman mendukung tema gelap dan terang,
dengan preferensi untuk tema gelap.
Bergantung pada apakah sistem operasi disetel ke mode gelap atau terang, seluruh halaman akan tampak terang dalam warna 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 di halaman.
Pilihannya adalah gainsboro
atau darkslategray
.
Tampilan elemen <button>
dikontrol oleh stylesheet agen pengguna.
color
disetel ke
warna sistem ButtonText
, sedangkan background-color
dan keempat 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)
(kegelapan) menjadi rgba(255, 255, 255, 0.847)
(keputihan), karena agen pengguna memperbarui ButtonFace
secara dinamis berdasarkan skema warna.
Hal yang sama berlaku untuk color
elemen <button>
yang ditetapkan ke ButtonText
warna sistem yang sesuai.
Demo
Anda dapat melihat efek color-scheme
yang diterapkan ke sejumlah besar elemen HTML
dalam demo di Glitch.
Demo tersebut sengaja menampilkan pelanggaran
AA WCAG dan WCAG AAA
dengan warna link yang disebutkan dalam peringatan di atas.
Ucapan terima kasih
Properti CSS color-scheme
dan tag meta yang sesuai diterapkan oleh
Rune Lillesveen.
Rune juga merupakan co-editor spesifikasi Level 1 Modul Penyesuaian Warna CSS.
Banner besar oleh
Philippe Leone
di Unsplash.