Generator de bare de derulare CSS

Bare de defilare în stil Chrome, Safari și Edge cu familia de pseudo-elemente ::-webkit-scrollbar: reguli separate pentru melodia, degetul mare și starea hover a degetului mare, plus o lățime exactă la pixeli și o rază a marginii degetului mare. Firefox ignoră toate acestea în totalitate și, în schimb, citește două proprietăți standard, lățimea barei de defilare și culoarea barei de defilare, care au intrat ulterior în specificațiile CSS Scrollbars. Acestea nu sunt două dialecte ale aceleiași caracteristici - sunt două seturi de caracteristici diferite, cu plafoane diferite, iar majoritatea generatoarelor de bare de defilare trec în liniște peste gol, arătând doar rezultatul WebKit. Acesta nu.

Setați o dată lățimea, culoarea pistei, culoarea degetului mare, culoarea hoverului și raza colțului degetului mare, iar instrumentul construiește două seturi de reguli din aceleași intrări. Blocul WebKit vizează ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb și starea lui :hover în caseta demo din stânga, așa că ceea ce vedeți acolo este exact ceea ce reda Chrome, Safari și Edge - motorul real al browserului, nu o suprapunere simulată. Blocul Firefox setează lățimea barei de defilare și culoarea barei de derulare în caseta demo din dreapta folosind propriul motor al aceluiași browser, motiv pentru care caseta arată diferit doar atunci când această pagină este de fapt deschisă în Firefox; într-un browser WebKit, acesta arată acolo propria bară de defilare implicită, iar instrumentul spune acest lucru, mai degrabă decât să falsească un aspect Firefox cu pixeli împrumutați.

Maparea lățimii este cel mai clar exemplu al decalajului: lățimea barei de defilare a Firefox acceptă doar cuvintele cheie auto, subțire sau niciunul - niciodată o cifră exactă a pixelilor. Acest generator cartografiază în mod sincer lățimea aleasă (8 px și mai puțin devine subțire, orice mai larg devine automat) și afișează cuvântul cheie rezultat lângă intrarea dvs., în loc să inventeze un rezultat Firefox fals, perfect cu pixeli, care nu există. De asemenea, Firefox nu are nicio modalitate de a seta o culoare separată de hover, o rază independentă a marginii degetului mare sau o culoare a pistei care nu este pur și simplu a doua valoare a culorii barei de defilare - acestea sunt limitări permanente, reale ale platformei, nu omisiuni în acest instrument.

Copiați blocul CSS combinat și ambele seturi de reguli călătoresc împreună, fiecare sub propriul comentariu, gata să fie lipite într-o foaie de stil așa cum este. Totul se redă și se actualizează în propriul browser pe măsură ce trageți controalele - fără încărcare, fără cont, fără dus-întors pe server și continuă să funcționeze offline odată ce pagina s-a încărcat.