Barva posuvníku - Triky CSS

Anonim

scrollbar-colorVlastnost ovládá dvě barvy posuvníku: v barvě palce a barvy stopy . scrollbar-colorje součástí konceptu Scrollbars Module úrovně 1 pracovní skupiny CSS, který je od tohoto psaní stále nedokončenou prací.

Předtím scrollbar-colorvývojáři neměli standardní způsob, jak změnit výchozí vzhled posuvných lišt prohlížeče, aniž by se uchýlili ke skrytí posuvného pruhu pomocí overflow: hiddena vykreslování posuvných lišt založených na JavaScriptu nebo pomocí atributů posuvného pruhu s předponou prohlížeče. S scrollbar-color, na druhou stranu, můžeme styl posuvník tak, aby odpovídala designu, aniž by se uchylovat k předělání funkčnost prohlížeče nebo pomocí dodavatele předpony.

.scrollable-element ( scrollbar-color: red yellow; )
Vydejte se divokými barvami

scrollbar-colorbude také přijímat hodnoty darka lightodpovídat preferencím uživatele, pokud v systému Mac OSX používá něco jako temný režim.

.scrollable-element ( scrollbar-color: dark; )

Od března 2019 není podpora darka lighthodnoty k dispozici v žádném prohlížeči. je podporován ve Firefoxu. Podrobnosti najdete níže v části podpory prohlížeče.

Syntax

scrollbar-color: auto | dark | light | ;

Hodnoty

scrollbar-color přijímá následující hodnoty:

  • auto je výchozí hodnota a vykreslí standardní barvy posuvníku pro agenta uživatele.
  • dark řekne uživatelskému agentovi, aby používal tmavší posuvníky, aby odpovídaly aktuálnímu barevnému schématu.
  • light řekne uživatelskému agentovi, aby používal světlejší posuvníky, aby odpovídaly aktuálnímu barevnému schématu.
  • určuje dvě barvy, které se mají použít pro posuvník. První barva je pro „palec“ nebo pohyblivou část posuvného pruhu, který se zobrazuje nahoře. Druhá barva je pro „stopu“ nebo pevnou část posuvného pruhu.

Příklad

To kombinuje novou syntaxi spec a předponu WebKit.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
91 * 87 11 88 * TP *

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Ne 81 * 14,0-14,4 *

Příbuzný

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Zdroje

  • Aktuální stav posuvníků stylu
  • Vlastní posuvníky ve WebKitu
  • Návrh modulu CSSWG Scrollbars
  • Sbírka případů použití W3C pro úpravy posuvného pruhu
  • Budoucnost CSS: posuvníky na dev.to
  • Chromové vydání 891944