22.11.20223 min

Joey BurzyńskiFullstack Developer / Founder & CTO

Dzięki tym 58 bajtom CSS Twoja strona zawsze będzie wyglądać świetnie

Sprawdź, jak 58 bajtów może zmienić Twoją stronę.

Dzięki tym 58 bajtom CSS Twoja strona zawsze będzie wyglądać świetnie

Tworząc tę stronę, chciałem mieć prosty, sensowny sposób, aby wyglądała dobrze na większości wyświetlaczy. Nie licząc żadnych technik minimalizacji, owe 58 bajtów u mnie zadziałało świetnie:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}


Rozłóżmy to na czynniki pierwsze.


max-width: 38rem

Wydaje się, że domyślny rozmiar czcionki dla większości przeglądarek to 16px, więc 38rem to 608px obsługujące wyświetlacze o rozdzielczości 600px na poziomie minimalnym wydaje się rozsądne.


padding: 2rem

Jeśli szerokość wyświetlacza jest mniejsza niż 38rem, to padding utrzymuje wszystko w dobrym stanie aż do około 256px. Choć może się to wydawać opcjonalne, to w rzeczywistości trafia w dwie pieczenie na jednym ogniu — padding zapewnia również tak bardzo potrzebny górny i dolny odstęp.


margin: auto

Jest to tak naprawdę wszystko, czego potrzeba do wyśrodkowania strony, ponieważ main jest elementem blokowym pod semantycznym html5.


Kluczowe spostrzeżenia

Dotarcie do tego punktu zajęło mi zaskakująco dużo iteracji. Być może świadczy to o tym, że nie wiem nic o „nowoczesnym” tworzeniu stron internetowych, albo, w co jestem bardziej skłonny uwierzyć, o tym, jak trudno jest zachować prostotę w świecie pełnym komplikacji.


Aktualizacja 1

Po kilku dyskusjach zmieniłem padding na 1.5rem, aby uzyskać szczęśliwy kompromis między wyświetlaniem na urządzeniach przenośnych i stacjonarnych.


Aktualizacja 2

ch unit zwróciła moją uwagę i nawet mi się spodobała! Od tamtej pory przeszedłem na 70ch/2ch, co wygląda prawie tak samo tylko o 2 bajty mniej, z tym że padding jest trochę mniejszy (dobra rzecz dla mobilnych).


100 bajtów CSS, która prezentuje się świetnie praktycznie wszędzie (wersja rozszerzona)

To powinien być szybki css, tak aby wyglądał dobrze na większości wyświetlaczy:

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}


Rozłóżmy to na czynniki pierwsze: Zaadaptowałem oryginalny tekst z własnym komentarzem.


max-width: 70ch

„Czytelny zakres” to zazwyczaj 60-80 szerokości znaków, a CSS pozwala wyrazić to bezpośrednio za pomocą jednostki ch.


padding: 3em 1em

Jeśli szerokość wyświetlacza jest mniejsza niż maksymalna szerokość ustawiona powyżej, to padding zapobiega powstawaniu tekstu edge-to-edge na urządzeniach mobilnych. Używamy 3em, aby zapewnić górny/dolny odstęp.


margin: auto

Jest to tak naprawdę wszystko, czego potrzeba, aby wyśrodkować stronę — zastosowane na html, ponieważ strona Dana nie ma tagu semantycznego i jest bardziej prawdopodobne, że istnieje w większości witryn. To, że górny indeks centruje się względem niczego jest nieintuicyjne, ale tak robią przeglądarki.


line-height: 1.75

Odstępy między wierszami, aby pomóc zwiększyć przejrzystość wizualną. Zawsze pozostawiaj wysokość linii bez jednostek.


font-size: 1.5em

Zauważyłem, że ostatnie trendy w projektowaniu i rozmiary ekranów mają tendencję do większych rozmiarów czcionek. A może się już starzeję. Zamiast px wybierz em lub rem, jeśli chcesz pozwolić użytkownikom na skalowanie.

Możesz użyć :root zamiast <html>⁣, aby zagwarantować, że jest tam obecny jakiś selektor, ale jest to dla mnie zbyt fantazyjne i mamy tu dodatkowy znak :)


Opcjonalnie 100 dodatkowych bajtów

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}
p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}


Oryginał tekstu w języku angielskim znajdziesz pod tytułem 58 bytes of CSS to look great nearly everywhere.

<p>Loading...</p>