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.
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;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
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
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
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
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; }