Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

CSS potente, stabile e degno di essere aggiunto alla tua cassetta degli attrezzi, che puoi utilizzare oggi stesso.

Adam Argyle

Credo che ogni sviluppatore front-end dovrebbe sapere come utilizzare le query contenitore, creare un'esperienza di snap scroll, evitare position: absolute con griglia, creare rapidamente un cerchio, utilizzare i livelli a cascata e raggiungere un pubblico più ampio con meno risorse tramite le proprietà logiche. Ecco una breve panoramica di ciascuna di queste aspettative.

1. Una query sui container

La funzionalità CSS più richiesta per 10 anni consecutivi è ora stabile su tutti i browser e disponibile per l'utilizzo 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

Source

container

Browser Support

Source

2. Allineamento dello scorrimento

Le esperienze di scorrimento ben orchestrate distinguono la tua esperienza dalle altre. Lo scorrimento istantaneo è il modo perfetto per abbinare l'esperienza utente di scorrimento del sistema, fornendo al contempo punti di arresto 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 vasta e stimolante raccolta di Codepen di circa 25 demo.

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Pila a griglia

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

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

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

grid

Browser Support

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

Source

5. Controllare le varianti con @layer

I livelli a cascata possono aiutare a inserire le varianti scoperte o create in un secondo momento nel posto giusto della cascata con il set 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 sempre stata lì con le altre.

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

@layer

Browser Support

Source

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

Memorizza questo nuovo modello di casella e non dovrai più preoccuparti di modificare il padding o il margine sinistro e destro per le modalità di scrittura internazionali e le direzioni dei documenti. Modifica gli stili dalle proprietà fisiche a quelle logiche, ad esempio padding-inline, margin-inline, inset-inline, e ora il browser si occuperà della regolazione.

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

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

6 snippet CSS che ogni sviluppatore front-end dovrebbe conoscere nel 2023 Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

1. Una query sui container

2. Allineamento dello scorrimento

3. Pila a griglia

4. Cerchio rapido

5. Controllare le varianti con @layer

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

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