6 fragmentos de CSS que todo desarrollador front-end debe conocer en 2023

CSS estable, potente y digno de tu caja de herramientas que puedes usar hoy mismo.

Adam Argyle

Creo que todos los desarrolladores de frontend deberían saber cómo usar las consultas de contenedor, crear una experiencia de ajuste de desplazamiento, evitar position: absolute con cuadrícula, crear rápidamente un círculo, usar capas en cascada y llegar a más personas con menos recursos a través de propiedades lógicas. A continuación, se incluye un breve resumen de cada una de esas expectativas.

1. Una consulta de contenedor

La función de CSS más solicitada durante 10 años consecutivos, ahora es estable en todos los navegadores y está disponible para que la uses en las consultas de ancho en 2023.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}
@container

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

container

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

2. Ajuste de desplazamiento

Las experiencias de desplazamiento bien orquestadas distinguen tu experiencia del resto, y el ajuste de desplazamiento es la manera perfecta de igualar la UX de desplazamiento del sistema y, al mismo tiempo, proporcionar puntos de detención significativos.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

Obtén más información sobre el potencial de esta función de CSS en esta enorme y sorprendente colección de Codepen de alrededor de 25 demostraciones.

scroll-snap-type

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Source

scroll-snap-align

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Source

scroll-snap-stop

Browser Support

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Source

overscroll-behavior

Browser Support

  • Chrome: 144.
  • Edge: 18.
  • Firefox: 150.
  • Safari: 16.

Source

3. Pila de cuadrícula

Evita la posición absoluta con una cuadrícula CSS de una sola celda. Una vez que estén apilados uno sobre el otro, usa las propiedades de justificación y alineación para posicionarlos.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}
grid

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

4. Círculo rápido

Hay muchas formas de crear círculos en CSS, pero esta es, sin duda, la más minimalista.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}
aspect-ratio

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

Source

5. Controla las variantes con @layer

Las capas en cascada pueden ayudar a insertar variantes descubiertas o creadas más adelante en el lugar correcto de la cascada con el conjunto original de variantes.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Luego, en algún otro archivo completamente diferente, cargado en algún otro momento aleatorio, agrega una nueva variante a la capa del botón como si hubiera estado allí con el resto todo este tiempo.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}
@layer

Browser Support

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Source

6. Memoriza menos y llega a más con las propiedades lógicas

Memoriza este nuevo modelo de caja y nunca más tendrás que preocuparte por cambiar el padding o el margen izquierdo y derecho para los modos de escritura y las direcciones del documento internacionales. Ajusta tus estilos de propiedades físicas a lógicas, como padding-inline, margin-inline, inset-inline, y el navegador se encargará del ajuste.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}
padding-inline

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

margin-block

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

inset-inline

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Source