6 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2023

CSS potente, stabile e degno di una cassetta degli attrezzi che puoi utilizzare oggi stesso.

Adam Argyle

Credo che ogni sviluppatore front-end debba sapere come utilizzare le query del contenitore, creare un'esperienza di snap scorrimento, evitare position: absolute con grid, creare rapidamente un cerchio, utilizzare livelli a cascata, e ottenere di più con meno tramite le proprietà logiche. Ecco una breve panoramica di ciascuna di queste aspettative.

1. Una query sul contenitore

La funzionalità CSS più richiesta per 10 anni consecutivi è ora stabile su tutti i browser e potrai utilizzarla per le query sulla larghezza nel 2023.

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

.card {
  padding: 1rem;
}

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

@container

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

2. Allineamento scorrimento

Le esperienze di scorrimento ben orchestrate distinguono la tua esperienza da quella degli altri e la snap scrolling è il modo perfetto per abbinare l'esperienza di scorrimento del sistema, offrendo al contempo punti di interruzione significativi.

.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;
}

Scopri di più sul potenziale di questa funzionalità CSS in questa enorme e stimolante raccolta di Codepen di circa 25 demo.

scroll-snap-type

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

3. Pila di griglie

Evita la posizione assoluta con una griglia CSS a una cella. Una volta impilati uno sopra l'altro, utilizza le proprietà giustifica e allinea per posizionarli.

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

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

grid

Browser Support

• 57
• 16
• 52
• 10.1

Source

4. Cerchio rapido

Esistono molti modi per creare cerchi in CSS, ma questo è sicuramente il più minimale.

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

aspect-ratio

Browser Support

• 88
• 88
• 89
• 15

Source

5. Controllare le varianti con @layer

I livelli cascade possono aiutare a inserire le varianti scoperte o create in un secondo momento nel punto giusto della struttura a cascata con l'insieme originale di varianti.

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

Poi, in un file completamente diverso, caricato in un altro momento casuale, aggiungi una nuova variante al livello del pulsante come se fosse stata lì con il resto per tutto questo tempo.

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

@layer

Browser Support

• 99
• 99
• 97
• 15.4

Source

6. Memorizza meno e raggiungi di più con le proprietà logiche

Memorizza questo nuovo modello di riquadro e non dovrai più preoccuparti di modificare i margini o i rientri sinistro e destro per le modalità di scrittura e le direzioni del documento internazionali. Modifica gli stili dalle proprietà fisiche a quelle logiche come padding-inline, margin-inline, inset-inline, e ora il browser eseguirà la modifica.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source