CSS ha evolucionado radicalmente

El panorama de CSS en 2026 es drasticamente diferente al de hace apenas tres años. Funcionalidades que durante decadas fueron imposibles sin JavaScript ahora se resuelven con puro CSS. En este articulo exploramos las novedades más impactantes y como puedes empezar a usarlas hoy mismo en tus proyectos.

Container Queries: diseño basado en el componente

El problema que resuelven

Historicamente, los media queries nos permitian adaptar el diseño segun el tamaño de la ventana del navegador. Pero en la era de los componentes reutilizables, un mismo componente puede vivir en un sidebar estrecho o en una sección principal ancha. Los media queries no pueden resolver esto.

Las Container Queries permiten que un componente responda al tamaño de su contenedor padre, no de la ventana.

Cómo funcionan

El proceso tiene dos pasos:

  1. Declarar un contenedor con container-type
  2. Usar @container para definir reglas condicionales
/* Paso 1: declarar el contenedor */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* Paso 2: reglas basadas en el contenedor */
@container sidebar (min-width: 300px) {
  .widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Valores de container-type

Valor Comportamiento
inline-size Responde al ancho del contenedor (el más comun)
size Responde tanto al ancho como al alto
normal No establece contencion (valor por defecto)

Container Query Units

CSS también introdujo unidades relativas al contenedor:

  • cqw - 1% del ancho del contenedor
  • cqh - 1% del alto del contenedor
  • cqi - 1% del tamaño inline del contenedor
  • cqb - 1% del tamaño de bloque del contenedor
.card-title {
  font-size: clamp(1rem, 4cqi, 2rem);
}

El selector :has() - el "selector padre" de CSS

El selector :has() es posiblemente la adicion más revolucionaria a CSS en la última decada. Permite seleccionar un elemento basandose en sus descendientes o hermanos posteriores.

Casos de uso prácticos

Formulario interactivo sin JavaScript:

/* Resaltar el fieldset que contiene un input con foco */
fieldset:has(input:focus) {
  background: var(--surface-active);
  border-left: 3px solid var(--color-primary);
}

/* Deshabilitar visualmente un boton si hay inputs vacios */
form:has(input:placeholder-shown) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

Layout condicional:

/* Si el main tiene un aside, usar grid de dos columnas */
main:has(aside) {
  display: grid;
  grid-template-columns: 1fr 300px;
}

/* Si no tiene aside, una sola columna */
main:not(:has(aside)) {
  max-width: 65ch;
  margin-inline: auto;
}

Combinar :has() con otras pseudo-clases

/* Estilizar una lista solo si tiene más de 5 items */
ul:has(li:nth-child(6)) {
  columns: 2;
  column-gap: 2rem;
}

CSS Nesting nativo

Despues de años dependiendo de preprocesadores como Sass, CSS ahora soporta nesting nativo. Esto mejora la legibilidad y reduce la repeticion de selectores.

Sintaxis básica

.card {
  padding: 1.5rem;
  border-radius: 0.75rem;

  .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .card-body {
    margin-top: 1rem;
    line-height: 1.6;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  }

  @media (width < 768px) {
    padding: 1rem;
  }
}

Reglas importantes del nesting

  1. Para selectores de tipo (como p, h2), necesitas usar & o ser explícito con el contexto
  2. Los media queries se pueden anidar directamente
  3. El ampersand & funciona igual que en Sass
.article {
  /* Correcto - con & */
  & p {
    margin-bottom: 1rem;
  }

  /* Correcto - selector de clase directamente */
  .highlight {
    background: yellow;
  }
}

Subgrid: alineacion perfecta entre padre e hijo

subgrid permite que un elemento hijo herede las lineas de grid de su padre. Esto resuelve uno de los problemas más frustrantes del diseño con Grid: alinear contenido entre cards hermanas.

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* header, body, footer */
}

Con subgrid, todos los headers, bodys y footers de las cards se alinean perfectamente entre si, sin importar la longitud del contenido.

@scope: encapsulacion de estilos sin Shadow DOM

La regla @scope permite limitar el alcance de los estilos a un subarbol del DOM, con un limite inferior opcional.

@scope (.card) to (.card-footer) {
  p {
    color: var(--text-secondary);
    line-height: 1.7;
  }

  a {
    color: var(--color-primary);
    text-decoration: underline;
  }
}

Esto aplica estilos solo a los elementos p y a dentro de .card pero fuera de .card-footer.

Soporte actual en navegadores

La mayoria de estas funcionalidades tienen excelente soporte en 2026:

Funcionalidad Chrome Firefox Safari
Container Queries 105+ 110+ 16+
:has() 105+ 121+ 15.4+
CSS Nesting 120+ 117+ 17.2+
Subgrid 117+ 71+ 16+
@scope 118+ 128+ 17.4+

Conclusion

CSS en 2026 es un lenguaje completamente diferente al CSS que conocimos hace cinco años. Con container queries, :has(), nesting nativo, subgrid y @scope, podemos construir interfaces más robustas, más mantenibles y con menos dependencia de JavaScript. El mejor momento para adoptar estas funcionalidades es ahora.