CSS estável, poderoso e digno de um kit de ferramentas que você pode usar hoje.
Acredito que todo desenvolvedor de front-end precisa saber como usar consultas
de contêiner,
criar uma experiência de alinhamento de rolagem, evitar
position: absolute
com
grade,
criar um círculo rapidamente, usar camadas
em cascata
e alcançar mais com menos usando propriedades
lógicas. Confira uma breve
visão geral de cada uma dessas expectativas.
1. Uma consulta de contêiner
O recurso CSS mais solicitado por 10 anos seguidos agora está estável em todos os navegadores e disponível para uso para consultas sobre largura em 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. Ajuste de rolagem
Experiências de rolagem bem orquestradas diferenciam sua experiência do restante, e o snap de rolagem é a maneira perfeita de combinar a UX de rolagem do sistema e oferecer pontos de parada 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;
}
Saiba mais sobre o potencial desse recurso do CSS nesta coleção de CodePen enorme e inspiradora com cerca de 25 demonstrações.
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. Pilha de grade
Evite a posição absoluta com uma grade CSS de célula única. Depois que eles forem empilhados uns sobre os outros, use as propriedades de justificar e alinhar para posicioná-los.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. Círculo rápido
Há diversas maneiras de fazer círculos no CSS, mas esta é definitivamente a mais mínima.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
5. Controlar variantes com @layer
As camadas em cascata podem ajudar a inserir variantes descobertas ou criadas mais tarde no lugar certo na cascata com o conjunto original de variantes.
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
Em seguida, em um arquivo totalmente diferente, carregado em outro momento aleatório, anexe uma nova variante à camada de botões como se ela estivesse lá com o restante o tempo todo.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
6. Memorize menos e alcance mais com propriedades lógicas
Memorize esse modelo de caixa
e nunca mais se preocupe em
mudar o padding ou a margem esquerda e direita para modos de escrita
internacionais e
direções de
documento.
Ajuste seus estilos de propriedades físicas para lógicas, como
padding-inline
,
margin-inline
,
inset-inline
,
e agora o navegador vai fazer o ajuste.
button { padding-inline: 2ch; padding-block: 1ch; } article > p { text-align: start; margin-block: 2ch; } .something::before { inset-inline: auto 0; }