Mobile first czy desktop first: co decyduje o układzie na wąskim ekran…

SVG to format wektorowy: zamiast siatki pikseli zapisuje matematyczny opis kształtów. Dzięki temu ikona, logo czy wykres wyglądają ostro w każdym rozmiarze i ważą niewiele. Nadaje się wyłącznie do grafiki płaskiej, złożonej z linii i wypełnień — zdjęcia i tekstury w SVG nie mają sensu. If you cherished this short article and you would like to obtain additional data pertaining to Meble Na Wymiar kindly take a look at our website. Praktyczna zasada: rysuj ikonę w programie wektorowym, a nie obrysowuj bitmapę automatycznym narzędziem, bo dostaniesz setki przypadkowych ścieżek. Przed eksportem usuń zbędne warstwy, sprowadź kształty do prostych figur i pozbądź się metadanych edytora. Pamiętaj też, że SVG wstawiony na stronę to kod, więc plik z zewnętrznego źródła może zawierać niechciane skrypty — otwieraj go w edytorze tekstu i sprawdź zawartość przed publikacją.

Gdy dwie reguły ustawiają tę samą właściwość, nie zawsze wygrywa ta napisana niżej w pliku. Przeglądarka rozstrzyga konflikt w trzech krokach: najpierw sprawdza ważność deklaracji, potem specyficzność selektora, a na końcu kolejność wystąpienia. Zrozumienie tej kolejności oszczędza godziny zgadywania, dlaczego zmiana koloru nie działa.

Warto też pamiętać o kolejności w arkuszu: warunki dla szerszych widoków muszą znajdować się po stylach bazowych. Jeśli wrzucisz je wyżej, kaskada je nadpisze i przestaną działać. Nie chodzi o to, żeby zawsze zaczynać od telefonu, ale żeby decyzję o kolejności podejmować świadomie. W większości projektów, gdzie treść jest najważniejsza, styl bazowy dla wąskiego ekranu jest po prostu mniejszym ryzykiem.

Dopasowanie działa inaczej, niż się wydaje Przy każdej nazwie przeglądarka sprawdza nie tylko, czy rodzina istnieje, ale też czy ma odpowiednią odmianę: grubość, styl i szerokość. Gdy w danym kroju brakuje np. wersji pogrubionej, przeglądarka może użyć sztucznego pogrubienia albo przejść do następnej pozycji z listy — zależnie od implementacji i od tego, czy dalsza rodzina ma tę odmianę. Dlatego lista z jedną czcionką „na wszystko" często kończy się brzydkim, rozjechanym tekstem na innym systemie.

Praktyczna zasada jest prosta: zaczynaj od czcionki, którą naprawdę chcesz pokazać, potem dodaj jedną lub dwie sensowne alternatywy, a na końcu zawsze wstaw rodzinę rodzajową. Nazwy złożone z kilku słów obejmuj cudzysłowem. Sprawdzaj, czy wybrane kroje mają wszystkie potrzebne grubości i kursywy — inaczej przeglądarka zacznie je sztucznie przechylać i pogrubiać, co psuje czytelność. Warto też pamiętać, że czcionka systemowa użytkownika może wyglądać zupełnie inaczej niż ta na komputerze, na którym projektujesz.

Nie zakładaj, że lista czcionek działa jak gwarancja wyglądu. To tylko preferencja. Przeglądarka rozstrzyga ją lokalnie, na podstawie tego, co ma zainstalowane, i żadna deklaracja w arkuszu stylów tego nie wymusi. Jeśli wygląd musi być powtarzalny, osadź krój w projekcie razem z odmianami, a listę traktuj jako awaryjne zabezpieczenie. Dzięki temu unikniesz sytuacji, w której jedna brakująca nazwa przewraca całą typografię.

Najczęstszy błąd to mieszanie jednostek i punktów granicznych. Jeśli używasz pikseli w jednym miejscu, a em w drugim, warunki zaczną się nakładać albo przeskakiwać. Wybierz jeden system i trzymaj się go w całym pliku. Drugi typowy problem to brak treści w wąskim widoku — projektujesz na telefonie, ale testujesz na monitorze i nie widzisz, że przycisk po prostu nie mieści się w kolumnie. Trzeci błąd to zerowe marginesy na małym ekranie; brak odstępu między blokami sprawia, że strona wygląda na niedokończoną.

Jak to wygląda w kodzie i na co uważać Zacznij od kontenera, który ma max-width i wyśrodkowanie, ale bez sztywnej szerokości w pikselach. Elementy układaj w jednej kolumnie, obrazy ustaw jako max-width: 100% i height: auto. Dopiero potem dodaj warunek, na przykład @media (min-width: 48em), i w nim zmień kontener na dwie kolumny, zwiększ padding i ustaw większe odstępy między sekcjami. Wszystkie wartości bazowe zostają — nadpisujesz tylko to, co naprawdę musi się zmienić.

Jak skutecznie usunąć białe znaki między elementami Najprostsza metoda to zapisanie elementów w kodzie bez żadnych spacji ani nowych linii. Działa, ale kod staje się nieczytelny, szczególnie gdy elementów jest kilkanaście. Lepszym rozwiązaniem jest komentarz HTML wstawiony między elementy, który „zjada" biały znak. Minus: komentarze zaśmiecają strukturę i łatwo je przypadkiem usunąć podczas refaktoryzacji.

Przezroczystość i ikony: kiedy PNG, a kiedy SVG PNG stosuje kompresję bezstratną i obsługuje kanał alfa, czyli przezroczystość. To domyślny wybór dla elementów interfejsu, logotypów, metamorfoza mieszkania zrzutów ekranu i grafik, które mają leżeć na zmiennym tle. Uwaga na dwa typowe błędy: zapisywanie zdjęcia jako PNG, co daje plik kilkanaście razy większy niż JPG bez widocznej korzyści, oraz eksportowanie ikony w zbyt małym rozmiarze. PNG nie skaluje się bez utraty jakości — powiększony okaże się rozmyty. Jeśli potrzebujesz przezroczystości przy fotografii, lepszym rozwiązaniem bywa WebP, ale nie każdy odbiorca go obsłuży, więc warto mieć zapasowy PNG.