Jednostka fr kradnie ci przestrzeń, gdy źle liczysz kolumny

Uważaj też na skalowanie. Powiększanie obrazu po kompresji stratnej uwypukla artefakty na krawędziach. Zawsze skaluj przed kompresją, a nie po. Podobnie z kadrowaniem – jeśli wytniesz fragment z już skompresowanego JPEG, a potem zapiszesz go ponownie, krawędzie w miejscu cięcia staną się jeszcze gorsze. Pamiętaj, że formaty takie jak PNG i WebP bezstratny nie generują takich artefaktów, ale mogą mieć większy rozmiar pliku – to świadomy kompromis.

Punktowana lista nie znaczy „byle jak" Punktowanie stosuj wtedy, gdy kolejność nie ma znaczenia i wszystkie elementy są tej samej wagi. To naturalny wybór dla cech, przykładów, składników, opcji do wyboru. Problem pojawia się, gdy autor wrzuca do jednej listy punktowanej rzeczy o różnym ciężarze — na przykład ogólną zasadę obok drobnego wyjątku. Czytelnik traktuje wtedy wszystko jako równie ważne i gubi hierarchię. Praktyczna zasada: jeśli któryś punkt wymaga zdania wyjaśnienia, a pozostałe to dwa słowa, lista punktowana nie jest dobrym narzędziem. Warto też pilnować równoległości składni — każdy punkt zaczynaj od tej samej części mowy. To drobiazg, który decyduje o tym, czy lista czyta się płynnie.

Lista definicji służy do czegoś innego niż dwa poprzednie formaty. Zestawia termin z jego objaśnieniem. Używaj jej w słowniczkach, glosariuszach, wyjaśnieniach pojęć na początku rozdziału. Kluczowa różnica: w liście punktowanej każdy element jest samodzielny, a w definicji każdy termin istnieje tylko po to, by go opisać. Typowy błąd to wrzucanie do definicji zwykłych haseł, które nie wymagają objaśnienia — wtedy format jest nadmiarowy. Drugi błąd to definicje nierówne długością: jeden termin opisany jednym zdaniem, inny akapitem. Czytelnik traci rytm i przestaje ufać, że lista jest kompletna.

Typowe błędy? Używanie section jako zamiennika div dla stylowania — to nadużycie. Drugi błąd to wstawianie article wewnątrz innego article bez sensu (np. dla zwykłego akapitu). Zagnieżdżanie jest poprawne, gdy np. komentarz pod postem jest osobnym article wewnątrz głównego article. Trzeci błąd: brak nagłówków w section — to psuje strukturę dokumentu.

Czwarty sposób to font loading API. W nowoczesnych przeglądarkach możesz sprawdzić, czy dana czcionka jest dostępna, zanim ją zastosujesz. Wywołaj metodę sprawdzającą dla każdej rodziny z osobna. Jeśli zwróci wartość prawdziwą, czcionka jest załadowana i może być użyta. Pamiętaj, że wynik nie mówi, która czcionka została wybrana w danym momencie, tylko które są dostępne. Łącz to z pomiarem szerokości albo porównaniem kształtów.

Najczęstszy błąd to zła nazwa. System może dopisać ukryte rozszerzenie i plik nazywa się w rzeczywistości index.html.txt. Sprawdź nazwę w oknie właściwości albo włącz wyświetlanie rozszerzeń w menedżerze plików. Druga pułapka to kodowanie znaków — jeśli w pliku są polskie litery, a zapisano go w innym kodowaniu niż zadeklarowane w nagłówku, strona pokaże krzaki. Zapisuj w UTF-8 i pilnuj zgodności z deklaracją w sekcji head.

Jednostka fr w układzie grid dzieli wolną przestrzeń, a nie całą szerokość kontenera. To rozróżnienie jest kluczowe, bo większość błędów w układach z kolumnami wynika z mylenia tych dwóch rzeczy. Zanim podzielisz kontener na kolumny, musisz wiedzieć, co zostanie odjęte od szerokości całkowitej: padding kontenera, obramowania, ewentualne odstępy między kolumnami oraz kolumny o stałej szerokości. Dopiero reszta trafia do podziału na jednostki fr. Jeśli pominiesz którykolwiek z tych elementów, kolumny wyjdą za szerokie albo za wąskie i układ zacznie pękać przy zmianie zawartości.

Najprościej otworzyć narzędzia deweloperskie. W przeglądarce kliknij prawym przyciskiem na podejrzany tekst i wybierz opcję inspekcji. W panelu elementów znajdź zakładkę z obliczonymi stylami. W nowszych wersjach przeglądarek w sekcji typografii widnieje nie tylko zadeklarowany stos, ale też informacja o tym, jaka czcionka została użyta do wyświetlenia danego fragmentu. Jeśli system nie ma pierwszej czcionki, zobaczysz drugą, trzecią albo domyślną. To najszybsza metoda, ale bywa niedokładna przy czcionkach zmiennych i fallbackach.

Trzeci sposób to pomiar szerokości tekstu. Wstaw do strony ukryty element z tym samym tekstem i tym samym rozmiarem czcionki. Zmierz jego szerokość za pomocą skryptu. Następnie zrób to samo dla pojedynczych czcionek z listy. Jeśli szerokość dla całego stosu równa się szerokości jednej z nich, to właśnie ona się renderuje. Uwaga na zaokrąglenia — mierz w pikselach z dokładnością do dwóch miejsc po przecinku.

Praktyczna zasada: każde article powinno mieć własny nagłówek (np. h1–h6). section również wymaga nagłówka, chyba że jest to sekcja czysto pomocnicza. Bez nagłówka tracisz dostępność i czytelność dla robotów wyszukiwarek. Pamiętaj, że section nie może być pusty — jeśli nie masz dla niego nagłówka, użyj div.