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

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;
  }
}
@container

Compatibilidade com navegadores

  • Chrome: 105
  • Borda: 105.
  • Firefox: 110.
  • Safari: 16.

Origem

container

Compatibilidade com navegadores

  • Chrome: 105
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origem

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

Compatibilidade com navegadores

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Origem

scroll-snap-align

Compatibilidade com navegadores

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Origem

scroll-snap-stop

Compatibilidade com navegadores

  • Chrome: 75.
  • Borda: 79.
  • Firefox: 103
  • Safari: 15

Origem

overscroll-behavior

Compatibilidade com navegadores

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Origem

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

Compatibilidade com navegadores

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Origem

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

Compatibilidade com navegadores

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15

Origem

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

Compatibilidade com navegadores

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Origem

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;
}
padding-inline

Compatibilidade com navegadores

  • Chrome: 87.
  • Borda: 87.
  • Firefox: 66.
  • Safari: 14.1.

Origem

margin-block

Compatibilidade com navegadores

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Origem

inset-inline

Compatibilidade com navegadores

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Origem