Boja klizača - CSS-trikovi

Anonim

scrollbar-colorVlasništvo kontrolira dvije boje za pomicanje: u boji palca i boje kolosijeka . scrollbar-colordio je nacrta modula klizača razine 1 radne skupine CSS-a, koji je još uvijek u tijeku od ovog pisanja.

Prije toga scrollbar-colorprogrameri nisu imali standardni način da promijene zadani izgled klizača preglednika bez pribjegavanja skrivanju klizača putem overflow: hiddeni prikazivanju klizača na temelju JavaScript-a ili korištenju atributa klizača s prefiksom preglednika. S scrollbar-colordruge strane, možemo oblikovati traku za pomicanje tako da odgovara dizajnu bez pribjegavanja ponavljanju funkcionalnosti preglednika ili korištenju prefiksa dobavljača.

.scrollable-element ( scrollbar-color: red yellow; )
Divite s prilagođenim bojama

scrollbar-colortakođer će prihvatiti vrijednosti darki lightkako bi se podudarale s korisnikovim preferencijama ako koriste nešto poput tamnog načina rada na Mac OSX-u.

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

Od ožujka 2019. podrška darki lightvrijednosti nisu dostupne ni u jednom pregledniku. je podržan u Firefoxu. Pojedinosti potražite u odjeljku za podršku preglednika u nastavku.

Sintaksa

scrollbar-color: auto | dark | light | ;

Vrijednosti

scrollbar-color prihvaća sljedeće vrijednosti:

  • auto je zadana vrijednost i prikazat će standardne boje klizača za korisničkog agenta.
  • dark će reći korisničkom agentu da koristi tamnije trake za pomicanje kako bi odgovarao trenutnoj shemi boja.
  • light će reći korisničkom agentu da koristi svjetlije klizače kako bi odgovarao trenutnoj shemi boja.
  • određuje dvije boje koje će se koristiti za traku za pomicanje. Prva je boja za "palac" ili pomični dio klizača koji se pojavljuje na vrhu. Druga je boja za "trag" ili fiksni dio trake za pomicanje.

Primjer

Ovo kombinira novu sintaksu specifikacija i stvari s prefiksom WebKit.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
91 * 87 11 88 * TP *

Mobitel / tablet

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

Povezano

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Resursi

  • Trenutno stanje stilskih klizača
  • Prilagođene klizače u WebKitu
  • Nacrt modula CSSWG klizača
  • W3C zbirka slučajeva korištenja za modifikaciju klizača
  • Budućnost CSS-a: klizači na razvoju za
  • Krom, izdanje 891944