Zanim wskażesz element, wybierz selektor świadomie

Selektor to sposób, w jaki przeglądarka znajduje element w drzewie dokumentu. W CSS i JavaScript masz do dyspozycji trzy podstawowe rodzaje: selektor znacznika, klasy i identyfikatora. Każdy działa inaczej, meble na wymiar ma inną specyficzność i inne zastosowanie. Wybór niewłaściwego prowadzi do stylów, które „nie chcą się nadpisać", albo do kodu, który przestaje działać po zmianie jednego atrybutu.

Praktyczna zasada jest prosta. Znaczniki zostaw do ustawień ogólnych i resetów. Klasy twórz do wszystkiego, co ma wyglądać spójnie i powtarzalnie. Identyfikatory ogranicz do przypadków, w których potrzebujesz jednego, niepowtarzalnego punktu zaczepienia — na przykład do skryptu albo do powiązania etykiety z polem. Zanim dodasz selektor, zadaj sobie pytanie: czy ten element występuje raz, czy wiele razy. Odpowiedź rozstrzyga wybór i oszczędza późniejszych poprawek.

Warto pamiętać, że przeglądarki mają domyślnie 16px, ale użytkownik może to zmienić. Procent na html respektuje tę decyzję, natomiast sztywne 16px w tym samym miejscu ją ignoruje. To najczęstszy błąd dostępności: autorzy ustawiają html font-size: 16px i dziwią się, że powiększanie czcionki w przeglądarce nic nie daje. Lepiej zostawić html font-size: 100% i operować rem. Jeśli potrzebujesz mniejszej bazy, użyj np. 87.5%, co da 14px przy domyślnych ustawieniach, ale nadal będzie skalowalne.

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).

Zacznij od ustalenia siatki. Plan tygodnia ma zwykle kolumnę z godziną i siedem kolumn z dniami — razem osiem kolumn w każdym wierszu. To nie znaczy, że musisz wpisać osiem znacznikóprzechowywanie w małym mieszkaniu td w każdym wierszu. Znaczy to, że suma wartości colspan we wszystkich komórkach danego wiersza musi wynosić osiem, a komórki rozciągnięte w pionie przez rowspan z wierszy powyżej zajmują miejsce, więc nie powtarzasz ich w kolejnych wierszach.

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.

Plan tygodnia to dobry materiał do nauki scalania komórek, bo naturalnie zawiera bloki zajęte przez jedną rzecz: szkolenie od poniedziałku do środy, dyżur w piątek po południu, urlop ciągnący się przez kilka dni. Tabela oparta na zwykłych komórkach wymusza powtarzanie tego samego napisu w każdym dniu i wygląda jak lista, nie jak kalendarz. Atrybuty colspan i rowspan rozwiązują problem, ale tylko wtedy, gdy policzy się kolumny i wiersze przed napisaniem pierwszej komórki.

Na koniec dwie rzeczy, o których się zapomina. Pierwsza: scalona komórka to nadal jedna komórka, więc nie da się jej jednocześnie wyrównać do lewej i do środka, a zawijanie tekstu działa w całym bloku, nie w poszczególnych dniach. Druga: przy tabelach z nagłówkiem użyj th zamiast td, żeby czytniki ekranu wiedziały, co jest opisem, a co wartością. Sprawdź plan po zwężeniu okna — scalone komórki najpierw tracą czytelność, a dopiero potem psują układ.

Na koniec: zawsze sprawdzaj w narzędziach deweloperskich, czy odstęp pochodzi od białego znaku, czy od marginesu. Zdarza się, że ktoś dodaje margin-right do wszystkich elementów oprócz ostatniego, a potem i tak zostaje niewielka szpara od spacji. Łączenie obu mechanizmów daje podwójny odstęp, który trudno później wydebugować. Wybierz jedną strategię i trzymaj się jej w całym projekcie.

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.

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, 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, zostanie zastąpiona białym lub czarnym tłem.

If you have any kind of questions pertaining to where and ways to utilize https://lebenskunst.berlin, you could contact us at our web-page.