Gdy usuniesz spację między elementami, układ przestaje się rozjeżdżać

Sprawdź też identyfikatory. Duplikat „id" w dokumencie powoduje, że przeglądarka wiąże etykietę z pierwszym napotkanym elementem, a nie z tym, który widzisz na ekranie. Kursor potrafi wtedy pojawić się w zupełnie innym polu, na przykład w wyszukiwarce u góry strony. Przy dynamicznie powtarzanych formularzach to klasyka — identyfikatory generowane raz na sztywno powielają się przy każdym dodaniu kolejnego wiersza. Wystarczy dopisać unikalny sufiks przy tworzeniu elementu, by problem zniknął.

Praktyczna zasada jest prosta. Jeśli obiekt da się opisać kształtem, użyj wektora. Jeśli istotna jest fotograficzna faktura, użyj rastra o rozdzielczości policzonej pod docelowy format. Wektoryzacja automatyczna ze zdjęcia rzadko daje dobry wynik — powstaje plik z tysiącami przypadkowych kształtów, który wygląda gorzej niż oryginał. Lepiej narysować uproszczoną wersję ręcznie albo ograniczyć się do dużego rastra. Zanim cokolwiek powiększysz, sprawdź, czym jest plik i jakie ma wymiary, bo od tego zależy cały efekt końcowy.

Kolejny problem to zawartość. Flex-basis określa rozmiar początkowy, ale jeśli w elemencie jest długi tekst lub obraz, może on rozepchnąć układ. Wtedy flex-shrink zmniejszy elementy proporcjonalnie, ale nie zawsze zgodnie z planem. Aby temu zapobiec, stosuj min-width: 0 na elementach flex lub dodawaj overflow: hidden. Warto też testować w różnych przeglądarkach, bo interpretacja procentów w flex-basis bywała niespójna w starszych wersjach.

Kolor tekstu i obramowanie zachowują się w drzewie dokumentu zupełnie inaczej, choć w arkuszu stylów wyglądają podobnie. Właściwość color jest dziedziczona: dziecko, które nie ma własnej reguły, dostaje wartość od rodzica i pokazuje ten sam kolor znaków. Właściwości border nie są dziedziczone: element potomny nie dostaje ramki tylko dlatego, że miała ją sekcja nadrzędna. Zrozumienie tej różnicy oszczędza mnóstwo czasu przy debugowaniu układu.

Obraz dekoracyjny, czyli taki, który nic nie wnosi — separator, tło, ozdobnik — powinien mieć alt="". Pusty alt mówi czytnikowi: pomiń mnie. Uwaga na częsty błąd: brak atrybutu alt wcale nie jest tym samym. Wtedy czytnik odczyta nazwę pliku, np. „IMG_2043.jpg", co jest bezsensownym hałasem. Drugi błąd to wrzucanie do alt tekstu, który już jest obok, np. powtórzenie podpisu pod zdjęciem. Trzeci: traktowanie alt jako miejsca na frazy pod pozycjonowanie. To psuje doświadczenie osób korzystających z czytnika i bywa karane przez wyszukiwarki.

Jak uniknąć typowych pułapek z flex-basis w procentach Pamiętaj, że flex-basis współpracuje z flex-grow i flex-shrink. Gdy ustawisz flex-basis: 25% dla czterech elementów, suma da 100%, ale marginesy, padding i obramowania mogą spowodować przepełnienie. Domyślnie box-sizing: content-box wlicza padding i border do szerokości całkowitej, więc elementy mogą się zawijać lub ściskać. Rozwiązanie: ustaw globalnie box-sizing: border-box lub dodaj flex-shrink: 0, jeśli chcesz wymusić stały rozmiar.

Białe znaki między elementami inline-block to jeden z najczęstszych powodów, dla których układ „nie chce" się ułożyć tak, jak wynika to z obliczeń. Przeglądarka traktuje każdy znak nowej linii, tabulacji i spacji w kodzie jako zwykłą spację w tekście. Jeśli obok siebie stoją dwa elementy inline-block, ta spacja zajmuje miejsce i wypycha drugi element w prawo lub do nowej linii. Efekt jest szczególnie widoczny przy trzech i więcej kafelkach ustawionych w rzędzie — ostatni spada poniżej, mimo że szerokości mieszczą się w kontenerze.

Osobna sprawa to pola ukryte i własne komponenty. Jeśli zamiast standardowego pola tekstowego używasz elementu, który tylko udaje pole, kliknięcie w etykietę nie ustawi kursora, bo nie ma czego ustawiać. W takich konstrukcjach fokus trzeba przenosić ręcznie skryptem, a etykietę połączyć z rzeczywistym, dostępnym polem. Warto też zadbać, by pole nie miało atrybutu wyłączającego ani nie było przykryte przez warstwę, która przechwytuje kliknięcia — przezroczyta nakładka nad etykietą potrafi zablokować zdarzenie, mimo że wizualnie wszystko wygląda poprawnie.

Kiedy raster jeszcze daje radę Raster bywa jedynym sensownym wyborem, gdy liczy się wierne odwzorowanie faktury: zdjęcia, skany, malarstwo cyfrowe z miękkimi przejściami tonalnymi. Warunek jest jeden — plik musi mieć wystarczającą rozdzielczość od początku. Przy druku licz gęstość w punktach na cal i pomnóż przez docelowy wymiar. Obraz na plakat 60 na 90 centymetrów przy 300 punktach na cal wymaga około 7000 na 10600 pikseli. Jeśli masz połowę tego, nie ratuj tego rozciąganiem w edytorze.

Przy flex-wrap: wrap procenty odnoszą się do szerokości kontenera, ale po zawinięciu nowy wiersz może mieć inną dostępną szerokość. Wtedy elementy z flex-basis: 50% mogą nie zmieścić się obok siebie i spowodować nieoczekiwane łamanie. Jeśli chcesz mieć pewność, użyj calc() z odejmowaniem odstępów, np. flex-basis: calc(50% - 10px), i pamiętaj o gap. Dzięki temu unikniesz błędów zaokrągleń i niepożądanych przeniesień.