Px, em czy rem — co podąża za ustawieniami przeglądarki
Rem nie ma tego problemu, bo zawsze odnosi się do elementu html, niezależnie od głębokości. Ustawienie 1.5rem da ten sam efekt na pierwszym i na dziesiątym poziomie drzewa. To czyni rem domyślnym wyborem dla typografii: nagłówków, akapitów, przycisków. Praktyczna zasada: rozmiar tekstu w rem, odstępy i marginesy w rem, a em tylko tam, gdzie proporcja wobec lokalnego kontekstu jest zamierzona.
Drugi typowy błąd to nadmiarowe „../". Jeśli plik docelowy leży wyżej, a ty schodzisz jeszcze wyżej, link wyjdzie poza katalog projektu i wskaże miejsce, którego na serwerze nie ma. Sprawdź to, licząc poziomy od pliku źródłowego, a nie od korzenia. Trzeci błąd to wielkość liter — na komputerze z Windows różnica między „Obrazy" a „obrazy" często nie przeszkadza, na serwerze linuksowym oznacza brak pliku.
Jak zbudować poprawną ścieżkę względną Zacznij od ustalenia, gdzie leży plik ze linkiem, a gdzie plik docelowy. Jeśli oba są w tym samym folderze, wystarczy sama nazwa pliku. Jeśli cel jest w podfolderze, dopisz jego nazwę i ukośnik. Jeśli cel jest w folderze nadrzędnym, użyj dwóch kropek i ukośnika — to oznacza „wyjdź poziom wyżej". Każde kolejne „../" cofa cię o jeden poziom. Przykładowo z pliku w katalogu „strona/oferta" do pliku w „strona/obrazy" prowadzi ścieżka „../obrazy/plik.jpg".
Tabela w HTML składa się z kilku współpracujących elementów: table jako kontenera, tr jako wiersza, td jako komórki danych oraz th jako komórki nagłówkowej. Każdy z nich pełni inną rolę i musi znaleźć się we właściwym miejscu, inaczej przeglądarka albo zignoruje strukturę, albo wyświetli ją w sposób nieprzewidywalny. Warto od początku budować tabelę świadomie, zamiast naprawiać ją później za pomocą stylów.
Najprostsza metoda to panel deweloperski. Otwórz go, kliknij prawym przyciskiem na element i wybierz zbadanie. W zakładce z stylami znajdź sekcję typografii. Przeglądarka pokazuje tam nie tylko zadeklarowany stos, ale też faktycznie użyty krój — zwykle z adnotacją, że pochodzi z listy lub z systemowego zastępnika. W nowszych wersjach wystarczy najechać kursorem na nazwę, żeby zobaczyć podgląd. To najpewniejszy sposób, bo opiera się na wewnętrznym mechanizmie silnika, a nie na domysłach.
Link, który działa na twoim komputerze, po przeniesieniu na inny albo po wgraniu na serwer potrafi przestać działać. Powód jest prawie zawsze ten sam: zamiast ścieżki względnej ktoś wpisał ścieżkę bezwzględną. Różnica między nimi jest niewielka w zapisie, ale ogromna w skutkach.
Przy kompresji stratnej warto stosować maskowanie krawędzi: w programach graficznych istnieje opcja „wyostrz krawędzie" lub „zachowaj szczegóły", ale to tylko półśrodek. Lepiej zapobiec problemowi, niż go naprawiać. Jeśli już masz plik z artefaktami, nie licz na idealne odzyskanie jakości. Możesz spróbować delikatnego wygładzenia (np. filtr medianowy) albo rozmycia Gaussa o małym promieniu, ale to zawsze pogorszy ostrość. Jedynym pewnym rozwiązaniem jest ponowny eksport z oryginału z lepszymi ustawieniami.
Ścieżka bezwzględna zaczyna się od korzenia systemu plików albo od litery dysku. W systemach uniksowych to ukośnik na początku, w Windows dodatkowo litera dysku i dwukrodek. Taka ścieżka jest jednoznaczna i zawsze wskazuje to samo miejsce, niezależnie od tego, skąd ją wywołasz. Ścieżka względna nie ma punktu początkowego — liczy się od katalogu, w którym znajduje się plik zawierający link. To właśnie dlatego ten sam zapis raz działa, a raz nie.
Gdy przenosisz plik z linkiem w inne miejsce, ścieżki względne się psują, a bezwzględne nie. Dlatego w projektach, które mają działać na różnych maszynach, stosuje się ścieżki względne albo odwołania liczone od katalogu głównego projektu. Zanim uznasz link za gotowy, otwórz dokument z innego folderu i z podfolderu — jeśli działa w obu przypadkach, zapis jest poprawny.
Jednostki rozmiaru czcionki różnią się tym, od czego zależą. Piksel (px) to wartość bezwzględna, oderwana od preferencji użytkownika. Em i rem są względne, ale każda liczy odniesienie gdzie indziej: em mnoży aktualny rozmiar elementu, rem — rozmiar korzenia dokumentu. Ta różnica decyduje o tym, co się skaluje, gdy ktoś powiększy czcionkę w przeglądarce albo zmieni domyślne ustawienie systemowe.
Uważaj na ukośniki. W adresach sieciowych i w systemach uniksowych obowiązuje ukośnik zwykły. W Windows w ścieżkach lokalnych działa ukośnik odwrotny, ale w kodzie HTML i w adresach lepiej trzymać się zwykłego — jest przenośny i nie wymaga ucieczki. Mieszanie obu w jednym projekcie to najczęstsze źródło błędów, które trudno zauważyć, bo system czasem je toleruje, a serwer już nie.
Sprawdzanie przez JavaScript i pułapka fałszywych wyników Możesz też posłużyć się skryptem. Technika polega na tym, że mierzysz szerokość znaku w danej czcionce i porównujesz ją z szerokością trzech czcionek zapasowych — jeśli wynik jest identyczny, krój najpewniej nie istnieje i system podstawił domyślny. To działa, ale ma słabość: bywają kroje o zbliżonych metrykach, które dają ten sam pomiar i test zwraca fałszywy negatyw. Dlatego nigdy nie opieraj się wyłącznie na jednym znaku ani na jednym rozmiarze.