Боја клизача - ЦСС-трикови

Anonim

scrollbar-colorИмовина контролише две боје неког померање: за боје тхумб и боје нумера . scrollbar-colorје део нацрта модула клизача нивоа 1 ЦСС радне групе, који је још увек у току од овог писања.

Пре тога scrollbar-color, програмери нису имали стандардни начин да промене подразумевани изглед клизача претраживача без прибегавања скривању клизача помоћу overflow: hiddenи приказивању клизача заснованих на ЈаваСцрипт-у или употреби атрибута клизача са префиксом прегледача. Са scrollbar-colorдруге стране, можемо обликовати траку за помицање тако да одговара дизајну без прибегавања поновном понављању функционалности прегледача или коришћењу префикса добављача.

.scrollable-element ( scrollbar-color: red yellow; )
Дивите са прилагођеним бојама

scrollbar-colorтакође ће прихватити вредности darkи lightда се подударају са корисниковим преференцама ако користе нешто попут тамног режима на Мац ОСКС-у.

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

Од марта 2019. подршка darkи lightвредности нису доступне ни у једном прегледачу. је подржан у Фирефок-у. Погледајте детаље у одељку за подршку прегледача у наставку.

Синтакса

scrollbar-color: auto | dark | light | ;

Вредности

scrollbar-color прихвата следеће вредности:

  • auto је подразумевана вредност и приказаће стандардне боје клизача за корисничког агента.
  • dark ће рећи корисничком агенту да користи тамније клизаче како би се подударао са тренутном шемом боја.
  • light ће рећи корисничком агенту да користи светлије клизаче како би се подударао са тренутном шемом боја.
  • одређује две боје које ће се користити за клизач. Прва боја је за „палац“ или покретни део клизача који се појављује на врху. Друга боја је за „траг“ или фиксни део клизача.

Пример

Ово комбинује нову синтаксу спецификација и ствари са префиксом ВебКит.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
91 * 87 11 88 * ТП *

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 * Не 81 * 14,0-14,4 *

Повезан

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Ресурси

  • Тренутно стање обликовања клизача
  • Прилагођене траке за померање у ВебКит-у
  • Нацрт модула ЦССВГ клизача
  • В3Ц колекција случајева употребе за модификацију клизача
  • Будућност ЦСС-а: Клизачи на развоју за
  • Издање хрома 891944