Dlaczego późniejsza reguła psuje efekt, gdy jej nie rozumiesz

Jak sobie radzić w praktyce? Ustal jedną kolejność i się jej trzymaj: reset, typografia, układ, komponenty, nadpisania. Grupuj reguły dla tego samego elementu w jednym miejscu, zamiast rozrzucać je po pliku. Gdy coś nie działa, sprawdź w narzędziach deweloperskich, która deklaracja została przekreślona i dlaczego. Zamiast dodawać kolejną linię na końcu, usuń źródło konfliktu. Kaskada nie jest wrogiem — jest narzędziem, które nagradza przewidywalność i porządek.

Kaskada to mechanizm, w którym przeglądarka rozstrzyga konflikt między regułami. Gdy dwie reguły pasują do tego samego elementu i mają taką samą wagę, wygrywa ta, która pojawia się później w źródle. To brzmi banalnie, dopóki nie zobaczysz, jak łatwo odwrócić tę kolejność przez przypadek. Wystarczy dopisać nowy styl na końcu arkusza, dołączyć plik z importem w złym miejscu albo użyć selektora o tej samej specyficzności w innym pliku — i nagle „popsuty" układ okazuje się skutkiem kolejności, a nie złego kodu.

Kompresja w formatach graficznych to nie „magia", która zawsze działa tak samo. Najczęstszy problem pojawia się na krawędziach: tam, gdzie stykają się dwa kontrastujące kolory, np. czarny napis na białym tle albo cienka linia na jednolitym obszarze. Algorytmy kompresji stratnej, takie jak JPEG, dzielą obraz na bloki (zwykle 8x8 pikseli) i przekształcają je w dziedzinę częstotliwości. Na ostrych krawędziach pojawiają się wtedy wysokie częstotliwości, które są bezlitośnie obcinane przy mocniejszej kompresji. Efekt? Rozmycia, „duszki" (ghosting) i charakterystyczne rozmazane plamy wokół krawędzi.

Drugie rozwiązanie to pozostawienie wiersza i dodanie flex-wrap: wrap. Wtedy elementy, które nie mieszczą się w jednej linii, przechodzą do kolejnej. Uwaga: zawijanie nie działa, jeśli elementy mają sztywne szerokości większe niż kontener, ani gdy użyjesz flex-shrink: 0 bez ograniczeń. W praktyce najpierw sprawdź, czy suma minimalnych szerokości nie przekracza dostępnego miejsca.

Kompresja stratna dzieli obraz na bloki, najczęściej 8 na 8 pikseli, i zapisuje je w postaci współczynników. Na gładkich powierzchniach błąd jest niewidoczny, ale przy ostrych krawędziach — konturze twarzy, krawędzi budynku, napisie na tle — sąsiadujące bloki dostają różne wartości i na styku powstaje schodek. To właśnie ten efekt, nazywany rozmyciem krawędzi lub ringingiem, widzisz jako drgającą obwódkę wokół kontrastowych elementów.

Na koniec: gdy blok ma być blokiem, a mimo to jest elementem flex, nie walcz z domyślnym zachowaniem. Albo ustaw flex-direction: column, albo opakuj bloki w dodatkowy kontener, który nie jest flexem. Mieszanie układu flex z blokowym bez świadomej decyzji to najczęstsza przyczyna tego, że nowa linia znika, a tekst wygląda inaczej niż w projekcie.

Pierwszą przyczyną jest zbyt niski współczynnik jakości. W typowym zapisie JPEG jakość 90–95 oznacza kompresję ledwie zauważalną, 70–80 to już wyraźne bloki wokół cienkich linii, a poniżej 60 obraz zaczyna przypominać mozaikę. Druga przyczyna to wielokrotny zapis tego samego pliku. Każde otwarcie i ponowny zapis w formacie stratnym dokłada nową warstwę błędów, także jeśli za każdym razem ustawiasz tę samą jakość. Trzecia przyczyna to zmiana rozmiaru po kompresji: przeskalowanie zdjęcia w dół i ponowny zapis rozmywa krawędzie, a powiększenie uwypukla istniejące już bloki. Czwarta przyczyna to wyostrzanie obrazu po kompresji — filtr podbija kontrast na krawędziach i wydobywa artefakty, które wcześniej były ukryte. Piąta to zapis w formacie przeznaczonym do innych celów, na przykład wielokrotna konwersja między formatami stratnymi bez kontroli nad jakością.

Druga pułapka to style inline i deklaracje z flagą ważności. Atrybut stylu w znaczniku ma wyższy priorytet niż zwykłe reguły z arkusza, więc żadne przestawianie linii go nie przebije. Flaga ważności działa jeszcze mocniej i potrafi zablokować całą kaskadę. Używaj jej oszczędnie, najlepiej wcale, bo później nie pamiętasz, która reguła faktycznie rządzi. Jeśli musisz nadpisać inline, zrób to świadomie i skomentuj w kodzie, żeby następna osoba nie straciła godziny na szukanie przyczyny.

Element w kontenerze flex potrafi nie zmniejszyć się mimo ustawienia flex-shrink na wartość większą od zera. Najczęstszą przyczyną jest minimalny rozmiar, który element sam narzuca. Domyślnie każdy element flex ma właściwość min-width ustawioną na auto. Oznacza to, że przeglądarka nie pozwoli mu zejść poniżej szerokości jego treści — najdłuższego nieprzerwanego słowa, obrazka bez ograniczeń czy szerokości pola formularza. Flex-shrink działa tylko wtedy, gdy element może się faktycznie zmniejszyć, a auto mu to blokuje.

Jak ograniczyć widoczne artefakty na krawędziach Zacznij od tego, żeby zdjęcie zapisywać raz, na końcu obróbki, i w najwyższej jakości, jaką akceptuje docelowe zastosowanie. Jeśli plik ma trafić do druku, wybierz format bezstratny albo bardzo wysoką jakość. Przy publikacji w sieci zapisz kopię roboczą w formacie bezstratnym, a wersję końcową wygeneruj dopiero po wszystkich korektach. Unikaj zapisu pośredniego tylko po to, żeby coś sprawdzić — do podglądu używaj pliku roboczego, nie wynikowego. Kiedy musisz zmniejszyć rozdzielczość, zrób to przed kompresją, a nie po niej. Wyostrzanie wykonuj delikatnie i zawsze przed ostatnim zapisem, nie po nim. Jeśli krawędzie są bardzo kontrastowe, rozważ zapis w formacie, który nie dzieli obrazu na bloki, albo w formacie stratnym nowszej generacji.