Edytujesz Gdy na krawędziach widać piksele, sprawdź kompresję obrazu

Uważaj też na flex-shrink. Domyślnie wynosi 1, więc gdy elementy nie mieszczą się w kontenerze, kurczą się proporcjonalnie, zanim flex-grow w ogóle zacznie działać. Jeśli chcesz, aby nadmiar był dzielony bez kurczenia, ustaw flex-shrink: 0 i pozwól, by elementy wychodziły poza kontener albo się zawijały. Pamiętaj, że flex-grow działa tylko wtedy, gdy w kontenerze jest wolne miejsce — przy przepełnieniu nie ma czego dzielić.<br><br>Artefakty na krawędziach to najczęstszy objaw zbyt agresywnej kompresji stratnej. Widać je jako rozmyte kontury, podwójne linie, kolorowe obwódki albo charakterystyczne „schodki" na granicy jasnego i ciemnego obszaru. Problem nie bierze się z samego formatu, ale z tego, jak algorytm redukuje dane. JPEG dzieli obraz na bloki 8×8 pikseli i w każdym z nich osobno usuwa część informacji o wysokich częstotliwościach. Krawędź to właśnie nagła zmiana częstotliwości, więc najłatwiej ją zepsuć.<br><br>Gdzie postawić header, a gdzie nav header to nie synonim górnego paska. To wprowadzenie do najbliższego kontekstu — może być nagłówkiem całej strony, ale też pojedynczego artykułu czy sekcji. W nagłówku strony zwykle ląduje logo, nazwa serwisu i główne menu. W nagłówku artykułu — tytuł, autor i data. Możesz mieć wiele elementów header w dokumencie, byle każdy należał do innego bloku. nav z kolei opisuje zbiór linków nawigacyjnych. Nie każdy zestaw odnośników to nawigacja: linki w stopce albo w akapicie nie muszą być w nav. Używaj go dla menu głównego, bocznego, breadcrumbów i spisu treści. Jeśli na stronie jest kilka nawigacji, rozróżnij je atrybutem aria-label, np. „menu główne" i „menu boczne".<br><br>Mechanizm jest prosty: każdy element dostaje część wolnej przestrzeni równą swojemu flex-grow podzielonemu przez sumę flex-grow wszystkich elementów. Przy wartościach 1, 2 i 1 element środkowy otrzyma połowę wolnej przestrzeni, a skrajne po jednej czwartej. W praktyce nie oznacza to, że środkowy będzie dwa razy szerszy od pozostałych — będzie szerszy tylko o przydzieloną resztę, czyli np. o 150 px zamiast o 75 px.<br><br>Gdzie najczęściej popełnia się błąd Pierwszy typowy problem to brak zdefiniowanego flex-basis. Gdy go pominiesz, przeglądarka przyjmuje zawartość elementu jako podstawę, a wtedy podział wolnej przestrzeni bywa nieprzewidywalny. Ustaw flex-basis jawnie, choćby na 0, jeśli chcesz, aby proporcje wynikały wyłącznie z flex-grow. Drugi błąd to dodanie flex-grow do elementów, które mają sztywne width. Wartość width nadal działa jako ograniczenie, ale może zablokować rozciąganie i wolna przestrzeń zostanie niewykorzystana.<br><br>Kolejna pułapka to kontener bez zdefiniowanej szerokości. Element flex z flex-basis: 25% wewnątrz kontenera, który sam rozmiar bierze z treści, może rozepchnąć rodzica zamiast się do niego dopasować. Dotyczy to zwłaszcza sytuacji, gdy rodzic jest elementem inline lub ma position: absolute bez ustawionych wymiarów. Wtedy procent staje się wartością względną wobec czegoś, czego w praktyce nie ma. Najprostsze rozwiązanie: nadaj rodzicowi display: flex i wymuś jego szerokość przez width, max-width lub logiczne wypełnienie dostępnej przestrzeni.<br><br>Zacznij od main. To najważniejszy element całej struktury, bo wskazuje unikalną treść danej podstrony. Na jednej stronie może wystąpić tylko raz i nie powinien zawierać się w header, footer ani nav. Wszystko, co powtarza się na każdej podstronie — logo, menu, stopka — zostaje poza nim. Typowy błąd polega na tym, że ktoś wrzuca do main pasek boczny z reklamami albo zostawia go pustego, a treść wkleja do zwykłego div. Efekt jest taki, że czytnik ekranu nie ma czego pominąć, więc użytkownik przekopuje się przez nawigację przy każdym wejściu.<br><br>Kaskada to mechanizm, w którym przeglądarka zbiera wszystkie reguły pasujące do danego elementu, a potem rozstrzyga, która z nich ma największą moc. W praktyce najczęściej wygrywa ta, która pojawia się później w źródle — ale tylko wtedy, gdy pozostałe warunki są równe. Jeśli dwie reguły mają identyczną specyficzność i obie pasują do tego samego elementu, późniejsza po prostu nadpisuje wcześniejszą. To nie jest błąd ani widzimisię przeglądarki, tylko celowa zasada, która pozwala nadpisywać style bez zmiany selektorów.<br><br>Jak zmniejszyć widoczność artefaktów bez utraty jakości Regulacja jakości to nie jedyne pokrętło. Warto zwiększyć rozdzielczość zapisu, jeśli obraz i tak będzie wyświetlany mniejszy. Kompresja stratna działa na pikselach, więc zapisanie większej liczby pikseli przy tej samej jakości często daje lepszy wynik po zmniejszeniu. Drugi sposób to zapis w formacie bezstratnym, np. PNG, gdy obraz zawiera ostre krawędzie, tekst lub cienkie linie. Jeśli musisz użyć JPEG, ustaw jakość na 85–95 i sprawdź podgląd przy powiększeniu 200–400%. Nie kieruj się rozmiarem pliku jako jedynym kryterium — liczy się to, co widać na krawędziach.