3 propiedades modernas de CSS que debes agregar sí o sí a tu sitio web

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

[amino014]

Esto sí que es un gran tip, gracias.

[arfwene]

La barra de desplazamiento se ve bien.

[xguru]

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.

[kuroneko]

Al compararlo con Naver, la diferencia es grande. ¡GeekNews logró lo que ni siquiera Naver pudo (?) hacer...!