Kerimisriba värv - CSS-trikid

Anonim

scrollbar-colorVara kontrollib kaks värvi kerimisriba: pöidla värvi ja loo värvi . scrollbar-coloron osa CSS-i töörühma kerimisribade 1. mooduli mustandist, mis on selle kirjutamise seisuga veel pooleli.

Enne seda scrollbar-colorei olnud arendajatel ühtegi tavalist võimalust brauseri kerimisribade vaikimisi välimust muuta, ilma et peaksite kerimisriba peitma overflow: hiddenja JavaScripti põhiseid kerimisribasid renderdama või brauseri eesliidetega kerimisribade atribuute kasutama. Mis scrollbar-colorteiselt poolt saame Style kerimisriba sobitada disain ilma pöörduvad redoing brauseri funktsionaalsus või kasutades müüja eesliiteid.

.scrollable-element ( scrollbar-color: red yellow; )
Metsistage kohandatud värvidega

scrollbar-coloraktsepteerib ka kasutaja eelistuste väärtusi darkja lightvastavad neile, kui nad kasutavad Mac OSX-is midagi tumedat režiimi.

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

Alates 2019. aasta märtsist pole tugi darkja lightväärtused üheski brauseris saadaval. on Firefoxis toetatud. Lisateavet leiate allolevast brauseri toe jaotisest.

Süntaks

scrollbar-color: auto | dark | light | ;

Väärtused

scrollbar-color aktsepteerib järgmisi väärtusi:

  • auto on vaikeväärtus ja muudab kasutajaagendi standardsed kerimisriba värvid.
  • dark käsib kasutajaagendil kasutada praeguse värviskeemi järgi tumedamaid kerimisribasid.
  • light käsib kasutajaagendil kasutada praeguse värviskeemi järgi kergemaid kerimisribasid.
  • määrab kaks kerimisribal kasutatavat värvi. Esimene värv on mõeldud pöidlale või kerimisriba liikuvale osale, mis ilmub ülaosas. Teine värv on „raja” või kerimisriba kindla osa jaoks.

Näide

See ühendab uue spetsifikatsiooni ja WebKiti prefiksiga asjad.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

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

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 * Ei 81 * 14,0–14,4 *

Seotud

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Ressursid

  • Kerimisribade kujundamise hetkeseis
  • Kohandatud kerimisribad WebKitis
  • CSSWG kerimisribade mooduli mustand
  • Kerimisriba muutmiseks kasutatavate juhtumite kogum W3C
  • CSS-i tulevik: kerimisribad saidil dev.to
  • Kroomi väljaanne 891944