Intestazione e piè di pagina a tutta larghezza

Una piccola modifica visibile su ogni pagina qui: la fascia scura in alto e il piè di pagina in basso ora occupano tutta la larghezza della finestra.

Fino a oggi erano racchiusi nella stessa colonna di 1180 pixel di tutto il resto, quindi su uno schermo largo la pagina appariva come una striscia di contenuto che galleggiava in uno sfondo vuoto. Il piè di pagina nelle pagine delle statistiche era già a tutta larghezza — era l'unico, ed è proprio questa incoerenza ad aver dato il via a questo intervento.

Cosa non è cambiato

Il contenuto all'interno di quelle fasce. Testo, pulsanti e numeri restano allineati sugli stessi 1180 pixel delle sezioni sottostanti, quindi la fascia è larga ma la scrittura no. Nessuno legge righe di cento caratteri, e un titolo disteso su un monitor da 27 pollici non è una scelta di design, è una svista.

Perché non il trucco abituale

Il modo comune per far uscire un elemento da una colonna centrata è un margine negativo rispetto a 100vw. Ha un difetto facile da non notare su un desktop con la barra di scorrimento disattivata: vw include la barra di scorrimento. Il blocco finisce per essere più largo dell'area visibile esattamente di quella larghezza, e l'intera pagina può essere trascinata lateralmente di qualche pixel — il che su un telefono significa che il layout traballa sotto il pollice mentre stai cercando di leggere.

Quindi la fascia non si estende verso l'esterno: parte larga e aggiunge spaziatura verso l'interno:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Le percentuali si risolvono rispetto al genitore dell'elemento, che in questo caso è il body della pagina e non include la barra di scorrimento. Sotto i 1180 pixel prevale il primo valore e la fascia mantiene un margine ragionevole di 20 pixel invece di uno negativo. Nessun secondo contenitore, nessun JavaScript, e nulla da misurare in fase di esecuzione.

Dove si applica

La pagina iniziale, la pagina Chi siamo e ogni pagina delle statistiche. Stessa costruzione in tutte e tre, ed era proprio questo l'obiettivo.