soy Kseso y esto EsCSS

Protip: adaptar scrollbars al esquema de color de tu plantilla puro CSS

Una forma de cambiar el color de las barras de scroll de forma fácil, sencilla, no intrusiva y con degradación elegante.

Protip: adaptar scrollbars al esquema de color de tu plantilla puro CSS

·Por Kseso ✎ 10

Con motivo del último (por ahora) cambio de tema al blog, algunos de vosotros me comentabais lo feo que lucían las barras de scroll en el índex. Tan blanquitas ellas, tan oscuro él.

Efecto visual que comparto. No así todo lo que conllevaría y supondría para los usuarios el cambiarlas.

En varios artículos del blog puedes encontrar información al respecto sobre cómo cambiar la apariencia de las scrollbars. Pero casi todas las "efectivas y universales" pasan por el uso de una considerable cantidad de javascript (cuando no de librerías a mayores) y "descomponer y componer" al elemento que las muestra.

Este detalle y petición habían quedado en algún rinconcito del coco germinando. Pendiente de darle una repensada y evaluar mis reticencia a castigaros. Castigo estético por mantenerlas "blancas" o castigo por recursos consumidos para cambiarlas.

Bueno, pues al final creo haber encontrado una solución que lo evita (en parte *).

Todo se reduce, como en otras muchas ocasiones o demos de #impoCSSibles, en aplicar alguna declaración para acto seguido contradeclararla o anularla volviendo al valor inicial o por defecto.

Vamos con el caso concreto, que de momento puedes ver en el índex del blog. El marcado html de las columnas del índex es símplemente una caja, aside, con el tamaño limitado el que muestra los scrolls verticales.

Y dentro de él los resúmenes de los artículos marcados como figure´s. Algo así:

<aside> <figure><!-- resumen artículo --></figure> </aside> <br/> <aside> <figure><!-- resumen artículo --></figure> </aside>

Bien, pues la solución es bien sencilla, no intrusiva y que degrada por sí misma en caso de los navegadores que no la soporten:

aside { filter: invert(1); } aside > * { filter: invert(1); }

Y nada más. Ahora las scrollbars verticales lucirán negras en aquellos navegadores que soporten la propiedad filter y que por programación las muestran blancas.

En el caso de que tu necesidad fuese otro color sólo tienes que cambiar el filtro usado y jugar con sus valores para adaptar las scrollbars al esquema de colores de tu tema o plantilla.

Eso sí. En la minoría de navegadores que por defectos las presenten en tonos o colores oscuros ahora las verán blancas. Pega que intento compensar en los móviles con ayuda de las medias queries CSS y el data de Blogger isMobileRequest.

La pregunta ahora es: ¿Cómo lo ves? O dicho de otra forma: déjame un comentario con tu opinión, especialmente si esto te supone cualquier quebranto, por mínimo que sea, al uso del blog.

Nota *: el uso de los filtros CSS también supone un trabajo extra para el navegador.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso