Drsna barva - CSS-triki

Anonim

scrollbar-colorLastnost nadzoruje dve barve drsnega traku: v barvi palcem in barve tira . scrollbar-colorje del osnutka modula drsnih trakov delovne skupine CSS na ravni 1, ki od tega pisanja še poteka.

Pred tem scrollbar-colorrazvijalci niso imeli običajnega načina, da bi spremenili privzeti videz drsnih trakov brskalnika, ne da bi se zatekli k skrivanju drsnika prek overflow: hiddenin upodabljanju drsnih trakov, ki temeljijo na JavaScript, ali z uporabo atributov drsne vrstice, ki imajo prednastavljene brskalnike. Po scrollbar-colordrugi strani pa lahko drsnik oblikujemo tako, da se ujema z zasnovo, ne da bi se zatekli k ponovitvi funkcionalnosti brskalnika ali uporabi predpon prodajalcev.

.scrollable-element ( scrollbar-color: red yellow; )
Podivjajte z barvami po meri

scrollbar-colorbo sprejel tudi vrednosti darkin, lightda se ujemajo z uporabnikovimi preferencami, če v sistemu Mac OSX uporabljajo kaj podobnega temnemu načinu.

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

Od marca 2019 podpora darkin lightvrednosti ni na voljo v nobenem brskalniku. je podprt v Firefoxu. Za podrobnosti glejte spodnji razdelek za podporo brskalnikom.

Sintaksa

scrollbar-color: auto | dark | light | ;

Vrednote

scrollbar-color sprejema naslednje vrednosti:

  • auto je privzeta vrednost in bo upodobila standardne barve drsnika za uporabniškega agenta.
  • dark bo uporabniškemu agentu naročil, naj uporabi temnejše drsne trakove, da se ujemajo s trenutno barvno shemo.
  • light bo uporabniškemu agentu naročil, naj uporabi svetlejše drsnike, da se ujemajo s trenutno barvno shemo.
  • določa dve barvi za drsnik. Prva barva je za "palec" ali premični del drsnika, ki se prikaže na vrhu. Druga barva je za "skladbo" ali fiksni del drsnika.

Primer

Ta združuje novo sintakso spec in predpono WebKit.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
91 * 87 11. 88 * TP *

Mobilni / tablični računalnik

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

Sorodno

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Viri

  • Trenutno stanje drsnih trakov za oblikovanje
  • Drsni trakovi po meri v WebKitu
  • Osnutek modula drsnih trakov CSSWG
  • Zbirka primerov uporabe W3C za spreminjanje drsnika
  • Prihodnost CSS-ja: drsni trakovi na od do
  • Chromium številka 891944