color-scheme
- Aunque un sitio web soporte modo oscuro, puede ocurrir que la barra de desplazamiento siga brillando en blanco
- Si configuras la propiedad
color-scheme como dark light, le indicas al navegador que la página puede manejar tanto el modo oscuro como el claro, y la barra de desplazamiento también se oscurece
- Se puede aplicar
color-scheme al documento usando una meta tag, lo que permite que el navegador conozca la preferencia del usuario antes de cargar el CSS
- Si se usa junto con la media feature
prefers-color-scheme, se puede controlar perfectamente qué partes cambian según la preferencia del usuario
- Con el selector
:has(), se puede aplicar la propiedad color-scheme al elemento raíz cuando body tiene la clase dark
text-wrap
- A veces los títulos o captions se cortan de forma extraña y la última línea queda con una sola palabra
- Usar el valor
balance en la propiedad text-wrap ayuda a equilibrar los títulos del sitio web
- Esta función no depende del navegador, funciona bien en configuraciones modernas y además degrada con elegancia en entornos antiguos
Scroll-margin
- Al usar enlaces ancla en una página web, puede pasar que un encabezado fijo tape el elemento de destino
- Este problema se puede resolver usando la propiedad CSS
scroll-margin y ajustando scroll-margin-top a la altura del encabezado fijo
- Con el selector
:is, se puede aplicar el mismo tratamiento a varios elementos como h2, h3 y h4, y usar unidades como ex o lh para definir un espaciado dinámico
4 comentarios
Esto sí que es un gran tip, gracias.
La barra de desplazamiento se ve bien.
Las barras de desplazamiento blancas resaltan demasiado. También lo apliqué de inmediato en GeekNews con dark/light. Resulta que había una forma fácil.
Al compararlo con Naver, la diferencia es grande. ¡GeekNews logró lo que ni siquiera Naver pudo (?) hacer...!