En-tête et pied de page sur toute la largeur
Un petit changement visible sur toutes les pages ici : le bandeau sombre en haut et le pied de page en bas s'étendent désormais sur toute la largeur de la fenêtre.
Jusqu'à aujourd'hui, ils s'inscrivaient dans la même colonne de 1180 pixels que le reste, de sorte que sur un grand écran, la page se réduisait à une bande de contenu flottant dans un fond vide. Le pied de page des pages de statistiques occupait déjà toute la largeur — c'était le seul cas, et c'est cette incohérence qui est à l'origine de ce changement.
Ce qui n'a pas changé
Le contenu à l'intérieur de ces bandeaux. Le texte, les boutons et les chiffres s'alignent toujours sur les mêmes 1180 pixels que les sections situées en dessous, de sorte que le bandeau est large mais le texte ne l'est pas. Personne ne lit des lignes de cent caractères, et un titre étiré sur un moniteur de 27 pouces n'est pas un choix de conception, c'est un oubli.
Pourquoi pas la technique habituelle
La méthode courante pour faire sortir un élément d'une colonne centrée consiste à utiliser une marge négative sur 100vw. Elle comporte un défaut facile à manquer sur un ordinateur de bureau dont la barre de défilement est désactivée : vw inclut la barre de défilement. Le bloc finit par être plus large que la zone visible, exactement de cette largeur-là, et toute la page peut être glissée de quelques pixels sur le côté — ce qui, sur un téléphone, fait vaciller la mise en page sous le pouce du lecteur en pleine lecture.
Le bandeau ne s'étend donc pas vers l'extérieur : il part large et ajoute du remplissage vers l'intérieur :
padding-inline: max(20px, calc((100% - 1180px) / 2))
Les pourcentages se calculent par rapport au parent de l'élément, qui est ici le corps de la page et n'inclut pas la barre de défilement. En dessous de 1180 pixels, c'est la première valeur qui l'emporte, et le bandeau conserve une marge raisonnable de 20 pixels au lieu d'une marge négative. Pas de second conteneur, pas de JavaScript, et rien à mesurer à l'exécution.
Où cela s'applique
La page d'accueil, la page à propos et chaque page de statistiques. La même construction dans les trois cas, ce qui était précisément le but recherché.