Centratura in CSS

Segui 5 tecniche di centratura mentre vengono sottoposte a una serie di test per vedere quale è la più resiliente al cambiamento.

Adam Argyle

La centratura in CSS è una sfida nota, piena di battute e prese in giro. 2020 CSS è cresciuto e ora possiamo ridere di quelle battute onestamente, non a denti stretti.

Se preferisci i video, ecco una versione di questo post su YouTube:

La sfida

Esistono diversi tipi di centratura. A seconda dei casi d'uso, del numero di elementi da centrare e così via. Per dimostrare la logica alla base di una tecnica di centratura "vincente", ho creato The Resilience Ringer. Si tratta di una serie di stress test per ogni strategia di centratura per trovare un equilibrio e osservare le prestazioni. Alla fine, svelo la tecnica con il punteggio più alto, nonché quella "più preziosa". Ci auguriamo che tu possa acquisire nuove tecniche e soluzioni di centratura.

Resilienza

Resilience Ringer è una rappresentazione delle mie convinzioni secondo cui una strategia di centratura dovrebbe essere resiliente ai layout internazionali, alle aree visibili di dimensioni variabili, alle modifiche del testo e ai contenuti dinamici. Questi principi hanno contribuito a definire i seguenti test di resilienza per le tecniche di centratura:

1. Compresso: la centratura deve essere in grado di gestire le modifiche alla larghezza
2. Schiacciato: la centratura dovrebbe essere in grado di gestire le modifiche all'altezza
3. Duplicate: centering should be dynamic to number of items
4. Edit: centering should be dynamic to length and language of content
5. Flow: la centratura deve essere indipendente dalla direzione del documento e dalla modalità di scrittura

La soluzione vincente deve dimostrare la sua resilienza mantenendo i contenuti al centro mentre vengono schiacciati, compressi, duplicati, modificati e scambiati in varie modalità e direzioni linguistiche. Un centro affidabile e resiliente, un centro sicuro.

Legend

Ho fornito alcuni suggerimenti visivi sui colori per aiutarti a mantenere alcune meta-informazioni nel contesto:

• Un bordo rosa indica la proprietà degli stili di centratura
• La casella grigia è lo sfondo del container che cerca di avere elementi centrati
• Ogni elemento secondario ha un colore di sfondo bianco, in modo da poter vedere gli eventuali effetti della tecnica di centratura sulle dimensioni della casella secondaria.

I 5 concorrenti

5 tecniche di centratura entrano nel ring della resilienza, ma solo una riceverà la corona della resilienza 👸.

1. Centro contenuti

Modifica e duplicazione dei contenuti con VisBug

1. Squish: ottimo!
2. Squash: ottimo!
3. Duplicato: ottimo.
4. Modifica: ottimo!
5. Flusso: ottimo!

Sarà difficile battere la concisione di display: grid e la sintassi abbreviata di place-content. Poiché centra e giustifica gli elementi secondari collettivamente, è una tecnica di centratura efficace per gruppi di elementi destinati alla lettura.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Pro

• I contenuti sono centrati anche in caso di spazio limitato e overflow
• Le modifiche e la manutenzione sono centralizzate in un unico posto
• La spaziatura garantisce una spaziatura uniforme tra n elementi secondari
• La griglia crea righe per impostazione predefinita

Contro

• L'elemento secondario più largo (max-content) imposta la larghezza per tutti gli altri. Questo argomento verrà approfondito nella sezione Gentle Flex.

Ideale per layout macro contenenti paragrafi e titoli, prototipi o, in generale, elementi che richiedono una centratura leggibile.

Nota: place-content non è esclusivo di display: grid. display: flex può anche trarre vantaggio dalle abbreviazioni place-content e place-item.

2. Gentle Flex

1. Squish: ottimo!
2. Squash: ottimo!
3. Duplicato: ottimo.
4. Modifica: bene.
5. Flow: ottimo!

Gentle Flex è una strategia di centratura più pura. È morbido e delicato, perché, a differenza di place-content: center, le dimensioni delle caselle secondarie non vengono modificate durante la centratura. Nel modo più delicato possibile, tutti gli elementi vengono impilati, centrati e distanziati.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Pro

• Gestisce solo l'allineamento, la direzione e la distribuzione
• Modifiche e manutenzione in un unico posto
• La spaziatura garantisce una spaziatura uniforme tra n elementi secondari

Contro

• Maggior numero di righe di codice

Ideale per layout macro e micro.

Termine chiave: i layout macro sono come gli stati o i territori di un paese, ovvero zone di copertura molto ampie e di alto livello. Le zone create dai layout macro tendono a contenere più layout. Meno superficie copre il layout, meno diventa un macro layout. Man mano che un layout copre una superficie minore o contiene meno layout, diventa sempre più un micro layout.

3. Autobot

1. Schiaccia: ottimo
2. Squash: ottimo
3. Duplicazione: fine
4. Modifica: ottimo
5. Flusso: ottimo

Il container è impostato su flex senza stili di allineamento, mentre gli elementi secondari diretti hanno uno stile con margini automatici. margin: autoC'è qualcosa di nostalgico e meraviglioso nel lavorare su tutti i lati dell'elemento.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Pro

• Trucco divertente
• Rapido e approssimativo

Contro

• Risultati imbarazzanti in caso di overflow
• L'affidamento sulla distribuzione anziché sullo spazio vuoto significa che i layout possono essere visualizzati con elementi secondari che si toccano ai lati
• Essere "spinti" in posizione non sembra ottimale e può comportare una modifica alle dimensioni del riquadro del bambino

Ideale per centrare icone o pseudo-elementi.

4. Fluffy Center

1. Schiaccia: non valido
2. Squash: non valido
3. Duplicato: non valido
4. Modifica: bene.
5. Flow: ottimo! (purché utilizzi le proprietà logiche)

Il concorrente "fluffy center" è di gran lunga il più interessante ed è l'unica tecnica di centratura interamente di proprietà dell'elemento/elemento secondario. Vedi il nostro bordo interno rosa?

.fluffy-center {
  padding: 10ch;
}

Pro

• Protegge i contenuti
• Atomico
• Ogni test contiene segretamente questa strategia di centratura
• Spazio tra le parole

Contro

• Illusione di non essere utile
• C'è un conflitto tra il container e gli elementi, naturalmente, poiché entrambi sono molto rigidi riguardo alle loro dimensioni

Ideale per centrare parole o frasi, tag, pillole, pulsanti, chip e altro ancora.

5. Pop & Plop

1. Squish: okay
2. Squash: okay
3. Duplicato: non valido
4. Modifica: fine
5. Flusso: buono

Questo "salta" perché il posizionamento assoluto fa uscire l'elemento dal flusso normale. La parte "plop" del nome deriva dal momento in cui lo trovo più utile: quando lo posiziono sopra altri elementi. È una tecnica di centratura degli overlay classica e pratica, flessibile e dinamica in base alle dimensioni dei contenuti. A volte è sufficiente inserire un'interfaccia utente sopra un'altra.

Pro

• Utile
• Affidabile
• Quando ne hai bisogno, è prezioso

Contro

• Codice con valori percentuali negativi
• Richiede position: relative per forzare un blocco contenitore
• Interruzioni di riga anticipate e scomode
• Può essercene solo uno per blocco contenitore senza ulteriori interventi

Ideale per finestre modali, toast e messaggi, stack ed effetti di profondità, popover.

Il vincitore

Se fossi su un'isola e potessi avere una sola tecnica di centratura, sarebbe…

[rullo di tamburi]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Puoi sempre trovarlo nei miei fogli di stile perché è utile sia per i macro che per i micro layout. È una soluzione affidabile a tutto tondo con risultati che corrispondono alle mie aspettative. Inoltre, dato che sono un fanatico del dimensionamento intrinseco, tendo a passare a questa soluzione. È vero, è molto da digitare, ma i vantaggi che offre superano il codice aggiuntivo.

Il miglior giocatore

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center è così micro che è facile trascurarlo come tecnica di centratura, ma è un elemento fondamentale delle mie strategie di centratura. È così atomico che a volte mi dimentico di usarlo.

Conclusione

Quali sono le cose che interrompono le tue strategie di concentrazione? Quali altre sfide potrebbero essere aggiunte al percorso di resilienza? Ho preso in considerazione la traslazione e un interruttore di altezza automatica sul container… cos'altro?

Ora che sai come ho fatto io, come faresti tu? Diversifichiamo i nostri approcci e impariamo tutti i modi per creare sul web. Segui il codelab con questo post per creare il tuo esempio di centratura, proprio come quelli di questo post. Twittami la tua versione e la aggiungerò alla sezione Remix della community di seguito.

Remix della community

• CSS Tricks con un blog post