Farba posuvného pruhu - Triky CSS

Anonim

scrollbar-colorVlastnosť ovláda dve farby posuvníka: v farbe palca a farby stopy . scrollbar-colorje súčasťou konceptu Scrollbars Module úrovne 1 pracovnej skupiny CSS, ktorý je od tohto písania stále nedokončenou prácou.

Predtým scrollbar-colorvývojári nemali štandardný spôsob, ako zmeniť predvolený vzhľad posuvných pruhov prehľadávača, bez toho aby sa uchýlili k skrytiu posuvného pruhu pomocou overflow: hiddena vykresľovaniu posuvných pruhov založených na skripte JavaScript alebo k použitiu atribútov posuvného pruhu s predponou. S scrollbar-color, na druhú stranu, môžeme štýl posuvník tak, aby zodpovedala dizajnu, bez toho aby sa uchyľovať k prerobenie funkčnosť prehliadača alebo pomocou dodávateľa predpony.

.scrollable-element ( scrollbar-color: red yellow; )
Choďte do divočiny s vlastnými farbami

scrollbar-colorbude tiež akceptovať hodnoty darka lightzodpovedať preferenciám používateľa, ak používa v systéme Mac OSX niečo ako tmavý režim.

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

Od marca 2019 nie je podpora darka lighthodnoty k dispozícii v žiadnom prehliadači. je podporovaný vo Firefoxe. Podrobnosti nájdete v sekcii podpory prehliadača nižšie.

Syntax

scrollbar-color: auto | dark | light | ;

Hodnoty

scrollbar-color akceptuje nasledujúce hodnoty:

  • auto je predvolená hodnota a vykreslí štandardné farby posuvníka pre agenta používateľa.
  • dark povie užívateľskému agentovi, aby používal tmavšie posuvníky, aby sa zhodovali s aktuálnou farebnou schémou.
  • light povie užívateľskému agentovi, aby používal svetlejšie posuvníky, ktoré zodpovedajú aktuálnej farebnej schéme.
  • určuje dve farby, ktoré sa majú použiť pre posuvný panel. Prvá farba je pre „palec“ alebo pohyblivú časť posuvného pruhu, ktorý sa zobrazuje na vrchu. Druhá farba je pre „stopu“ alebo pevnú časť posuvného pruhu.

Príklad

Toto kombinuje novú syntax špecifikácie a predponu WebKit.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
91 * 87 11 88 * TP *

Mobil / tablet

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

Súvisiace

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Zdroje

  • Aktuálny stav posúvačov štýlu
  • Vlastné posúvače v aplikácii WebKit
  • Návrh modulu CSSWG Scrollbars
  • Zbierka prípadov použitia W3C na úpravu posuvného pruhu
  • Budúcnosť CSS: Posuvníky na dev.to
  • Chrómové vydanie 891944