CSS генератор на лента за превъртане

Ленти за превъртане в стил Chrome, Safari и Edge със семейството от псевдоелементи ::-webkit-scrollbar: отделни правила за пистата, палеца и състоянието на задържане на палеца, плюс точна ширина на пиксела и радиус на границата на палеца. Firefox игнорира всичко това изцяло и вместо това чете две стандартни свойства, scrollbar-width и scrollbar-color, които по-късно влязоха в спецификацията на CSS Scrollbars. Това не са два диалекта на една и съща функция — те са два различни набора от функции с различни тавани и повечето генератори на ленти за превъртане тихо закриват празнината, като показват само резултата от WebKit. Този не го прави.

Задайте веднъж ширината, цвета на пистата, цвета на палеца, цвета на курсора и радиуса на ъгъла на палеца и инструментът изгражда два набора правила от едни и същи входове. Блокът на WebKit обхваща ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb и неговото състояние :hover към лявото демонстрационно поле, така че това, което виждате там, е точно това, което рендират Chrome, Safari и Edge — собственият реален двигател на браузъра, а не симулирано наслагване. Блокът на Firefox задава ширина на лентата за превъртане и цвета на лентата за превъртане в дясното демонстрационно поле, използвайки собствения двигател на същия браузър, поради което полето изглежда различно само когато тази страница действително е отворена във Firefox; в браузър WebKit показва своя собствена лента за превъртане по подразбиране там и инструментът го казва, вместо да фалшифицира изглед на Firefox с взети назаем пиксели.

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

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