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.

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 Don Kseso Kseso

Comentarios: 10

  1. En Chrome de Android se ven perfectas! Enhorabuena.

    ResponderEliminar
  2. Hola kseso,

    La verdad no encontré como ni donde hacerte esta pregunta, espero no molestar y que puedas ayudarme.
    Estoy buscando una manera de obtener la descripción de un artículo en blogger, mas específicamente cuando se edita una entrada y en las opciones podemos agregar "descripción de búsqueda" quisiera saber si puedo obtener ese texto como si obtuviera la primera imagen de una entrada con data:post.firstImageUrl.
    Espero darme a entender, gracias.

    ResponderEliminar
    Respuestas
    1. Hola Carlos
      No hay quebranto.
      La variable que buscas es &lg;data:blog.metaDescription/>.

      Pero has de saber un "pequeño detalle" para que no te quiebres la cabeza.

      Como sabrás, las "data" de Blogger devuelven un único valor (el nombre del blog, el título de post... étc).
      Sólo suele estar condicionado su uso por su naturaleza: globales o locales.
      Esto es, si se pueden usar en cualquier momento y lugar del blog, como data:blog.title, o si sólo funcionan según dónde se declaren: en el head o body, o según tipo de página...

      Todo esto lo tienes listado en este enlace.

      Bien, disculpa por la intro que seguramente ya conocieses.

      Volvamos a <data:blog.metaDescription/>

      Esta es una data mixta. Devolverá un valor u otro dependiendo del tipo de página dónde se use.

      1:
      Páginas tipo ítems o posts (que tú referencias como entradas) y páginas estáticas, esto es, donde tienes el campo para rellenar esa descripción que indicas devuelve ese texto introducido por tí y único para cada una.

      2:
      En el resto de páginas, como índex, búsquedas por cadena textual o etiquetas... devuelve el valor introducido para la descripción general del blog.
      Esto es, el que se realiza para todo el blog a través de "Configuración -> Lo Básico -> Descripción.

      Esto lo puedes ver si en el head de la plantilla usas el siguiente código:
      [code]
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>

      [/code]

      De locos y de todo menos profesional este comportamiento de ¿verdad?
      Bueno, pues fue algo que ya notifiqué diréctamente hace más de un año a los "chicos del código" de Blogger.
      Pero me topé con quien no se enteró de nada y yo no supe reconducir y centrar el tema (era nuevo en esos foros y no quería sonar duro).
      Si hicieron algo al respecto en este año largo lo desconozco.

      Disculpa la extensión de la respuesta.

      Un saludo.

      Eliminar
    2. Adenda, Carlos:

      No mencioné la data <data:description/> que esnifa eso, la descripción del post, porque es una data local. No sólo del head como se dice en el enlace que te pasé.
      También devuelve el valor en los posts, pero dentro de lo que es uno (el código de la plantilla concreto que los genera).
      Si se usa fuera de ahí no devuelve valor alguno.

      Eliminar
  3. Volviendo al asunto original, están muy bien las salvedades de este "Protip". Porque si la skin del navegador es oscura, ya no queda bien. Para los que no interpretan aún los filtros, no habrá cambios. Y es verdad que invertir los colores de todo el bloque, para después reinvertir los colores de su contenido, consume una buena cantidad de recursos; pero no sé si es grave teniendo en cuenta la capacidad actual de cualquier máquina.

    Creo que la facilidad que ofrece webkit a través de las reglas de estilo copiadas de XUL es la mejor opción para formatear scrollbars. Pero los demás navegadores (especialmente mozilla) se niegan a incorporar ni siquiera su propia versión.

    En alguno de los comentarios mencioné otra salida (no CSS) que permite ver las barras solamente cuando se las necesita, y así nos ahorramos el color desentonando en nuestro diseño todo el tiempo. Y estaba por poner el link a un ejemplo aprovechando el asunto de este artículo. Pero entonces descubro que nunca publiqué ningún ejemplo.

    Bueno, lo hago medio a las apuradas porque ya tengo escrito el comentario. Es un ejemplo muy, muy viejo que encontré recién en alguna de mis carpetas y lo limpié un poco porque hoy no hace falta tanto código compatible, pero creo que se puede limpiar mucho más, aún no lo pude probar en todos los navegadores nuevos.

    Pop-up scrollbars.

    (No inserto el pen, porque tiene mucho javascript, y me da vergüenza.)

    ResponderEliminar
    Respuestas
    1. Muy interesante, Furoya, este ejercicio del "juego del escondite" de las scrollbars.

      Sin embargo tengo "deberes" (por acá son las tareas que los estudiantes han de realizar fuera del horario de clases, i.e. en casa) para ti xD =P

      Aunque el desplazamiento mediante la rueda del ratón sí funciona (aparecen las barras y hay desplazamiento), con las teclas de dirección no se logra desplazamiento alguno.

      Ocurre lo mismo en las pantallas táctiles. Tampoco se logra el desplazamiento.

      Un saludo

      Eliminar
    2. Por algo estaba perdido en una carpeta como "borrador". Es demasiado complicado ya como para encima agregarle escuchadores cuando se presiona una tecla de dirección (¡y encima que la barra espaciadora se usa también para tipear en el texto!).
      Se me ocurrió otra forma totalmente distinta de hacer el efecto, pero la dejo para más adelante, si es que funciona.

      Gracias por el aviso.

      Eliminar
    3. Sí, funciona.
      Habrá que discriminar a los móviles que no tienen barras de desplazamiento reales (porque el documento se arrastra), pero en navegadores de escritorio se ve digno.

      Está en el mismo pen (eliminé el primer borrador) y lo probé en Firefox y Chrome.

      A veces se retrasaba un poco el cambio para tomar las medidas y el escript las leía mal, pero son detalles a pulir.

      Al final no tiene que ver con tu ejemplo (en nada) pero lo publiqué porque quien busque por la web y llegue aquí, va a tener alguna otra opción.

      Un saludo.

      Eliminar
    4. Ya que estamos en un blog sobre CSS principalmente, propongo una sencilla solución para mostrar y ocultar las scrollbars sin necesidad de scripts:

      [code]
      div {
      overflow: hidden;
      }
      div:hover {
      overflow: auto;
      }
      [/code]

      Aun así, esto no soluciona el problema de no poder aplicar estilos a las barras. Actualmente, no queda otro remedio que reemplazarlas vía scripts, porque el filtro CSS tiene algunas limitaciones para cambiar el color. Por ejemplo, en Windows 7 y Vista usando Firefox o Internet Explorer, la barra se pone de color azul al hacer hover, de forma que aplicando el filtro de inversión, el color resultante es un tono naranja que no termina de quedar bien.

      A todo esto súmale que Chrome tiene su propio estilo de barras, que dicho estilo también cambia según el sistema operativo (en Linux hay muchas variantes), etc., de forma que el resultado del filtro CSS puede ser imprevisible.

      Saludos.

      Eliminar
    5. Gracias, Jorge, por la idea y por la información.

      En alguna otra circunstancia sí tomaría en consideración el uso de :hover (junto a otras peudoclases para cubrir los aparatos sin dispositivo señalizador).

      Pero no en ésta donde el acceso a la información se podría ver comprometido por lo que no deja de ser una mera cuestión estética y además propia de la UI.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap