Üst bilgi ve alt bilgi artık tam genişlikte

Buradaki her sayfada görülen küçük bir değişiklik: üstteki koyu bant ve alttaki alt bilgi artık pencerenin tüm genişliği boyunca uzanıyor.

Bugüne kadar bunlar da diğer her şey gibi aynı 1180 piksellik sütunun içinde duruyordu; bu yüzden geniş bir ekranda sayfa, boş bir arka planın ortasında yüzen bir içerik şeridinden ibaretti. İstatistik sayfalarındaki alt bilgi zaten tam genişlikteydi – bir tek o öyleydi ve her şeyi başlatan da bu tutarsızlık oldu.

Neler değişmedi

Bu bantların içindeki içerik. Metinler, düğmeler ve sayılar hâlâ altlarındaki bölümlerle aynı 1180 piksele hizalanıyor; yani bant geniş, yazı değil. Kimse yüz karakterlik satırlar okumaz ve 27 inçlik bir monitör boyunca uzanan bir başlık tasarım değil, bir dikkatsizliktir.

Neden bilinen hile kullanılmadı

Bir öğeyi ortalanmış bir sütunun dışına taşırmanın yaygın yolu, şu değer üzerinden hesaplanan negatif bir kenar boşluğudur: 100vw. Bu yöntemin, kaydırma çubuğu kapalı bir masaüstünde gözden kaçması kolay bir kusuru var: vw kaydırma çubuğunu da içerir. Blok, görünür alandan tam da bu genişlik kadar daha geniş olur ve tüm sayfa birkaç piksel yana sürüklenebilir – bu da telefonda, okumanın ortasında düzenin başparmağın altında yalpalaması demektir.

Bu yüzden bant dışarıya uzanmıyor; en baştan geniş başlıyor ve içeriye doğru boşluk bırakıyor:

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

Yüzdeler, öğenin üst öğesine göre hesaplanır; burada bu, sayfa gövdesidir ve kaydırma çubuğunu içermez. 1180 pikselin altında ilk değer kazanır ve bant, negatif bir kenar boşluğu yerine makul bir 20 piksellik boşluk korur. İkinci bir sarmalayıcı yok, JavaScript yok ve çalışma anında ölçülecek hiçbir şey yok.

Nerede geçerli

Ana sayfa, hakkında sayfası ve tüm istatistik sayfaları. Üçünde de aynı yapı var; amaç da buydu.