Centratura in CSS

Segui cinque tecniche di centratura nel corso di una serie di test per vedere quale è la più resistente al cambiamento.

Adam Argyle

Centrare in CSS è una sfida famosa, piena di scherzi e scherzi. 2020 Il CSS è cresciuto e ora possiamo ridere a quelle battute onestamente, non a denti stretti.

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

La sfida

Esistono diversi tipi di centratura. che comprende casi d'uso diversi, 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". È una serie di stress test per ogni strategia di centratura per bilanciarsi e per osservarne le prestazioni. Alla fine, scelgo la tecnica per ottenere il punteggio più alto e la tecnica "più preziosa". Spero che tu riesca ad adottare le nuove tecniche e soluzioni di centratura.

Il clamoroso della resilienza

La suoneria Resilience è una rappresentazione della mia convinzione secondo cui una strategia di centratura dovrebbe essere resiliente a layout internazionali, aree visibili di dimensioni variabili, modifiche di testo e contenuti dinamici. Questi principi hanno contribuito a definire i seguenti test di resilienza per far durare le tecniche di centratura:

1. Schiacciato: la centratura dovrebbe essere in grado di gestire le modifiche alla larghezza
2. Squadrato: la centratura dovrebbe essere in grado di gestire le modifiche all'altezza
3. Duplica: la centratura deve essere dinamica in base al numero di elementi
4. Modifica: la centratura deve essere dinamica rispetto alla lunghezza e alla lingua dei contenuti
5. Flusso: 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, schiacciati, duplicati, modificati e scambiati in varie modalità e direzioni linguistiche. Centro affidabile e resiliente, un centro sicuro.

Legenda

Ho fornito alcune indicazioni visive 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 contenitore, che cerca di avere elementi centrati
• Ogni bambino ha un colore di sfondo bianco, quindi puoi vedere gli eventuali effetti che la tecnica di centratura ha sulle dimensioni delle caselle secondarie (se presenti)

I 5 concorrenti

Entrano in Resilience Ringer 5 tecniche di centratura, solo una riceverà la Corona di resilienza 👸.

1. Centro contenuti

Modifica e duplicazione di contenuti con VisBug

1. Schiaccia: Ottimo!
2. Squash: ottimo!
3. Duplicato: perfetto.
4. Modifica: ottimo!
5. Flusso: fantastico!

Sarà difficile battere la concisione di display: grid e l'abbreviazione di place-content. Poiché centra e giustifica i bambini collettivamente, è una solida tecnica di centratura per gruppi di elementi da leggere.

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

Vantaggi

• I contenuti sono centrati anche in caso di spazio limitato e overflow
• Le modifiche e la manutenzione di centratura sono tutte in un unico posto
• Il divario garantisce lo stesso spaziatura tra n elementi secondari
• La griglia crea righe per impostazione predefinita

Svantaggi

• Il valore secondario più largo (max-content) imposta la larghezza per tutti gli altri elementi. Questo argomento sarà più approfondito nel capitolo Gentle Flex.

Ideale per layout macro contenenti paragrafi e titoli, prototipi o in genere oggetti che richiedono un centratura leggibile.

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

2. Delicato flex

1. Squish: Fantastico.
2. Squash: fantastico!
3. Duplicata: perfetto.
4. Modifica: perfetto.
5. Flusso:fantastico!

Gentle Flex è una strategia più vera basata solo sulla centratura. È morbido e delicato perché, a differenza di place-content: center, le dimensioni della scatola per bambini non vengono modificate durante la centratura. Con la massima delicatezza possibile, tutti gli elementi vengono impilati, centrati e distanziati.

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

Vantaggi

• Gestisce solo allineamento, direzione e distribuzione
• Le modifiche e la manutenzione sono tutte in un unico posto
• Il divario garantisce lo stesso spaziatura tra n elementi secondari

Svantaggi

• La maggior parte delle righe di codice

Ideale per entrambi i layout macro e micro.

Termine chiave: i layout delle macro sono come gli stati o i territori di un paese: zone di copertura molto elevata e di grandi dimensioni. Le zone create dai layout macro tendono a contenere più layout. Minore è la superficie coperta dal layout, minore è il layout macro. Quando un layout copre meno superficie o contiene meno layout, diventa più simile a un layout micro.

3. Bot automatico

1. Squish: ottimo
2. Squash: ottimo
3. Duplicata:multa
4. Modifica: ottimo
5. Flusso:ottimo

Il contenitore è impostato su pieghevole senza stili di allineamento, mentre gli elementi secondari diretti hanno uno stile con margini automatici. C'è qualcosa di nostalgico e meraviglioso in margin: auto che lavora a tutti i lati dell'elemento.

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

Vantaggi

• Trucco divertente
• Veloce e sporco

Svantaggi

• Risultati imbarazzanti in caso di overflow
• Fare affidamento sulla distribuzione invece che sul divario significa che i layout possono essere realizzati con i bambini che toccano i lati
• Spingerlo in posizione non sembra essere ottimale e può comportare una modifica delle dimensioni della casella del bambino

Ideale per centrare icone o pseudo elementi.

4. Centro soffice

1. Squish: pessimo
2. Squash: scadente
3. Duplicata:scadente
4. Modifica: perfetto.
5. Flusso:fantastico! (a condizione che utilizzi proprietà logiche)

Il "centro birichino" dei concorrenti è di gran lunga il nostro concorrente più gustoso ed è l'unica tecnica di centratura interamente di proprietà di un elemento o di un bambino. Vedi il nostro bordo rosa interno da solista?

.fluffy-center {
  padding: 10ch;
}

Vantaggi

• Protezione dei contenuti
• Atomico
• Ogni test contiene segretamente questa strategia di centratura
• Lo spazio delle parole è vuoto

Svantaggi

• Illusione di non essere utile
• Esiste un conflitto tra il contenitore e gli elementi. Ovviamente, poiché entrambi i prodotti sono molto precisi

Ideale per centratura, tag, pillole, pulsanti, chip e altro ancora incentrati su parole o frasi.

5. Pop e plop

1. Schiaccia:OK
2. Squash: OK
3. Duplicata:scadente
4. Modifica: valida
5. Flusso:bene

Questo "popola" perché il posizionamento assoluto evidenzia l'elemento dal flusso normale. La parte "plop" dei nomi deriva da quando lo trovo più utile, ovvero la rappresentazione sopra le altre cose. È una tecnica di centratura pratica e classica, flessibile e dinamica in base alle dimensioni dei contenuti. A volte hai solo bisogno di aggiungere un'altra UI.

Vantaggi

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

Svantaggi

• Codificare con valori percentuali negativi
• Richiede position: relative per forzare un blocco contenitore
• Interruzioni di riga iniziali e imbarazzanti
• Può esserci un solo blocco per contenere senza sforzo aggiuntivo

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

Chi ha vinto

Se mi trovassi 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;
}

È sempre disponibile nei miei fogli di stile, in quanto è utile per entrambi i layout macro e micro. È una soluzione affidabile e completo con risultati all'altezza delle mie aspettative. Inoltre, poiché sono una persona esperta di taglie, tendo a passare a questa soluzione. È davvero tanto da digitare, ma i vantaggi che offre superano il codice aggiuntivo.

MVP

Centro soffice

.fluffy-center {
  padding: 2ch;
}

Fluffy Center è talmente micro che può essere facilmente trascurato come tecnica di centratura, ma è un elemento fondamentale delle mie strategie di centratura. È così atomico che a volte dimentico di usarlo.

Conclusione

Quali elementi spezzano le tue strategie di centratura? Quali altre sfide si potrebbe aggiungere alla suoneria di resilienza? Ho pensato alla traduzione e all'opzione di altezza automatica nel contenitore... cos'altro?

Ora che sai come ci sono riuscito, come faresti?! Diversifica i nostri approcci e scopriamo tutti i modi per creare sul web. Segui il codelab con questo post per creare un esempio di centratura personalizzato, proprio come quelli in questo post. Inviami un tweet sulla tua versione e la aggiungerò alla sezione Remix della community di seguito.

Remix della community

• Trucchi CSS con un post del blog