Slinkties juostos spalva - CSS-gudrybės

Anonim

scrollbar-colorNuosavybė kontroliuoja dvi spalvas iš slinkties: į nykščio spalvos ir kelio spalvos . scrollbar-coloryra CSS darbo grupės pirmojo lygio slinkties juostų modulio dalis, kuri šiuo metu vis dar vykdoma.

Anksčiau scrollbar-colorkūrėjai neturėjo jokio standartinio būdo pakeisti numatytąją naršyklės slinkties juostų išvaizdą, neslėpdami slinkties juostos perteikdami overflow: hiddenir pateikdami „JavaScript“ pagrįstas slinkties juostas arba nenaudodami naršyklės prefiksų slinkties juostos atributų. Su scrollbar-color, kita vertus, mes galime Modelis A slinkties juostą, kad ji atitiktų dizainą nesiimant redoing naršyklės funkcionalumą arba naudojant pardavėjas priešdėlius.

.scrollable-element ( scrollbar-color: red yellow; )
Eik laukinis su pasirinktomis spalvomis

scrollbar-colortaip pat priims vartotojo pageidavimų reikšmes darkir lightatitiks jų nuostatas, jei „Mac OSX“ naudojasi tam tikru režimu, pavyzdžiui, tamsiuoju režimu.

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

Nuo 2019 m. Kovo palaikymas darkir lightreikšmės negalimas jokioje naršyklėje. yra palaikoma „Firefox“. Išsamesnės informacijos ieškokite žemiau esančiame naršyklės palaikymo skyriuje.

Sintaksė

scrollbar-color: auto | dark | light | ;

Vertybės

scrollbar-color priima šias vertes:

  • auto yra numatytoji reikšmė ir pateikiamos standartinės vartotojo agento slinkties juostos spalvos.
  • dark liepia vartotojo agentui naudoti tamsesnes slinkties juostas, kad atitiktų dabartinę spalvų schemą.
  • light liepia vartotojo agentui naudoti lengvesnes slinkties juostas, kad atitiktų dabartinę spalvų schemą.
  • nurodo dvi spalvas, kurios bus naudojamos slinkties juostai. Pirmoji spalva skirta „nykščiui“ arba judančiai slinkties juostos daliai, kuri rodoma viršuje. Antroji spalva skirta „takeliui“ arba fiksuotai slinkties juostos daliai.

Pavyzdys

Tai sujungia naują specifikacijos sintaksę ir „WebKit“ priešdėlį.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
91 * 87 11 88 * TP *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 * Ne 81 * 14,0–14,4 *

Susijęs

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Ištekliai

  • Dabartinė slinkties juostų stiliaus būsena
  • Tinkinti slinkties juostos „WebKit“
  • CSSWG slinkties juostų modulio projektas
  • W3C naudojimo atvejų, skirtų slinkties juostai modifikuoti, rinkinys
  • CSS ateitis: slinkties juostos „dev.to“
  • „Chromium“ leidimas 891944