Gdy dwa marginesy znikają, zostaje jeden — i co z tego wynika

PNG powstał jako format bezstratny i to on rozwiązuje problem przezroczystości. Kanał alfa pozwala zapisać nie tylko kolor piksela, ale też stopień jego krycia, więc tło może być w pełni przezroczyste albo częściowo przejrzyste — na przykład cień pod przyciskiem. To dlatego PNG wybiera się do logotypów, ikon interfejsu, wykresów i elementów nakładanych na inne tło. Uwaga na dwa częste potknięcia. Pierwsze: przezroczystość trzeba faktycznie ustawić w programie przed eksportem, samo zapisanie do PNG jej nie stworzy. Drugie: PNG nie nadaje się do zdjęć. Bezstratny zapis fotografii daje plik wielokrotnie większy od JPEG przy identycznej widocznej jakości.

Praktyczna zasada jest prosta: najpierw ustal, które fragmenty powtarzają się na wszystkich podstronach, a które są unikalne. Powtarzalne elementy — nagłówek, menu, stopka — opakuj w header, nav i footer. Unikalną treść w main. Dzięki temu kod jest krótszy, a wyszukiwarki lepiej rozumieją, co jest najważniejsze. Unikaj natomiast nadużywania tych znaczników w miejscach, gdzie wystarczy zwykły div lub section — nadmiar semantyki wprowadza chaos.

Druga pułapka to etykiety ukryte wizualnie. Jeśli jedna z nich jest schowana przez display: none, przeglądarka może jej nie uwzględnić przy obliczaniu dostępnej nazwy, ale niektóre narzędzia pomocnicze nadal ją odczytają. Efekt jest nieprzewidywalny i zależy od przeglądarki oraz czytnika. Bezpieczniej jest trzymać jedną etykietę widoczną i powiązaną z polem, a dodatkowe opisy zamieniać na aria-describedby, które czyta się jako uzupełnienie, a nie jako kolejną nazwę.

Еtykieta pola formularza może być powiązana z polem na dwa sposoby: przez opakowanie pola w znacznik label albo przez atrybut for wskazujący identyfikator pola. Oba rozwiązania działają, ale różnią się sposobem użycia i konsekwencjami w kodzie. Wybór zależy od tego, jak zbudowany jest formularz i czy etykieta ma być widoczna, ukryta czy generowana dynamicznie.

Piąty problem to testy automatyczne. Selektory oparte na etykiecie mogą zwracać dwa elementy i psuć asercje. Zanim zaczniesz szukać winy w narzędziu, sprawdź w kodzie, ile razy występuje for z danym identyfikatorem. Jeśli więcej niż raz, zdecyduj: zostawiasz jedną etykietę i poprawiasz resztę, albo świadomie akceptujesz dwie i pilnujesz, żeby nie dublowały nazwy dostępnej. W praktyce pierwsze rozwiązanie jest szybsze i mniej ryzykowne.

Wybierając format pliku graficznego, decydujesz o tym, ile będzie ważył, jak wygląda na ekranie i co da się z nim później zrobić. Trzy najczęstsze wybory to JPEG, PNG i SVG. Każdy z nich ma swoje przeznaczenie i używanie ich zamiennie prowadzi do problemów: zdjęcie zapisane jako PNG zajmie kilka razy więcej miejsca niż potrzebuje, a logo w JPEG będzie miało rozmazane krawędzie i brudne tło. Poniżej konkretne zasady, które pozwalają uniknąć tych błędów.

Większość stron internetowych zbudowana jest na podobnym szkielecie: nagłówek, treść główna, nawigacja i stopka. Można je opisać za pomocą zwykłych divów, ale wtedy zarówno przeglądarki, jak i roboty wyszukiwarek muszą się domyślać, co jest czym. Znaczniki semantyczne — header, nav, main, footer — robią to samo, tylko jawnie. Dzięki nim struktura strony jest zrozumiała bez zaglądania w klasy CSS czy identyfikatory.

Nav, main i footer — co gdzie trafia Nav przeznaczony jest na zbiór linków nawigacyjnych. Nie musi to być tylko menu główne — może to być spis treści, paginacja albo linki do powiązanych artykułów. Typowy błąd to umieszczanie w nav pojedynczych linków, które nie tworzą spójnej grupy nawigacyjnej. Main zawiera unikalną treść danej podstrony. Na jednej stronie powinien być tylko jeden main — to najczęściej popełniany błąd. Nie umieszczaj w nim nagłówka ani stopki, jeśli powtarzają się na innych podstronach.

SVG to zupełnie inna kategoria — to format wektorowy, w którym obraz opisany jest matematycznie: jako linie, krzywe i wypełnienia, a nie siatka pikseli. Dzięki temu skalowanie do dowolnego rozmiaru nie powoduje utraty ostrości, a plik z prostą ikoną może ważyć mniej niż kilobajt. Świetnie sprawdza się w interfejsach, na stronach i wszędzie tam, gdzie grafika musi działać na ekranach o różnej rozdzielczości. Ograniczenie jest istotne: SVG nie opisze realistycznego zdjęcia ani złożonej ilustracji z gradientami i teksturami. Do wektoryzacji nie podchodź też mechanicznie — automatyczne narzędzie potrafi zamienić zdjęcie w plik pełen tysięcy przypadkowych kształtów, który waży więcej niż oryginał i wygląda źle.

Podsumowując: opakowanie sprawdza się w prostych, płaskich formularzach, a for daje większą kontrolę i lepiej znosi zmiany układu. Wybierz for, gdy potrzebujesz elastyczności, i pilnuj zgodności identyfikatorów. Wybierz opakowanie, gdy struktura jest prosta i chcesz uniknąć dodatkowych atrybutów. W obu przypadkach zadbaj o to, aby każde pole miało dokładnie jedną etykietę i aby dało się ją kliknąć.