Una risorsa CSS affidabile, potente e stabile che puoi utilizzare subito.
Credo che ogni sviluppatore front-end dovrebbe sapere come utilizzare le query di container, creare un'esperienza di blocco di scorrimento, evitare position: absolute con la griglia, lanciare rapidamente un cerchio, utilizzare i livelli a cascata e raggiungere di più con meno risorse tramite le proprietà logiche. Ecco una breve
panoramica di queste aspettative.
1. Una query container
La funzionalità CSS più richiesta per 10 anni di fila, è ora stabile su tutti i browser e disponibile per essere utilizzata 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;
}
}
@containercontainer2. Allineamento di scorrimento
Esperienze di scorrimento ben orchestrate distinguono la tua esperienza dalle altre, mentre lo snap di scorrimento è il modo perfetto per abbinare l'UX di scorrimento del sistema, fornendo 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-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Pila di griglia
Evita posizioni assolute con una griglia CSS a cella singola. Una volta impilate, utilizza le proprietà Giustifica e allinea per posizionarle.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Cerchio rapido
Esistono molti modi per creare le cerchie in CSS, ma questo è sicuramente il più minimo.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Controllare le varianti con @layer
I livelli a cascata possono aiutare a inserire le varianti scoperte o create in un secondo momento nella posizione giusta nella 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 lì con il resto per tutto il tempo.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Memorizzare meno e raggiungere di più grazie alle proprietà logiche
Memorizza questo nuovo modello a scatola e non devi più preoccuparti di modificare la spaziatura interna o il margine a sinistra e a destra per le modalità di scrittura internazionali e le indicazioni
per i documenti.
Modifica gli stili, da proprietà fisiche a proprietà logiche come
padding-inline,
margin-inline
inset-inline
e ora sarà il browser a occuparsi della regolazione.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}