Generador de barra de desplazamiento CSS

Barras de desplazamiento de estilo Chrome, Safari y Edge con la familia de pseudoelementos ::-webkit-scrollbar: reglas separadas para la pista, el pulgar y el estado de desplazamiento del pulgar, además de un ancho exacto de píxel y un radio de borde del pulgar. Firefox ignora todo eso por completo y en su lugar lee dos propiedades estándar, ancho de barra de desplazamiento y color de barra de desplazamiento, que luego ingresaron a la especificación de barras de desplazamiento CSS. Estos no son dos dialectos de la misma función: son dos conjuntos de funciones diferentes con límites diferentes, y la mayoría de los generadores de barras de desplazamiento ocultan silenciosamente la brecha mostrando solo el resultado de WebKit. Éste no.

Establezca el ancho, el color de la pista, el color del pulgar, el color de desplazamiento y el radio de la esquina del pulgar una vez, y la herramienta creará dos conjuntos de reglas a partir de las mismas entradas. El bloque WebKit abarca ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb y su estado :hover al cuadro de demostración izquierdo, por lo que lo que ve allí es exactamente lo que Chrome, Safari y Edge representan: el motor real del navegador, no una superposición simulada. El bloque de Firefox establece el ancho y el color de la barra de desplazamiento en el cuadro de demostración derecho usando el mismo motor del navegador, razón por la cual el cuadro solo se ve diferente cuando esta página está realmente abierta en Firefox; en un navegador WebKit muestra allí su propia barra de desplazamiento predeterminada, y la herramienta lo dice en lugar de fingir una apariencia de Firefox con píxeles prestados.

El mapeo de ancho es el ejemplo más claro de la brecha: el ancho de la barra de desplazamiento de Firefox acepta sólo las palabras clave auto, delgada o ninguna, nunca una cifra exacta de píxeles. Este generador asigna honestamente el ancho elegido (8 píxeles o menos se vuelve delgado, cualquier ancho se vuelve automático) y muestra la palabra clave resultante junto a su entrada, en lugar de inventar un resultado falso de Firefox con píxeles perfectos que no existe. Firefox tampoco tiene forma de establecer un color de desplazamiento separado, un radio de borde del pulgar independiente o un color de pista que no sea simplemente el segundo valor del color de la barra de desplazamiento; estas son limitaciones reales y permanentes de la plataforma, no omisiones en esta herramienta.

Copie el bloque CSS combinado y ambos conjuntos de reglas viajarán juntos, cada uno bajo su propio comentario, listos para pegar en una hoja de estilo tal cual. Todo se procesa y actualiza en su propio navegador a medida que arrastra los controles: sin carga, sin cuenta, sin ida y vuelta del servidor, y sigue funcionando sin conexión una vez que se ha cargado la página.