Gdy brakuje kroju pisma, zadecyduje kolejność w stosie czcionek
Typowe błędy wynikają z oszczędzania na liście. Jeden krój bez żadnego zabezpieczenia to najczęstsza przyczyna rozjechanego układu. Drugi błąd to mieszanie rodzin o skrajnie różnej szerokości znaków, np. bardzo wąskiego kroju z szerokim szeryfem — po zamianie tekst może zająć o wiele więcej miejsca i wyjść z kontenera. Trzeci to wpisywanie nazw z literówką, co przeglądarka po cichu pomija. Czwarty to używanie nazw systemowych, które istnieją tylko na jednej platformie, bez żadnego odpowiednika po drugiej stronie.<br>
<br>
<br>
<br>
Aby powiązać etykietę z polem, użyj atrybutu for i wskaż w nim identyfikator elementu. Druga etykieta może wskazywać ten sam identyfikator — to poprawne składniowo. Uwaga na pułapkę: jeśli drugi label leży wewnątrz tego samego elementu nadrzędnego co pole, przeglądarka może potraktować go jako etykietę domyślną i wtedy for staje się zbędny, a nawet mylący. Najbezpieczniej trzymać obie etykiety poza elementem, który zawiera pole, i jawnie podawać for.<br>
<br>
<br>
<br>
Bezpieczniej wybierać kroje o podobnej wysokości x i zbliżonym kroju, żeby po podmianie nie zmienił się rytm akapitu. Jeśli projekt wymaga dokładnego wyglądu, trzeba załadować plik czcionki z serwera i zadeklarować go regułą @font-face. Wtedy warto zadbać o formaty obsługiwane przez starsze przeglądarki oraz o to, by krój zapasowy w stosie miał podobne proporcje. Bez tego nawet poprawnie wczytana czcionka nie uratuje układu, gdy plik się nie pobierze.<br>
<br>
<br>
<br>
W prostym formularzu każdemu polu odpowiada jedna etykieta. Bywa jednak, że ten sam element sterujący ma dwie etykiety label — na przykład widoczną obok pola i drugą, ukrytą, używaną w innym miejscu układu strony. Przeglądarki radzą sobie z tym różnie, a konsekwencje bywają zaskakujące: kliknięcie w dowolną z etykiet przenosi fokus do pola, ale czytniki ekranu mogą odczytać je dwukrotnie albo pominąć jedną z nich. Zanim uznasz to za sprytny trik, sprawdź, czy naprawdę działa.<br>
<br>
<br>
<br>
Typowe błędy to pusty for, for wskazujący na nieistniejący identyfikator oraz duplikowanie identyfikatora na kilku polach. Każdy z tych przypadków psuje skojarzenie etykiety z polem. Kolejny częsty błąd to ukrywanie tekstu przez display: none — wtedy etykieta znika także dla czytników ekranu. Jeśli chcesz ukryć wizualnie, użyj techniki z obcięciem i wypozycjonowaniem poza ekranem, ale zostaw ją w drzewie dostępności.<br>
<br>
<br>
<br>
Dla ikon wybierz SVG, gdy mają trafić na stronę lub do aplikacji. SVG to tekstowy opis kształtów, więc ta sama ikona wygląda dobrze na ekranie telefonu i na monitorze 4K. Uważaj na efekty rastrowe wewnątrz SVG — filtry, cienie i tekstury często są zapisane jako bitmapa i psują skalowanie. Drugi typowy błąd to eksport ikony do PNG w jednym rozmiarze, np. 24×24 px, a potem powiększanie jej w edytorze. Wtedy krawędzie się rozmywają, a cienkie linie znikają. Jeśli musisz użyć PNG, przygotuj osobne pliki dla każdego rozmiaru: 16, 24, 32, 48 i 64 px.<br>
<br>
<br>
<br>
Lista numerowana mówi: „to się dzieje po kolei". Sięgnij po nią, gdy kolejność ma znaczenie, bo od niej zależy efekt. Kroki procedury, etapy procesu, ranking od najważniejszego do najmniej istotnego — w tych miejscach numeracja jest jedynym sensownym wyborem. Uwaga na częsty błąd: numerowanie elementów, które są równorzędne, tylko po to, by „ładnie wyglądały". Jeśli przestawienie punktów nic nie zmienia, numer nie pełni żadnej roli i tylko myli. Drugi błąd to numerowanie listy, która ma więcej niż kilkanaście pozycji bez podziału na podgrupy — wtedy lepiej rozbić ją na kilka mniejszych lub zastosować nagłówki.<br>
<br>
<br>
<br>
Format pliku decyduje o tym, czy ikona pozostanie ostra, a wykres czytelny po powiększeniu. Dwa najczęstsze typy to rastrowe (PNG, JPEG, WebP) i wektorowe (SVG, PDF). Ikony i proste wykresy prawie zawsze powinny być wektorowe, bo skalują się bez utraty jakości. Zdjecie lub zrzut ekranu to z natury raster — nie da się go „przerobić" na wektor bez ręcznego rysowania. Zanim cokolwiek zapiszesz, ustal, czy element ma być powiększany, drukowany, czy tylko wyświetlany w jednym rozmiarze.<br>
<br>
<br>
<br>
Kiedy druga etykieta pomaga, a kiedy szkodzi Druga etykieta bywa przydatna w układach, gdzie to samo pole pojawia się w dwóch miejscach strony — na przykład w nagłówku sekcji i przy przycisku zapisu. Zamiast duplikować cały formularz, można dodać drugą etykietę w innym kontenerze. Problem pojawia się, gdy obie etykiety mają inną treść. Wtedy użytkownik technologii asystującej usłyszy sprzeczne informacje, a osoba korzystająca z nawigacji klawiaturą może nie wiedzieć, do czego pole służy. Trzymaj się zasady: obie etykiety powinny mieć identyczny tekst albo druga powinna być ukryta przed czytnikiem ekranu i pełnić wyłącznie funkcję wizualną.<br>
<br>
<br>
<br>
flex-shrink działa odwrotnie, ale nie jest symetryczny. Współczynnik mówi, jak mocno element się kurczy, gdy brakuje miejsca. Wartość 0 blokuje kurczenie — element zachowa swoją szerokość i może wyjść poza kontener albo wymusić przewijanie. Domyślna wartość to 1, co oznacza, że każdy element oddaje miejsce proporcjonalnie do swojego rozmiaru. To częste źródło zdziwienia: większy element kurczy się bardziej niż mniejszy, mimo że oba mają flex-shrink: 1. Dzieje się tak, bo strata rozkłada się proporcjonalnie do iloczynu flex-shrink i flex-basis.