Questa pagina è stata tradotta dall'API Cloud Translation.

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

CSS degno di nota, potente e stabile, che puoi usare oggi stesso.

Adam Argyle

Credo che ogni sviluppatore front-end debba sapere come utilizzare query, creare un'esperienza di scorrimento, evita position: absolute con griglia, martella rapidamente un cerchio, usa a cascata strati, e raggiungi di più con meno risorse grazie alla logica proprietà. Ecco un breve una panoramica di ognuna di queste aspettative.

1. Una query container

La funzionalità CSS più richiesta da 10 anni di fila è ora stabile su tutti i browser e disponibile per l'uso per le query sulla larghezza del 2023.

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

.card {
  padding: 1rem;
}

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

@container

Supporto dei browser

Origine

container

Supporto dei browser

Origine

2. Scorrimento rapido

Esperienze di scorrimento ben orchestrate distinguono la tua esperienza dalle altre, e scorri snapshot è il modo perfetto per far corrispondere la UX con lo scorrimento del sistema e offrire interruzioni significative punti.

.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 questo articolo enorme e stimolante Raccolta di codepen con circa 25 demo.

scroll-snap-type

Supporto dei browser

Origine

scroll-snap-align

Supporto dei browser

Origine

scroll-snap-stop

Supporto dei browser

Origine

overscroll-behavior

Supporto dei browser

Origine

3. Pila griglia

Evita i valori assoluti di posizione con una griglia CSS a cella singola. Una volta impilati in alto l'uno dall'altro, usa giustifica e allinea le proprietà per posizionarle.

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

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

grid

Supporto dei browser

Origine

4. Cerchia rapida

Ci sono molti modi per creare le cerchie in CSS, ma questo è sicuramente il minimo.

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

aspect-ratio

Supporto dei browser

Origine

5. Controlla le varianti con @layer

Cascade strati può aiutare a inserire varianti scoperte o create in seguito, nel posto giusto nella cascata con insieme originale di varianti.

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

Quindi, in un file completamente diverso, caricato in un altro momento casuale, aggiungi una nuova variante del livello del pulsante, come se fosse presente con gli altri, per tutta la durata.

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

@layer

Supporto dei browser

Origine

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

Memorizza questo one new box model e non dovrai mai preoccuparti modifica della spaziatura interna o del margine sinistro e destro per la scrittura internazionale e documento le indicazioni stradali. Modifica i tuoi stili, dalle proprietà fisiche a quelle logiche, come padding-inline, margin-inline, inset-inline, e ora il browser si occuperà di apportare le modifiche.

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

Origine

margin-block

Supporto dei browser

Origine

inset-inline

Supporto dei browser

Origine