⭐ 0
🔍
Текст Изображение PDF и Документи Аудио Музика Електроника Време Полезни програми Валидатори Езотерика Игри

Генератор на 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 със заети пиксели.

Съпоставянето на ширината е най-ясният пример за разминаването: scrollbar-width във Firefox приема само ключовите думи auto, thin или none — никога точна пикселова стойност. Този генератор преобразува избраната от вас ширина честно (8px или по-малко става thin, всичко по-широко става auto) и показва получената ключова дума до въведеното от вас, вместо да измисля фалшив перфектен до пиксел резултат за Firefox, какъвто не съществува. Firefox също така няма начин да зададе отделен цвят при задържане, независим border-radius на плъзгача или цвят на пистата, който да не е просто втората стойност на scrollbar-color — това са постоянни, реални ограничения на платформата, а не пропуски в този инструмент.

Копирайте комбинирания CSS блок и двата набора правила пътуват заедно, всеки под собствен коментар, готови за директно поставяне в стилова таблица. Всичко се визуализира и обновява в собствения ви браузър, докато местите контролите — без качване, без акаунт, без обръщение към сървър и продължава да работи офлайн, след като страницата се зареди.

Харесва ли ви този инструмент? Смятате ли този продукт за полезен? Виждате ли потенциал в него и искате ли да го подкрепите?

🛡️
Изпълнява се в браузъра

Вашите файлове и данни никога не напускат това устройство. Обработката е изцяло офлайн. 100% сигурност.

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

  • Общи контроли — ширина, цвят на писта, цвят на плъзгач, цвят при задържане, радиус на ъглите на плъзгача — управляват и двата браузъра от едни и същи входни данни.
  • Честно съпоставяне на ширината: Firefox поддържа само thin, auto или none, затова точната пикселова стойност, която изберете, се преобразува до най-близката реална ключова дума и се показва до въведеното от вас.
  • Комбиниран CSS изход за копиране, включващ както правилата с псевдоелементи за WebKit, така и стандартните свойства за Firefox, с ясни коментари.

Основни предимства

✓ Две демо полета с реален скролбар показват резултата на всеки браузър — полето за WebKit винаги дава истинския изглед в Chrome, Safari и Edge, без симулирано визуализиране.
✓ Пропуските във възможностите на Firefox се показват, а не се крият: цвят при задържане, радиус на плъзгача и независимо оформяне на пистата просто не съществуват във Firefox, и инструментът го казва направо, вместо да се преструва на обратното.
✓ Един блок CSS за копиране събира и двата набора правила заедно с коментар за резервен вариант — готов за директно поставяне.

Случаи на употреба

  • • Оформете скролбара на страничното меню на таблото според брандовата палитра и вижте докъде точно стига това оформяне във Firefox, преди да го пуснете.
  • • Вземете точната ключова дума за ширина на скролбар от Firefox за избраната дебелина, вместо да гадаете дали thin или auto е по-близкото съвпадение.
  • • Копирайте един CSS блок, който съдържа както псевдоелементните правила за WebKit, така и стандартните свойства за Firefox, всяко с ясен коментар, директно в стиловия файл.