Css on Commentary of Takao

CSS Containment: Aislamiento de renderizado para rendimiento

Mon, 15 Jun 2026 00:00:00 +0900

La propiedad CSS contain permite aislar subárboles del DOM para que el navegador pueda optimizar el renderizado independientemente del resto de la página.

Valores de contain

layout: el layout interno no afecta al exterior. style: los estilos no se escapan. paint: el elemento pinta dentro de sus bounds. size: el elemento necesita dimensiones explícitas.

content-visibility

content-visibility: auto combina containment con lazy rendering. Los elementos fuera de pantalla no se renderizan hasta que se acercan al viewport. Mejora drásticamente LCP en páginas largas.

Optimización de carga de fuentes web

Sun, 15 Mar 2026 00:00:00 +0900

Las fuentes web pueden causar FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text). Optimizar su carga mejora LCP y la experiencia de lectura.

font-display

font-display: swap: muestra texto con fuente del sistema mientras carga. font-display: optional: no descarga si la red es lenta. font-display: block: período de bloqueo corto.

Subset de fuentes

Incluye solo los caracteres necesarios (latino básico, no todos los glifos). Herramientas: glyphhanger, fonttools. Reduce drásticamente el tamaño de archivos.

Recetas CSS creativas con el selector padre :has()

Tue, 10 Mar 2026 00:00:00 +0900

Cómo funciona `:has()`

La pseudo-clase :has() toma una lista de selectores y selecciona un elemento si contiene cierto descendiente o hermano. Soportada en todos los navegadores principales desde 2026.

Receta 1: Estilos de validación de formularios

.form-group:has(input:invalid) { border-left: 3px solid #e74c3c; }

Muestra/oculta mensajes de error y colorea bordes según el estado del input, sin JavaScript.

Receta 2: Layouts dinámicos de tarjetas

Tarjetas con imagen ajustan su padding automáticamente: .card:has(img) { padding: 0; }

Tailwind CSS v4: Novedades y cambios

Thu, 05 Feb 2026 00:00:00 +0900

Tailwind CSS v4 es un rediseño completo. Usa el motor CSS nativo de Cascade Layers, configuración via CSS en lugar de JS, y nuevas utilidades.

Configuración via CSS

Adiós a tailwind.config.js. La configuración se hace en CSS con @theme, @utility, @variant. @import "tailwindcss" reemplaza las directivas anteriores.

Rendimiento

Engine de CSS nativo sin PostCSS. Compilación 10x más rápida. Cero dependencias de JavaScript en tiempo de ejecución.

Nuevas utilidades

inset-*, field-sizing-*, @starting-style para animaciones de entrada. color-mix(), light-dark(). Soporte mejorado para contenedores.

Previniendo el Cumulative Layout Shift con CSS aspect-ratio

Wed, 10 Dec 2025 00:00:00 +0900

Entendiendo Cumulative Layout Shift

CLS es una métrica de Core Web Vitals que mide la estabilidad visual. Un CLS alto daña la experiencia de usuario y el SEO. La causa principal son elementos multimedia que cargan sin espacio reservado.

Cómo funciona aspect-ratio

aspect-ratio declara la proporción ancho/alto de un elemento. El navegador reserva espacio, evitando saltos de layout.

.responsive-video { aspect-ratio: 16 / 9; width: 100%; height: auto; }

Uso con imágenes

Reemplaza el viejo truco de padding-bottom. Combina con max-width y object-fit para resultados óptimos.

Implementando modo oscuro simple con CSS light-dark()

Fri, 10 Oct 2025 00:00:00 +0900

El problema del modo oscuro tradicional

Tradicionalmente requería reglas CSS duplicadas en @media (prefers-color-scheme: dark). light-dark() elimina esta duplicación.

La función light-dark()

Acepta dos colores y retorna el que coincide con el esquema actual del usuario: color: light-dark(black, white).

Configuración de color-scheme

Requiere declarar los esquemas soportados: color-scheme: light dark; en :root o mediante <meta name="color-scheme">.

Variables de tema simplificadas

:root { --bg: light-dark(#ffffff, #1a1a2e); --text: light-dark(#111111, #e0e0e0); }

Sin media queries. El navegador maneja el cambio automáticamente.

Sintaxis estándar de anidamiento CSS sin preprocesadores

Fri, 15 Aug 2025 00:00:00 +0900

Introducción

El anidamiento CSS ahora es nativo en todos los navegadores modernos, sin necesidad de Sass, Less o PostCSS.

Sintaxis básica

.card { background-color: #fff; .card-title { font-size: 1.5rem; } &:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } }

Ya no se requiere el prefijo & para anidar selectores de clase o elemento.

Diferencia clave con Sass

CSS nativo NO soporta concatenación de sufijos tipo BEM (&--large es inválido). En su lugar, escribe la clase completa: &.button--large.

Posicionamiento del &

Puedes usar & al final o en medio de un selector para estilos contextuales: .dark-mode & { color: #fff; }.

Diseñando layouts modulares con CSS Container Queries

Thu, 10 Jul 2025 00:00:00 +0900

Introducción

Las Media Queries (@media) cambian estilos según el viewport. CSS Container Queries (@container) permiten estilar componentes según el ancho de su contenedor padre, ideal para componentes reutilizables.

Viewport vs Container

Media queries dependen del ancho de la ventana. Container queries dependen del contenedor padre inmediato, permitiendo que un mismo componente se adapte a diferentes contextos.

Configuración básica

Registrar el padre con container-type: inline-size 2. Escribir reglas con @container (min-width: 400px)

.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) { .my-card { flex-direction: row; } }

Unidades de container query

cqw (1% del ancho), cqh (1% del alto), cqmin, cqmax. Útiles para tipografía dinámica: font-size: clamp(1rem, 5cqw, 2rem).

Alineación perfecta con CSS Grid Subgrid

Sat, 10 May 2025 00:00:00 +0900

Introducción

Alinear componentes anidados entre columnas en layouts de tarjetas es un desafío común. CSS Grid subgrid resuelve esta limitación permitiendo que grids anidados hereden los tracks del padre.

La limitación de los grids anidados

Con Flexbox, los contenedores de tarjetas se alinean en altura pero los elementos internos (títulos, descripciones, botones) no se alinean entre tarjetas hermanas.

Solución con subgrid

.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.card-title { grid-row: 1; } .card-desc { grid-row: 2; } .card-btn { grid-row: 3; }

Los títulos, descripciones y botones se alinean perfectamente entre tarjetas, independientemente de la longitud del contenido.

Transiciones de página suaves con View Transitions API

Sat, 05 Apr 2025 00:00:00 +0900

Introducción

La View Transitions API permite al navegador capturar estados de la página antes y después de una modificación del DOM, ejecutando una transición acelerada por hardware.

Configuración básica (SPA)

Envuelve tu función de actualización DOM en document.startViewTransition(). El navegador captura los estados saliente y entrante, ejecutando un crossfade de 0.25 segundos por defecto.

Personalización CSS

::view-transition-old(root) { animation: 0.3s ease-out both slide-out; }
::view-transition-new(root) { animation: 0.3s ease-out both slide-in; }

Crea transiciones de deslizamiento, fundido, o cualquier animación personalizada.

Introducción al posicionamiento con anclajes CSS

Mon, 10 Feb 2025 00:00:00 +0900

Introducción

Posicionar elementos flotantes (tooltips, popovers, menús) respecto a un elemento de referencia ha sido un desafío complejo. Tradicionalmente se requería JavaScript con cálculos continuos de coordenadas usando getBoundingClientRect(). La API de Posicionamiento con Anclajes CSS resuelve esto manejando coordenadas flotantes de forma nativa en el navegador.

¿Qué es CSS Anchor Positioning?

Es un estándar que permite anclar un elemento con posición absoluta o fija directamente a otro elemento usando solo CSS. Beneficios: cero JavaScript, rendimiento superior (compositor thread), y aislamiento de diseño evitando restricciones de recorte del padre.

Estilos con alcance CSS: @scope y estrategias de encapsulación

Sun, 15 Dec 2024 00:00:00 +0900

El alcance de CSS ha sido un desafío constante. @scope introduce control de cascada basado en proximidad, aplicado por el navegador.

La regla @scope

@scope (.card) { .title { font-size: 1.25rem; } } limita estilos a un elemento raíz y sus descendientes. La novedad clave es la proximidad de alcance: estilos más cercanos al elemento tienen prioridad. Puedes definir límites con to (.card__footer).

Shadow DOM

Aislamiento total de estilos, marcado y comportamiento. Esencial para bibliotecas de widgets distribuidos, pero añade sobrecarga de ejecución.

Funciones trigonométricas CSS: Matemáticas en tus hojas de estilo

Tue, 05 Nov 2024 00:00:00 +0900

CSS ha evolucionado para incluir funciones trigonométricas: sin(), cos(), tan(), atan2(), asin(), acos(). Soportadas en Chrome 111+, Firefox 108+, Safari 15.4+.

Patrones de onda y oscilaciones

.wave { transform: translateY(calc(sin(var(--phase)) * 20px)); }

Crea efectos de onda puramente CSS. Combinado con @property para iterar ángulos.

Layouts circulares

Las fórmulas x = cx + r * cos(angle) y y = cy + r * sin(angle) permiten layouts circulares sin JavaScript. Power menús radiales, gráficos de donut, órbitas.

CSS Popover API: Superposiciones nativas sin JavaScript

Tue, 20 Aug 2024 00:00:00 +0900

Introducción

Construir tooltips, menús y modales requería JavaScript. La CSS Popover API proporciona una forma declarativa nativa con manejo de posición, toggle, foco y cierre.

Atributos básicos

popover marca un elemento como superposición. popovertarget vincula un botón al popover. Modos: auto (cierre al hacer clic fuera o Escape) y manual (cierre programático).

API Toggle

Métodos: showPopover(), hidePopover(), togglePopover(). Eventos: beforetoggle y toggle con oldState y newState.

Light dismiss

Los popovers auto se cierran al hacer clic fuera, presionar Escape o abrir otro popover.

Animaciones CSS basadas en scroll: El futuro de los efectos de desplazamiento

Tue, 25 Jun 2024 00:00:00 +0900

El problema de los eventos scroll en JavaScript

Los efectos basados en scroll tradicionalmente usaban listeners de JavaScript en el hilo principal, causando jank y mala experiencia. CSS Scroll-Driven Animations mueven el tracking al compositor thread.

Conceptos clave

scroll-timeline vincula una animación a la posición de scroll. view-timeline la vincula a la visibilidad de un elemento. animation-timeline asigna una animación a un timeline.

Scroll Progress Timelines

.progress-bar { animation: fill-progress linear; animation-timeline: scroll(); }

La función scroll() crea un timeline anónimo en el contenedor de scroll más cercano.

CSS @layer: Gestión de la cascada con arquitectura de capas

Tue, 11 Jun 2024 00:00:00 +0900

@layer da control explícito sobre el orden de la cascada, independientemente de la especificidad o el orden de las fuentes.

El problema de la cascada antes de @layer

Antes, la gestión de la cascada se basaba en convenciones (BEM, SMACSS, ITCSS) que no eran aplicadas por el navegador.

Cómo funciona @layer

Agrupa estilos en capas con nombre y define su precedencia. Las capas posteriores sobrescriben a las anteriores, sin importar la especificidad.

Propiedades personalizadas CSS: Patrones estratégicos para estilos escalables

Tue, 09 Apr 2024 00:00:00 +0900

CSS Custom Properties (variables CSS) han cambiado fundamentalmente cómo escribimos y mantenemos hojas de estilo. A diferencia de las variables de preprocesadores, son dinámicas, participan en la cascada y la herencia.

Gestión de design tokens

:root { --color-primary-500: #3b82f6; --space-md: 1rem; --font-sans: "Inter", system-ui, sans-serif; }

Usa nomenclatura BEM-inspirada: --bloque__elemento--modificador para tokens de componente y --categoria-propiedad-variante para globales.

Cambio de tema

Define tema claro en :root y sobreescribe en [data-theme="dark"]. Añade prefers-color-scheme para respetar la preferencia del sistema.

Patrones avanzados de CSS Grid: Layouts complejos simplificados

Fri, 15 Dec 2023 00:00:00 +0900

CSS Grid ha transformado el diseño de layouts web. Más allá de grid-template-columns: 1fr 1fr 1fr hay un potente conjunto de características.

Named Grid Areas

Define layouts que se leen como un wireframe directamente en CSS. El reordenamiento responsivo es trivial cambiando grid-template-areas.

Auto-Fill vs Auto-Fit

auto-fill preserva tracks vacíos como espacio; auto-fit los colapsa a cero. Usa auto-fill para columnas predecibles y auto-fit para layouts fluidos.

Dense Packing

grid-auto-flow: dense rellena huecos moviendo elementos a filas anteriores. Cuidado con el orden de lectura para accesibilidad.

Css on Commentary of Takao

CSS Containment: Aislamiento de renderizado para rendimiento

Valores de contain

content-visibility

Optimización de carga de fuentes web

font-display

Subset de fuentes

Recetas CSS creativas con el selector padre :has()

Cómo funciona :has()

Receta 1: Estilos de validación de formularios

Receta 2: Layouts dinámicos de tarjetas

Tailwind CSS v4: Novedades y cambios

Configuración via CSS

Rendimiento

Nuevas utilidades

Previniendo el Cumulative Layout Shift con CSS aspect-ratio

Entendiendo Cumulative Layout Shift

Cómo funciona aspect-ratio

Uso con imágenes

Implementando modo oscuro simple con CSS light-dark()

El problema del modo oscuro tradicional

La función light-dark()

Configuración de color-scheme

Variables de tema simplificadas

Sintaxis estándar de anidamiento CSS sin preprocesadores

Introducción

Sintaxis básica

Diferencia clave con Sass

Posicionamiento del &

Diseñando layouts modulares con CSS Container Queries

Introducción

Viewport vs Container

Configuración básica

Unidades de container query

Alineación perfecta con CSS Grid Subgrid

Introducción

La limitación de los grids anidados

Solución con subgrid

Transiciones de página suaves con View Transitions API

Introducción

Configuración básica (SPA)

Personalización CSS

Introducción al posicionamiento con anclajes CSS

Introducción

¿Qué es CSS Anchor Positioning?

Estilos con alcance CSS: @scope y estrategias de encapsulación

La regla @scope

Shadow DOM

Funciones trigonométricas CSS: Matemáticas en tus hojas de estilo

Patrones de onda y oscilaciones

Layouts circulares

CSS Popover API: Superposiciones nativas sin JavaScript

Introducción

Atributos básicos

API Toggle

Light dismiss

Animaciones CSS basadas en scroll: El futuro de los efectos de desplazamiento

El problema de los eventos scroll en JavaScript

Conceptos clave

Scroll Progress Timelines

CSS @layer: Gestión de la cascada con arquitectura de capas

El problema de la cascada antes de @layer

Cómo funciona @layer

Propiedades personalizadas CSS: Patrones estratégicos para estilos escalables

Gestión de design tokens

Cambio de tema

Patrones avanzados de CSS Grid: Layouts complejos simplificados

Named Grid Areas

Auto-Fill vs Auto-Fit

Dense Packing

Cómo funciona `:has()`