Novedad en CSS: Estilizado oficial de scrollbar

Nueva especificación de CSS para barras de scroll

Recientemente, se ha estandarizado la capacidad de estilar las barras de desplazamiento (scrollbars) en CSS de manera oficial. Aunque ya existían métodos previos mediante webkits, estos no eran parte del estándar y se comportaban como hacks inestables.

Nuevas propiedades clave

La especificación introduce dos propiedades principales para gestionar el diseño de las barras:

• scrollbar-color: Permite definir hasta dos colores para el thumb y el fondo de la barra de forma sencilla:
  > "scrollbar-color: blue light"
• scrollbar-width: Controla el grosor de la barra. Valores permitidos incluyen:
  • auto: Valor predeterminado.
  • thin: Para una versión más fina.
  • none: Oculta completamente la barra de scroll, lo cual es excelente para crear sliders personalizados con scroll snap.

Consideraciones de compatibilidad

Es importante mencionar que, al ser una funcionalidad reciente:

1. Soporte actual: Ya funciona correctamente en Firefox, Chrome y Edge (versiones más recientes).
2. Excepción: Safari no cuenta aún con compatibilidad total, aunque se espera su integración al ser una norma del estándar CSS.
3. Degradación elegante: Si el navegador no soporta estas propiedades, simplemente ignorará el código y mostrará el estilo predeterminado del sistema, evitando romper la interfaz.

Finalmente, se aclaró una duda sobre la interactividad: el modo full screen no puede activarse automáticamente sin una interacción del usuario, debido a políticas de seguridad y experiencia de usuario que evitan comportamientos intrusivos en la navegación.