⭐ 0
🔍
Текст Слика ПДФ и документи Аудио Музика Електроника Време Комуналне услуге Валидатори Езотерично Игре

CSS Генератор скролбара

Подесите ширину скролбара, боју траке, палца и боју на прелазу мишем, а затим погледајте прави резултат за WebKit поред правог резултата за Firefox — два заиста различита система прегледача, један поред другог.

🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.

10px
8px

Стилизовано помоћу ::-webkit-scrollbar псеудо-елемената — овај оквир се приказује кроз сопствени прави мотор вашег прегледача ако је Chrome, Safari или Edge.

Стилизовано помоћу Firefox-ових својстава scrollbar-width и scrollbar-color. Остали прегледачи их игноришу и приказују сопствени подразумевани клизач овде — отворите ову страницу у Firefox-у да бисте видели прави резултат.

Firefox нема одвојену боју при преласку, заобљење ивица клизача или независно стилизовање траке — само scrollbar-width, овде мапиран из изабране дебљине у стварну кључну реч: thin

Обрада... 0%

Резултат

Chrome, Safari и Edge стилизују скролбаре помоћу фамилије псеудо-елемената ::-webkit-scrollbar: одвојена правила за траку, палац и стање палца на прелазу мишем, плус ширину у пикселима и border-radius палца. Firefox све то потпуно игнорише и уместо тога чита два стандардна својства, scrollbar-width и scrollbar-color, која су касније ушла у CSS Scrollbars спецификацију. Ово нису два дијалекта исте функционалности — то су два различита скупа могућности са различитим ограничењима, и већина генератора скролбара дискретно прикрива ту разлику приказујући само WebKit резултат. Овај то не ради.

Подесите ширину, боју траке, боју палца, боју на прелазу мишем и радијус угла палца једном, и алат генерише два скупа правила из истих уноса. WebKit блок ограничава ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb и његово :hover стање на леви демо оквир, тако да је оно што видите управо оно што Chrome, Safari и Edge приказују — прави покретач прегледача, а не симулиран приказ. Firefox блок поставља scrollbar-width и scrollbar-color на десном демо оквиру користећи сопствени покретач тог прегледача, због чега тај оквир изгледа другачије само када је ова страница отворена у Firefox-у; у WebKit прегледачу он приказује свој подразумевани скролбар, и алат то и каже уместо да лажира Firefox изглед позајмљеним пикселима.

Мапирање ширине је најјаснији пример те разлике: Firefox-ов scrollbar-width прихвата само кључне речи auto, thin или none — никада тачну вредност у пикселима. Овај генератор искрено мапира вашу изабрану ширину (8px и мање постаје thin, све шире постаје auto) и приказује резултујућу кључну реч поред вашег уноса, уместо да измишља лажни пикселски прецизан Firefox резултат који не постоји. Firefox такође нема начин да постави засебну боју на прелазу мишем, независан border-radius палца или боју траке која није једноставно друга вредност својства scrollbar-color — то су трајна, стварна ограничења платформе, а не пропусти овог алата.

Копирајте комбиновани CSS блок и оба скупа правила путују заједно, сваки под својим коментаром, спреман да се налепи директно у stylesheet. Све се приказује и ажурира у вашем прегледачу док померате контроле — нема отпремања, нема налога, нема повратног пута до сервера, и наставља да ради офлајн након што се страница учита.

Уживате у овом алату? Мислите да је овај производ користан? Видите потенцијал у њему и желите да га подржите?

🛡️
Извршава се у прегледачу

Ваши фајлови и уноси никада не напуштају овај уређај. Обрада се одвија потпуно офлајн. 100% безбедно.

Прихваћени формати и правила

  • Заједничке контроле — ширина, боја траке, боја палца, боја на прелазу мишем, радијус угла палца — покрећу оба покретача из истих уноса.
  • Искрено мапирање ширине скролбара: Firefox подржава само thin, auto или none, тако да се тачна вредност у пикселима коју изаберете мапира на најближу стварну кључну реч и приказује поред вашег уноса.
  • Комбиновани CSS излаз спреман за копирање садржи и WebKit правила са псеудо-елементима и Firefox стандардна својства, јасно коментарисана.

Кључне предности

✓ Два демо оквира уживо приказују прави скролбар сваког покретача — оквир за WebKit увек показује прави резултат у Chrome-у, Safari-ju и Edge-у, без симулације.
✓ Ограничења Firefox-а су приказана отворено: боја на прелазу мишем, радијус палца и независно стилизовање траке у Firefox-у једноставно не постоје, и алат то јасно каже уместо да се претвара супротно.
✓ Један CSS блок спреман за копирање обједињује оба скупа правила са коментаром о резервним подешавањима, спреман за директно лепљење.

Случајеви коришћења

  • • Стилизујте скролбар бочне траке контролне табле да одговара палети бренда и пре него што објавите промену, видите тачно докле тај стил допире у Firefox-у.
  • • Узмите тачну вредност Firefox кључне речи за ширину скролбара за одабрану дебљину, уместо да нагађате да ли је thin или auto ближи избор.
  • • Копирајте један CSS блок који садржи и WebKit правила са псеудо-елементима и стандардна својства за Firefox, свако јасно коментарисано, директно у стилски лист.