Un CSS estable, potente y digno de herramientas que puedes usar hoy en día.
Creo que todos los desarrolladores de frontend deben saber cómo usar consultas de contenedores, crear una experiencia de captura de desplazamiento, evitar position: absolute con la cuadrícula, marcar rápidamente un círculo, usar capas en cascada y llegar más con menos a través de propiedades lógicas. Aquí hay una visión general
rápida de cada una de esas expectativas.
1. Una consulta de contenedor
La función de CSS más solicitada durante 10 años seguidos ahora es estable en todos los navegadores y está disponible para que la uses en consultas de ancho en 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@containercontainer2. Ajuste de desplazamiento
Las experiencias de desplazamiento bien organizadas diferencian tu experiencia del resto, y el ajuste de desplazamiento es la manera 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 e inspiradora colección de CodePen, que incluye aproximadamente 25 demostraciones.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Pila de rejilla
Evita la posición absoluta con una cuadrícula CSS de una sola celda. Una vez que estén apiladas una encima de la otra, usa justificar y alinear propiedades para posicionarlas.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Círculo rápido
Existen muchas formas de crear círculos en CSS, pero esta es, sin dudas, la más mínima.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Cómo controlar 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 de botones como si estuviera allí con el resto de ellos.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Memoriza menos y llega más con propiedades lógicas
Memoriza este modelo de cuadro nuevo y nunca tengas que preocuparte por cambiar el padding o el margen izquierdo y derecho de los modos de escritura y las instrucciones del documento de nuevo.
Ajusta tus diseños de propiedades físicas a lógicas como padding-inline, margin-inline y inset-inline, y ahora el navegador se encargará del trabajo de ajuste.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}