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

CSS degno di attenzione, potente e stabile per la barra degli strumenti che puoi usare oggi.

Adam Argyle

Credo che ogni sviluppatore front-end debba sapere come utilizzare le query contenitore, creare un'esperienza di scorrimento, evitare position: absolute con la griglia, abbattere rapidamente un cerchio, usare livelli a cascata e raggiungere di più con meno utilizzando 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. Scorrimento rapido

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

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 griglia

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