Η κεφαλίδα και το υποσέλιδο καλύπτουν πλέον όλο το πλάτος

Μια μικρή αλλαγή, ορατή σε κάθε σελίδα εδώ: η σκούρα λωρίδα στην κορυφή και το υποσέλιδο στο κάτω μέρος καλύπτουν πλέον όλο το πλάτος του παραθύρου.

Μέχρι σήμερα βρίσκονταν μέσα στην ίδια στήλη των 1.180 pixel με όλα τα υπόλοιπα, οπότε σε μια φαρδιά οθόνη η σελίδα ήταν μια λωρίδα περιεχομένου που αιωρούνταν σε κενό φόντο. Το υποσέλιδο στις σελίδες στατιστικών είχε ήδη πλήρες πλάτος — ήταν το μόνο, και αυτή η ασυνέπεια ήταν η αφορμή για όλα αυτά.

Τι δεν άλλαξε

Το περιεχόμενο μέσα σε αυτές τις λωρίδες. Κείμενο, κουμπιά και αριθμοί εξακολουθούν να ευθυγραμμίζονται στα ίδια 1.180 pixel με τις ενότητες από κάτω, οπότε η λωρίδα είναι φαρδιά, αλλά το κείμενο όχι. Κανείς δεν διαβάζει γραμμές εκατό χαρακτήρων, και ένας τίτλος απλωμένος σε μια οθόνη 27 ιντσών δεν είναι σχεδιασμός, είναι αβλεψία.

Γιατί όχι το συνηθισμένο κόλπο

Ο συνήθης τρόπος για να βγει ένα στοιχείο έξω από μια κεντραρισμένη στήλη είναι ένα αρνητικό περιθώριο με βάση το 100vw. Έχει ένα ελάττωμα που εύκολα περνά απαρατήρητο σε έναν υπολογιστή με απενεργοποιημένη τη γραμμή κύλισης: το vw περιλαμβάνει τη γραμμή κύλισης. Το μπλοκ καταλήγει φαρδύτερο από την ορατή περιοχή ακριβώς κατά αυτό το πλάτος, και ολόκληρη η σελίδα μπορεί να συρθεί πλάγια κατά μερικά pixel — που σε ένα κινητό σημαίνει ότι η διάταξη τρέμει κάτω από τον αντίχειρα στη μέση της ανάγνωσης.

Έτσι η λωρίδα δεν απλώνεται προς τα έξω, αλλά ξεκινά φαρδιά και αφήνει εσωτερικό περιθώριο προς τα μέσα:

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

Τα ποσοστά υπολογίζονται με βάση το γονικό στοιχείο, που εδώ είναι το σώμα της σελίδας και δεν περιλαμβάνει τη γραμμή κύλισης. Κάτω από τα 1.180 pixel υπερισχύει η πρώτη τιμή και η λωρίδα διατηρεί ένα λογικό περιθώριο 20 pixel αντί για αρνητικό. Χωρίς δεύτερο περιτύλιγμα, χωρίς JavaScript και χωρίς τίποτα να μετρηθεί κατά την εκτέλεση.

Πού ισχύει

Η αρχική σελίδα, η σελίδα «Σχετικά» και κάθε σελίδα στατιστικών. Η ίδια κατασκευή και στις τρεις, και αυτός ήταν ο σκοπός.