Kiedy JPEG wystarczy, a kiedy PNG i SVG ratują projekt?

Decyzję najlepiej podjąć, zadając sobie proste pytanie: czy te pola są zawsze wypełniane razem i czy ich rozdzielenie coś psuje? Jeśli tak — jedna etykieta wystarczy. Jeśli nie — rozdziel opisy. Nie ma jednej uniwersalnej reguły, ale konsekwencja w całym formularzu lub dokumencie liczy się bardziej niż sam wybór wariantu.

Białe znaki między elementami inline-block to jeden z tych problemów, które potrafią zepsuć precyzyjny layout. Przeglądarka traktuje każdy znak nowej linii, tabulacji czy spacji w kodzie HTML jako rzeczywistą spację w renderowanej treści. Jeśli obok siebie ustawisz kilka elementów z display: inline-block, każdy taki znak doda odstęp o szerokości zwykłej spacji. Efekt: elementy, które miały przylegać do siebie, nagle rozjeżdżają się o kilka pikseli.

Jak pozbyć się białych znaków bez psucia kodu Najprostsze rozwiązanie to usunięcie białych znaków z HTML. Zamiast pisać każdy element w osobnej linii, możesz je skleić w jednej linii bez spacji między tagami. To działa, ale kod staje się mniej czytelny. Alternatywa to zapisanie elementów w jednej linii z komentarzami między nimi — komentarze nie generują spacji, a kod pozostaje podzielony wizualnie. Kolejna metoda to ustawienie font-size: To see more information about czytaj dalej look into the web site. 0 na kontenerze i przywrócenie właściwego rozmiaru czcionki wewnątrz elementów potomnych. Warto pamiętać, że ta technika wymaga ostrożności: jeśli dziecko nie ma zdefiniowanego font-size, odziedziczy zero i tekst zniknie.

Sprawdzaj efekty w przeglądarce, zmieniając szerokość okna płynnie, a nie skokowo. Zwróć uwagę na momenty, w których tekst staje się zbyt wąski lub przyciski zachodzą na siebie. To właśnie tam potrzebny jest nowy próg min-width. Pamiętaj też o kolejności reguł w pliku: media queries z większą wartością min-width powinny znajdować się niżej, bo inaczej nadpiszą się nawzajem w nieprzewidywalny sposób.

Praktyczna zasada: zaczynaj od kroju, który naprawdę chcesz pokazać, kończ na rodzinie ogólnej, kolory ścian do salonu a między nimi umieszczaj sensowne odpowiedniki o podobnych proporcjach. Unikaj długich list nazw „na wszelki wypadek" — każda pozycja to dodatkowa decyzja, której skutku nie kontrolujesz. I pamiętaj, że styl użytkownika w przeglądarce może nadpisać cały stos, jeśli w ustawieniach wymusi własną czcionkę. Wtedy żaden zapis w arkuszu nie pomoże — to nie błąd w kodzie, lecz celowe działanie osoby, która czyta stronę.

Przy etykietach drukowanych, na przykład na dokumentach przewozowych, jedna etykieta obejmująca kilka pól oznacza zwykle wspólny nagłówek sekcji. Ważne, aby nie łączyć w ten sposób danych, które muszą być odczytane osobno — na przykład numeru przesyłki i kodu sortującego. W systemach cyfrowych etykieta zbiorcza bywa powiązana z jednym polem ukrytym, które przechowuje całość, ale wtedy tracisz możliwość filtrowania i walidacji pojedynczych składowych.

Typowy błąd to walka z objawem, a nie przyczyną. Programiści często dodają ujemne marginesy, które działają tylko przy jednej szerokości okna i psują się przy zmianie rozmiaru czcionki. Inny częsty problem to zapominanie o tym, że białe znaki pojawiają się także wtedy, gdy używasz wcięć w edytorze. Nawet pojedyncza spacja między tagami wystarczy, by powstał odstęp. Jeśli używasz preprocesora lub systemu szablonów, uważaj na to, jak generuje HTML — niektóre narzędzia same dodają spacje.

Ostatnia pozycja w stosie to zwykle jedna z pięciu rodzin ogólnych: serif, sans-serif, monospace, cursive lub fantasy. To nie jest zwykła czcionka, lecz reguła mówiąca przeglądarce, jakiej klasy kroju użyć z ustawień systemowych. Bez takiego zakończenia, gdy żadna nazwa nie pasuje, przeglądarka zastosuje własne domyślne ustawienie — często inne w każdej przeglądarce i systemie. Krótki stos bez rodziny ogólnej to najczęstszy błąd prowadzący do nieprzewidywalnego wyglądu.

Punkt wyjścia to styl bazowy przeznaczony dla najwęższego sensownego ekranu. Piszesz zwykłe reguły CSS bez żadnego media query: jednokolumnowy przepływ, obrazy na pełną szerokość kontenera, typografia czytelna przy wąskim oknie. Ten bazowy zestaw reguł obowiązuje wszędzie, a szerokie ekrany dostają wyłącznie to, czego naprawdę potrzebują. Nie musisz pilnować, czy coś się nie rozjedzie na telefonie, bo telefon jest punktem odniesienia, a nie przypadkiem brzegowym.

Pytanie, czy jedna etykieta może obejmować kilka pól naraz, najczęściej pojawia się przy projektowaniu formularzy, dokumentów magazynowych albo etykiet wysyłkowych. Odpowiedź brzmi: tak, ale z zastrzeżeniem — etykieta to nie to samo co pole danych. Etykieta opisuje, czym jest dana wartość, a pole to miejsce, w którym ta wartość się znajduje. Jedna etykieta może więc opisywać kilka pól tylko wtedy, gdy tworzą one logiczną całość, na przykład adres, dane kontaktowe czy wymiary przesyłki.