Vierityspalkin väri - CSS-temppuja

Anonim

scrollbar-colorOminaisuus ohjaa kaksi väriä vierityspalkkia: Tällä peukalo väri ja radan väri . scrollbar-coloron osa CSS-työryhmän vierityspalkkimoduulin tason 1 luonnosta, joka on vielä kesken tämän kirjoituksen kanssa.

Aikaisemmin scrollbar-colorkehittäjillä ei ollut tavallista tapaa muuttaa selaimen vierityspalkkien oletusnäkymää turvautumatta piilottamaan vierityspalkkia overflow: hiddenJavaScript-pohjaisten vierityspalkkien kautta ja tekemällä niitä tai käyttämättä selaimen etuliitteisiä vierityspalkin määritteitä. Kanssa scrollbar-color, toisaalta, voimme muotoilla vierityspalkki vastaamaan design turvautumatta redoing selaimen toiminnallisuutta tai käyttämällä toimittajan etuliitteitä.

.scrollable-element ( scrollbar-color: red yellow; )
Villiää mukautetuilla väreillä

scrollbar-colorhyväksyy myös käyttäjän asetusten arvot darkja lightvastaamaan niitä, jos he käyttävät jotain tummaa tilaa Mac OSX: ssä.

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

Maaliskuusta 2019 alkaen tuki darkja lightarvot eivät ole käytettävissä missään selaimessa. on tuettu Firefoxissa. Katso lisätietoja selaimen tukiosasta alla.

Syntaksi

scrollbar-color: auto | dark | light | ;

Arvot

scrollbar-color hyväksyy seuraavat arvot:

  • auto on oletusarvo ja tekee vakio vierityspalkin värit käyttäjäagentille.
  • dark käskee käyttäjäagentin käyttämään tummempia vierityspalkkeja vastaamaan nykyistä värimaailmaa.
  • light käskee käyttäjäagentin käyttämään kevyempiä vierityspalkkeja vastaamaan nykyistä värimaailmaa.
  • määrittää kaksi väriä, joita käytetään vierityspalkkiin. Ensimmäinen väri on peukalolle tai vierityspalkin liikkuvalle osalle, joka näkyy ylhäällä. Toinen väri on "raita" tai vierityspalkin kiinteä osa.

Esimerkki

Tämä yhdistää uuden teknisen syntaksin ja WebKitin etuliitetyt asiat.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
91 * 87 11 88 * TP *

Matkapuhelin / tabletti

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

Liittyvät

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Resurssit

  • Vierityspalkkien muotoilun nykytila
  • Mukautetut vierityspalkit WebKitissä
  • CSSWG-vierityspalkkimoduulin luonnos
  • W3C-kokoelma käyttötapauksia vierityspalkin muokkaamiseen
  • CSS: n tulevaisuus: vierityspalkit dev.to: lle
  • Kromi-numero 891944