Kiedy JPG, PNG czy SVG — czym się różnią i który wybrać?

Szerokości i obramowania reguluje się w CSS, nie w atrybutach HTML. Dawny atrybut border na elemencie jest przestarzały. Zamiast niego użyj border-collapse: collapse, żeby linie się nie dublowały, oraz padding w komórkach, żeby tekst nie dotykał krawędzi. Pamiętaj, że table-layout: meble na wymiar fixed przyspiesza renderowanie, ale wymaga jawnie określonych szerokości kolumn — inaczej przeglądarka podzieli dostępną przestrzeń po swojemu.

Zanim dwuklik zadziała poprawnie, plik musi mieć właściwe rozszerzenie. Windows domyślnie ukrywa rozszerzenia znanych typów plików, przechowywanie w małym mieszkaniu więc plik zapisany jako index.html.txt może wyglądać jak index.html, a po dwukliku otworzy się w Notatniku. Sprawdź rozszerzenie w Eksploratorze, włączając widok rozszerzeń, albo w oknie zapisu wybierz typ „Wszystkie pliki" i dopisz .html ręcznie. Podobny problem pojawia się, gdy edytor tekstu zapisuje dokument w formacie innym niż czysty tekst, na przykład w formacie dokumentu biurowego.

JPG powstał do zdjęć i obrazów o płynnych przejściach tonalnych. Kompresja stratna usuwa szczegóły, których oko i tak nie wychwyci, więc fotografia krajobrazu czy portret zmieszczą się w rozsądnym rozmiarze. Problem pojawia się przy grafice z ostrymi krawędziami: tekst, wykresy, logo i cienkie linie zaczną się rozmywać, a wokół nich pojawią się szumy i tak zwane artefakty. Drugi kłopot to brak przezroczystości — JPG zawsze ma tło, więc wklejenie go na kolorowy prostokąt daje białą łatę. Trzeci: każde zapisanie pliku pogarsza jakość. Jeśli obrabiasz zdjęcie w kilku krokach, zapisuj do formatu bezstratnego i konwertuj na JPG dopiero na końcu.

Dobra praktyka: nagłówek ma opisywać treść, która po nim następuje, i nie zawierać całych akapitów. Krótki, konkretny tekst działa lepiej niż zdanie złożone. Jeśli sekcja nie ma naturalnego tytułu, nie twórz go na siłę — czasem lepszy jest akapit z mocnym początkiem. Pamiętaj też, że wyszukiwarki analizują nagłówki, by zrozumieć temat strony, ale nie zastąpią one wartościowej treści. Hierarchia to fundament, nie ozdoba.

Kiedy width nadpisuje flex-basis Odwrócenie zależności następuje w dwóch przypadkach. Pierwszy to flex-basis: auto — wtedy szerokość pochodzi z width. Drugi to element, który nie jest dzieckiem kontenera flex. Poza flexboxem flex-basis nie działa, więc width rządzi bez przeszkód. Trzeci, mniej oczywisty przypadek to flex-basis ustawione na wartość procentową przy braku zdefiniowanej szerokości rodzica. Wtedy przeglądarka może potraktować podstawę jako auto i znów sięgnąć po width. Warto o tym pamiętać, projektując kontenery o nieokreślonej szerokości.
Sytuacja komplikuje się, gdy na tym samym elemencie ustawisz width i flex-basis. Wtedy flex-basis wygrywa, ale wyłącznie w kontekście elastycznego kontenera i tylko wtedy, gdy nie jest ustawione na auto. Wartość width nadal istnieje w kaskadzie, lecz flexbox traktuje ją jako drugorzędną. Uwaga na flex: 1 — to skrót, który ustawia flex-basis na 0%. Wówczas width zostaje całkowicie pominięte, a o rozmiarze decyduje podział wolnego miejsca między elementy.

Najczęstszy błąd to mieszanie width z flex-basis bez świadomości, że flex-basis ma wyższy priorytet w osi głównej. Drugi to używanie width do ograniczania elastycznych elementów — zamiast tego lepiej zastosować flex-basis, a do sztywnego rozmiaru min-width lub max-width. Trzeci błąd polega na tym, że width wpływa na rozmiar w osi poprzecznej, a flex-basis tylko na głównej. W kontenerze z flex-direction: column role się odwracają i width przestaje być osią główną.

W flexboxie elementy układają się wzdłuż osi głównej, a ich rozmiar początkowy wyznacza właściwość flex-basis. Domyślnie ma ona wartość auto, co oznacza, że przeglądarka sięga po width, a jeśli i jego brak — po szerokość wynikającą z zawartości. W praktyce więc width bywa pierwszym punktem odniesienia, ale tylko dopóki flex-basis pozostaje ustawione na auto. Każda inna wartość, np. flex-basis: 200px, sprawia, że to ona staje się bazą obliczeń, a width przestaje mieć znaczenie przy ustalaniu rozmiaru początkowego.

Zacznij od h1. Na stronie powinien być dokładnie jeden taki nagłówek i ma opisywać całą stronę, a nie pojedynczą sekcję. Jeśli wstawiasz h1 w każdej zakładce albo powtarzasz go w kilku blokach, wprowadzasz chaos. Kolejne poziomy układaj jak spis treści: h2 to główne części, h3 podtematy w ich obrębie, h4 rozbija szczegóły, a h5 i h6 stosuj naprawdę rzadko. Nie przeskakuj z h2 od razu do h5, bo zniknie logika nadrzędności.

Wybór sprowadza się do trzech pytań. Czy to zdjęcie z płynnymi przejściami? JPG. Czy potrzebna jest przezroczystość albo idealna ostrość pojedynczych pikseli? PNG. Czy obraz ma być ikoną, logo lub wykresem i zmieniać rozmiar bez utraty jakości? SVG. Zanim zapiszesz plik, sprawdź go w docelowym rozmiarze i na docelowym tle — dopiero wtedy widać, czy kompresja nie zjadła szczegółów i czy przezroczystość działa zgodnie z oczekiwaniem.
If you adored this write-up and you would like to get additional details concerning link kindly visit our web-page.