Co się stanie, gdy ustawisz szerokość na sztywno zamiast flex-shrink

Nagłówki w HTML nie służą do ustawiania rozmiaru tekstu. Rozmiar to skutek uboczny, a nie cel. Znaczniki od h1 do h6 opisują hierarchię treści: co jest tematem głównym, co podtematem, a co szczegółem. Przeglądarki i czytniki ekranu interpretują tę hierarchię, dlatego nagłówek h3 wstawiony tylko dlatego, że wygląda dobrze, psuje strukturę dokumentu. Zasada jest prosta: najpierw ustal, jak treść dzieli się logicznie, potem dobierz znacznik.

PNG: przezroczystość i ostre krawędzie bez kompromisów PNG to format bezstratny, który obsługuje kanał alfa, czyli pełną przezroczystość. Sprawdza się w grach, interfejsach, logotypach i wszędzie tam, gdzie tło ma pozostać widoczne. Zapisując grafikę w PNG, możesz wybrać opcję przezroczystości – w programach graficznych odznacz „białe tło" lub ustaw kanał alfa. Uważaj jednak na rozmiar: pliki PNG bywają kilkukrotnie większe od JPG, zwłaszcza przy zdjęciach. Dlatego nie używaj PNG do fotografii, chyba że zależy ci na bezstratności i nie przeszkadza ci duży plik. Częstym błędem jest zapisywanie zdjęć w PNG „bo mają lepszą jakość" – w praktyce różnica bywa niezauważalna, a waga pliku rośnie ogromnie. Pamiętaj też, że PNG nie nadaje się do animacji (od tego jest inny format, np. GIF lub APNG, ale to osobna historia).

Wybór formatu pliku graficznego bywa źródłem problemów: zdjęcie zapisane jako PNG zajmuje niepotrzebnie dużo miejsca, a ikona w JPG traci ostrość i przezroczystość. Każdy z trzech popularnych formatów – JPG, PNG i SVG – ma swoje miejsce. Poznanie ich mocnych stron pozwala uniknąć typowych błędów.

Podsumowując: zdjęcia zapisuj w JPG z umiarkowaną kompresją, grafiki z przezroczystością i ostre krawędzie w PNG, a ikony i proste kształty w SVG. Świadomy wybór formatu oszczędza czas, miejsce i nerwy.

SVG: ikony i ilustracje skalujące się bez utraty jakości SVG to format wektorowy – opisuje kształty za pomocą matematycznych równań, a nie pikseli. Dzięki temu można go powiększać bez końca bez utraty ostrości. Idealnie nadaje się do ikon, wykresów, prostych ilustracji i elementów interfejsu. Aby stworzyć SVG, użyj programu wektorowego (np. Inkscape, wykończenie wnętrz Illustrator) lub edytora kodu. Zapisując ikonę w SVG, zadbaj o czyste ścieżki – niepotrzebne punkty kontrolne zwiększają rozmiar i utrudniają edycję. Unikaj osadzania rastrowych obrazów wewnątrz SVG, bo stracisz główną zaletę wektorów. Typowy błąd to konwersja zdjęcia do SVG – efekt będzie wielkim, nieczytelnym plikiem, który nie przypomina oryginału. SVG świetnie działa w przeglądarkach, ale nie każdy program graficzny go obsługuje. Przed użyciem upewnij się, że docelowe środowisko go akceptuje.

Kolumny definiujesz właściwością grid-template-columns. Zapis grid-template-columns: 200px 200px 200px tworzy trzy kolumny o stałej szerokości. Wiersze działają identycznie przez grid-template-rows, ale w praktyce często pomija się ich jawną liczbę — elementy same schodzą do kolejnych rzędów, gdy zabraknie miejsca w poprzednim. Jeśli zdefiniujesz mniej wierszy niż potrzeba, przeglądarka dołoży kolejne o wysokości dopasowanej do zawartości.

Ustawiasz elementowi flex-basis: 300px, a on i tak się kurczy. To nie błąd przeglądarki, tylko skutek działania algorytmu rozdziału miejsca w kontenerze flex. Wartość flex-shrink decyduje o tym, jak bardzo element może się zmniejszyć, gdy suma jego rozmiarów przekracza dostępną przestrzeń. Domyślnie flex-shrink: 1, więc każdy element może się skurczyć, nawet jeśli ma zdefiniowaną szerokość bazową. Aby temu zapobiec, ustaw flex-shrink: 0.

CSS Grid zaczyna się od dwóch osi: kolumn i wierszy. Kontener staje się siatką, gdy ustawisz mu display: grid. Od tej chwili każde dziecko trafia do komórki, a przeglądarka sama decyduje, w której kolumnie i wierszu je umieścić — dopóki nie wskażesz tego ręcznie. Największe zamieszanie bierze się z mylenia siatki z flexboxem: flex układa elementy w jednej linii, grid pozwala rozplanować je w dwóch wymiarach jednocześnie.

JPG: kompresja strata, która służy zdjęciom JPG stosuje kompresję stratną, która świetnie sprawdza się w fotografii, gdzie drobne zniekształcenia są niezauważalne. Przy zapisie zdjęcia do JPG wybierz jakość w granicach 70–85%. Niższa wartość drastycznie pogarsza wygląd, wyższa nieproporcjonalnie zwiększa rozmiar pliku. Pamiętaj, że każdorazowy zapis tego samego pliku w JPG pogłębia utratę jakości – dlatego edytuj i zapisuj dopiero na końcu, Lebenskunst.Berlin najlepiej z oryginału. Nie używaj JPG do grafiki z ostrymi krawędziami, tekstem czy jednolitymi tłami, bo wokół nich pojawią się rozmazane artefakty. JPG nie obsługuje przezroczystości – jeśli ją zapiszesz, When you loved this informative article and you wish to receive details about jak urządzić Małą kuchnię i implore you to visit the web site. zostanie zastąpiona białym lub czarnym tłem.

Najczęstszy błąd to sztywne piksele przy zmiennej szerokości okna. Trzy kolumny po 300 pikseli w kontenerze o szerokości 600 pikseli nie zmieszczą się i wywołają poziomy pasek przewijania. Drugi typowy problem: zapominasz o gap i odstępy robisz marginesami na dzieciach. Marginesy rozjeżdżają siatkę, bo dokładają się do szerokości komórek, a gap działa na przerwach między torami i nie wpływa na ich rozmiar.