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.

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.

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

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

Origine

container

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 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

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

Origine

scroll-snap-align

Supporto dei browser

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

Origine

scroll-snap-stop

Supporto dei browser

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

Origine

overscroll-behavior

Supporto dei browser

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 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

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 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

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 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

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

Origine

margin-block

Supporto dei browser

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

Origine

inset-inline

Supporto dei browser

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

Origine