Esta página foi traduzida pela API Cloud Translation.

6 snippets de CSS que todos os desenvolvedores front-end precisam conhecer em 2023

CSS digno de ferramenta, poderoso e estável que você pode usar atualmente.

Adam Argyle

Acredito que todo desenvolvedor front-end deveria saber como usar contêiner consultas, criar uma experiência de rolagem de rolagem, evite position: absolute com grade, martelar rapidamente um círculo, use em cascata camadas, e alcance mais com menos usando uma lógica . Confira um resumo visão geral de cada uma dessas expectativas.

1. Uma consulta de contêiner

O recurso do CSS mais pedido por 10 anos seguidos é agora estável em vários navegadores e disponível para uso para consultas de largura em 2023.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Compatibilidade com navegadores

Origem

container

Compatibilidade com navegadores

Origem

2. Ajuste de rolagem

Experiências de rolagem bem orquestradas diferenciam sua experiência das outras, e rolar Snap é a maneira perfeita de combinar a UX de rolagem do sistema, fornecendo uma parada significativa pontos.

.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 dos CSS nesta enorme e inspiração Coleção Codepen de cerca de 25 demonstrações.

scroll-snap-type

Compatibilidade com navegadores

Origem

scroll-snap-align

Compatibilidade com navegadores

Origem

scroll-snap-stop

Compatibilidade com navegadores

Origem

overscroll-behavior

Compatibilidade com navegadores

Origem

3. Pilha de grade

Evite a posição absoluta com uma grade CSS de célula única. Depois de empilhados uns dos outros, use a justificativa e alinhar as propriedades para posicioná-las.

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

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

grid

Compatibilidade com navegadores

Origem

4. Círculo rápido

Há muitas maneiras de fazer círculos no CSS, mas esta é definitivamente a mais mínimas.

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

aspect-ratio

Compatibilidade com navegadores

Origem

5. Controlar variantes com @layer

Cascade camadas pode ajudar a inserir variantes descobertos ou criados posteriormente, para o lugar certo na cascata com os conjunto original de variantes.

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

Em seguida, em um arquivo completamente diferente, carregado em outro momento aleatório, uma nova variante para a camada do botão, como se estivesse presente com o restante deles, o tempo todo.

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

@layer

Compatibilidade com navegadores

Origem

6. Memorize menos e alcance mais usando propriedades lógicas

Memorize este modelo de caixa novo. e nunca ter que se preocupar com alteração do padding ou da margem esquerdo e direito para escrita internacional modos e documento rotas novamente. Ajuste seus estilos de propriedades físicas a propriedades lógicas, como padding-inline, margin-inline, inset-inline, e agora o navegador fará o trabalho 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

Compatibilidade com navegadores

Origem

margin-block

Compatibilidade com navegadores

Origem

inset-inline

Compatibilidade com navegadores

Origem