Intermediocss
Unidades de Viewport Móvil (dvh) y Colores OKLCH
Domina las unidades que solucionan el salto de la barra de navegación en iOS/Android y el espacio de color perceptualmente uniforme oklch().
Unidades dinámicas: svh, lvh y dvh
En dispositivos móviles,
100vh causaba desbordamiento porque los navegadores ocultan y muestran su barra de navegación al hacer scroll. Las nuevas unidades resuelven esto:
- svh (Small Viewport Height): Asume la barra visible.
- lvh (Large Viewport Height): Asume la barra oculta.
- dvh (Dynamic Viewport Height): Se adapta en tiempo real.css
1.hero-fullscreen {
2 min-height: 100dvh; /* Pantalla completa exacta en iOS y Android sin saltos */
3 display: flex;
4 align-items: center;
5 justify-content: center;
6}Espacio de color oklch() y color-mix()
oklch(L C H) es un modelo de color moderno donde la luminosidad (L) es constante para la percepción del ojo humano, permitiendo crear temas oscuros y paletas de colores accesibles con facilidad matemática.css
1:root {
2 --brand: oklch(0.65 0.24 270); /* Luminosidad 65%, Croma 0.24, Tono púrpura */
3 --brand-light: color-mix(in oklch, var(--brand) 20%, white); /* Mezcla 20% con blanco */
4 --brand-hover: oklch(from var(--brand) calc(l - 0.1) c h); /* Reduce luminosidad al hover */
5}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (HTML)
Output