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

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

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

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

Navegadores compatibles

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

Origen

container

Navegadores compatibles

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

Origen

2. Ajuste de desplazamiento

Las experiencias de desplazamiento bien orquestadas te diferencian del resto, y el ajuste del desplazamiento es la forma perfecta de hacer coincidir 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 inspiradora recopilación de Codepen de alrededor de 25 demostraciones.

scroll-snap-type

Navegadores compatibles

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

Origen

scroll-snap-align

Navegadores compatibles

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

Origen

scroll-snap-stop

Navegadores compatibles

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

Origen

overscroll-behavior

Navegadores compatibles

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Origen

3. Pila de cuadrículas

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

Navegadores compatibles

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

Origen

4. Círculo rápido

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

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

Navegadores compatibles

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

Origen

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 un archivo completamente diferente, cargado en otro momento aleatorio, agrega una variante nueva a la capa del botón como si estuviera allí con el resto todo el tiempo.

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

Navegadores compatibles

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

Origen

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

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

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

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

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

Navegadores compatibles

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

Origen

margin-block

Navegadores compatibles

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

Origen

inset-inline

Navegadores compatibles

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

Origen