CSS digno de ferramenta, poderoso e estável que você pode usar hoje.
Acredito que todo desenvolvedor front-end precisa saber como usar consultas
de contêiner,
criar uma experiência de ajuste de rolagem, evitar
position: absolute com
grade,
interromper um círculo rapidamente, usar camadas
em cascata
e alcançar mais com menos usando propriedades
lógicas. Aqui está uma visão geral
rápida de cada uma dessas expectativas.
1. Uma consulta de contêiner
O recurso de CSS mais solicitado há 10 anos consecutivo, agora está estável em todos os navegadores e está disponível para você usar para consultas de largura em 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@containercontainer2. Ajustar a rolagem
Experiências de rolagem bem orquestradas diferenciam sua experiência das outras, e o ajuste de rolagem é a maneira perfeita de combinar a UX de rolagem do sistema, fornecendo 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 CSS nesta grande e inspiradora coleção do Codepen com cerca de 25 demonstrações.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Pilha de grade
Evite posição absoluta com uma grade CSS de célula única. Depois de empilhadas umas sobre as, use as propriedades justificar e alinhar para posicioná-las.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Círculo rápido
Há muitas maneiras de fazer círculos no CSS, mas essa é definitivamente a mais mínima.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Controlar variantes com @layer
As camadas em cascata podem ajudar a inserir variantes descobertas ou criadas posteriormente 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 todo o tempo.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Memorize menos e alcance mais com propriedades lógicas
Memorize este um novo modelo de caixa
e não precise se preocupar em
mudar o padding ou a margem esquerda e direita em modos de
gravação internacionais e
rotas de
documento novamente.
Ajuste os estilos de propriedades físicas para lógicos, como
padding-inline,
margin-inline,
inset-inline.
Agora o navegador fará o ajuste.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}