Se usó la API de Cloud Translation para traducir esta página.

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

CSS estable, potente y digno de herramientas que puedes usar actualmente.

Adam Argyle

Creo que todo desarrollador front-end debería saber cómo usar el contenedor consultas, crear una experiencia de ajuste de desplazamiento, evitar position: absolute con cuadrícula, martillo rápidamente un círculo, usa cascada capas, y llegue a más con menos mediante la página propiedades. Este es un resumen general de cada una de esas expectativas.

1. Una consulta de contenedor

La función de CSS más solicitada durante 10 años seguidos es ahora estables en todos los navegadores y disponible para su uso de 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

Origen

container

Navegadores compatibles

Origen

2. Ajuste de desplazamiento

Las experiencias de desplazamiento bien organizadas hacen que tu experiencia se destaque del resto. y desplazarte Snap es el Es la forma perfecta de hacer coincidir la UX de desplazamiento del sistema y, al mismo tiempo, brindar una parada significativa. puntos.

.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 e inspiradora presentación. Colección de CodePen de alrededor de 25 demostraciones.

scroll-snap-type

Navegadores compatibles

Origen

scroll-snap-align

Navegadores compatibles

Origen

scroll-snap-stop

Navegadores compatibles

Origen

overscroll-behavior

Navegadores compatibles

Origen

3. Pila de rejilla

Evita la posición absoluta con una cuadrícula de CSS de una sola celda. Una vez que estén apiladas encima entre sí, use “justify” y alinear las propiedades para posicionarlas.

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

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

grid

Navegadores compatibles

Origen

4. Círculo rápido

Hay muchas formas de hacer círculos en los CSS, pero esta es definitivamente la más mínimo.

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

aspect-ratio

Navegadores compatibles

Origen

5. Controla variantes con @layer

Cascade capas puede ayudar a insertar variantes descubierto o creado más tarde, en el lugar correcto de la cascada. conjunto original de variantes.

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

Luego, en un archivo totalmente diferente, cargado en otro momento aleatorio, agrega una nueva variante a la capa de botones como si estuviera presente con el resto todo el tiempo.

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

@layer

Navegadores compatibles

Origen

6. Memoriza menos y alcanza más con propiedades lógicas

Memorice este modelo de caja nuevo. y nunca deberán preocuparse por cambiar el relleno o el margen izquierdo y derecho para escritura internacional modos y documento las instrucciones sobre cómo llegar de nuevo. Ajusta tus estilos, desde propiedades físicas hasta propiedades lógicas, como padding-inline: margin-inline, 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

Origen

margin-block

Navegadores compatibles

Origen

inset-inline

Navegadores compatibles

Origen