Layout 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.

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.

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.

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.

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.