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

CSS potente, stabile e adatto alla cassetta degli attrezzi che puoi utilizzare oggi.

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 griglia, 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

Supporto dei browser

• 105
• 105
• 110
• 16

Origine

container

Supporto dei browser

• 105
• 105
• 110
• 16

Origine

2. Allineamento scorrimento

Le esperienze di scorrimento ben orchestrate distinguono la tua esperienza da quella degli altri, mentre 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

Supporto dei browser

• 69
• 79
• 99
• 11

Origine

scroll-snap-align

Supporto dei browser

• 69
• 79
• 68
• 11

Origine

scroll-snap-stop

Supporto dei browser

• 75
• 79
• 103
• 15

Origine

overscroll-behavior

Supporto dei browser

• 63
• 18
• 59
• 16

Origine

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

Supporto dei browser

• 57
• 16
• 52
• 10.1

Origine

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

Supporto dei browser

• 88
• 88
• 89
• 15

Origine

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

Supporto dei browser

• 99
• 99
• 97
• 15,4

Origine

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

Supporto dei browser

• 87
• 87
• 66
• 14.1

Origine

margin-block

Supporto dei browser

• 87
• 87
• 66
• 14.1

Origine

inset-inline

Supporto dei browser

• 87
• 87
• 63
• 14.1

Origine