हेडर और फ़ुटर अब पूरी चौड़ाई में

यहाँ हर पेज पर दिखने वाला एक छोटा बदलाव: ऊपर की गहरी पट्टी और नीचे का फ़ुटर अब विंडो की पूरी चौड़ाई में फैले हैं।

आज तक ये बाकी सब कुछ की तरह उसी 1180 पिक्सेल के कॉलम के अंदर रहते थे, इसलिए चौड़ी स्क्रीन पर पेज खाली बैकग्राउंड में तैरती सामग्री की एक पट्टी जैसा लगता था। आँकड़ों के पेजों का फ़ुटर पहले से पूरी चौड़ाई का था – सिर्फ़ वही, और इसी असंगति से यह सब शुरू हुआ।

क्या नहीं बदला

इन पट्टियों के अंदर की सामग्री। टेक्स्ट, बटन और संख्याएँ अब भी नीचे के हिस्सों की तरह उन्हीं 1180 पिक्सेल पर एक सीध में रहते हैं, इसलिए पट्टी चौड़ी है और लिखावट नहीं। सौ अक्षरों वाली लाइनें कोई नहीं पढ़ता, और 27 इंच के मॉनिटर पर फैली हेडलाइन कोई डिज़ाइन नहीं, एक चूक है।

आम तरकीब क्यों नहीं

किसी एलिमेंट को बीच में रखे कॉलम से बाहर निकालने का आम तरीका नेगेटिव मार्जिन है, जिसका आधार होता है 100vw। इसमें एक खामी है, जो स्क्रॉलबार बंद वाले डेस्कटॉप पर आसानी से नज़र से छूट जाती है: vw में स्क्रॉलबार भी शामिल होता है। ब्लॉक ठीक उतनी ही चौड़ाई से दिखने वाले हिस्से से ज़्यादा चौड़ा हो जाता है, और पूरे पेज को कुछ पिक्सेल बगल में खिसकाया जा सकता है – फ़ोन पर इसका मतलब है कि पढ़ते-पढ़ते अंगूठे के नीचे लेआउट डगमगाने लगता है।

इसलिए पट्टी बाहर की ओर नहीं फैलती, बल्कि चौड़ी शुरू होती है और अंदर की ओर पैडिंग लेती है:

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

प्रतिशत एलिमेंट के पैरेंट के हिसाब से तय होते हैं, जो यहाँ पेज का body है और उसमें स्क्रॉलबार शामिल नहीं होता। 1180 पिक्सेल से कम चौड़ाई पर पहला मान लागू होता है और पट्टी को नेगेटिव मार्जिन की जगह 20 पिक्सेल का समझदारी भरा मार्जिन मिलता है। न कोई दूसरा रैपर, न JavaScript, और रनटाइम पर कुछ मापने की ज़रूरत नहीं।

यह कहाँ लागू है

मुख्य पेज, परिचय पेज और आँकड़ों का हर पेज। तीनों में एक ही बनावट – और मकसद भी यही था।