⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di barre di scorrimento CSS

Definisci la larghezza, la traccia, il pollice e il colore della barra di scorrimento, quindi guarda il risultato reale di WebKit accanto al risultato reale di Firefox: due sistemi browser veramente diversi, fianco a fianco.

10px
8px

Stile con pseudo-elementi ::-webkit-scrollbar: questa casella esegue il rendering tramite il motore reale del tuo browser se è Chrome, Safari o Edge.

Stile con le proprietà scrollbar-width e scrollbar-color di Firefox. Altri browser li ignorano e mostrano qui la propria barra di scorrimento predefinita: apri questa pagina in Firefox per vedere il risultato reale.

Firefox non ha un colore separato al passaggio del mouse, un raggio del bordo del pollice o uno stile di traccia indipendente: solo la larghezza della barra di scorrimento, mappata qui dallo spessore scelto alla parola chiave reale: thin

Elaborazione... 0%

Risultato

Barre di scorrimento in stile Chrome, Safari ed Edge con la famiglia di pseudo-elementi ::-webkit-scrollbar: regole separate per la traccia, il pollice e lo stato al passaggio del mouse del pollice, oltre a una larghezza esatta in pixel e un raggio del bordo del pollice. Firefox ignora completamente tutto ciò e legge invece due proprietà standard, scrollbar-width e scrollbar-color, che successivamente sono entrate nelle specifiche CSS Scrollbars. Questi non sono due dialetti della stessa funzionalità: sono due diversi set di funzionalità con limiti diversi e la maggior parte dei generatori di barre di scorrimento coprono silenziosamente il divario mostrando solo il risultato WebKit. Questo no.

Imposta una volta la larghezza, il colore della traccia, il colore del pollice, il colore del passaggio del mouse e il raggio dell'angolo del pollice e lo strumento creerà due set di regole dagli stessi input. Il blocco WebKit riguarda ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb e il suo stato :hover nella casella demo di sinistra, quindi quello che vedi è esattamente ciò che Chrome, Safari ed Edge rendono: il vero motore del browser, non un overlay simulato. Il blocco Firefox imposta la larghezza e il colore della barra di scorrimento nella casella demo destra utilizzando il motore dello stesso browser, motivo per cui la casella appare diversa solo quando questa pagina è effettivamente aperta in Firefox; in un browser WebKit mostra lì la propria barra di scorrimento predefinita, e lo strumento lo dice invece di fingere l'aspetto di Firefox con pixel presi in prestito.

La mappatura della larghezza è l'esempio più chiaro del divario: la larghezza della barra di scorrimento di Firefox accetta solo le parole chiave auto, thin o none, mai una cifra esatta in pixel. Questo generatore mappa onestamente la larghezza scelta (8px e inferiore diventa sottile, qualsiasi cosa più larga diventa automatica) e visualizza la parola chiave risultante accanto al tuo input, invece di inventare un risultato Firefox falso pixel-perfetto che non esiste. Firefox inoltre non ha modo di impostare un colore separato al passaggio del mouse, un raggio del bordo del pollice indipendente o un colore della traccia che non sia semplicemente il secondo valore del colore della barra di scorrimento: queste sono limitazioni reali e permanenti della piattaforma, non omissioni in questo strumento.

Copia il blocco CSS combinato ed entrambi i set di regole viaggeranno insieme, ciascuno sotto il proprio commento, pronti per essere incollati in un foglio di stile così com'è. Tutto viene visualizzato e aggiornato nel tuo browser mentre trascini i controlli: nessun caricamento, nessun account, nessun andata e ritorno sul server e continua a funzionare offline una volta caricata la pagina.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • I controlli condivisi (larghezza, colore della traccia, colore del pollice, colore del passaggio del mouse, raggio dell'angolo del pollice) guidano entrambi i motori dagli stessi input.
  • Mappatura onesta della larghezza della barra di scorrimento: Firefox supporta solo thin, auto o none, quindi l'esatto valore in pixel che scegli viene mappato sulla parola chiave reale più vicina e mostrato accanto al tuo input.
  • Output CSS combinato e copiabile con le regole degli pseudo-elementi WebKit e le proprietà standard di Firefox, chiaramente commentate.

Vantaggi principali

✓ Due caselle demo live eseguono il rendering della barra di scorrimento reale di ciascun motore: la casella WebKit mostra sempre il risultato reale in Chrome, Safari ed Edge, senza rendering falsificati.
✓ Il divario nelle capacità di Firefox viene mostrato, non nascosto: il colore al passaggio del mouse, il raggio del pollice e lo stile della traccia indipendente semplicemente non esistono in Firefox, e lo strumento lo dice chiaramente invece di fingere il contrario.
✓ Un blocco CSS copiabile fornisce entrambi i set di regole insieme a un commento di fallback, pronto per essere incollato così com'è.

Casi d'uso

  • • Personalizza la barra di scorrimento della barra laterale del dashboard in modo che corrisponda alla tavolozza del marchio e controlla esattamente fino a che punto arriva lo stile in Firefox prima di spedirlo.
  • • Prendi l'onesta parola chiave Scrollbar-Width di Firefox per uno spessore scelto invece di indovinare se thin o auto è la corrispondenza più vicina.
  • • Copia un blocco CSS che contenga sia le regole degli pseudo-elementi WebKit che le proprietà standard di Firefox, ciascuna chiaramente commentata, direttamente in un foglio di stile.