4 zasady dziedziczenia właściwości do zagnieżdżonych list

CSS Grid zaczyna się od prostej deklaracji: na kontenerze ustawiasz display: grid. Od tego momentu element przestaje być zwykłym blokiem, a jego dzieci trafiają do siatki. Bez zdefiniowanych kolumn i wierszy siatka jest jednoelementowa — wszystko układa się w jednej komórce i wygląda jak zwykły stos. Dlatego pierwszym realnym krokiem jest określenie struktury przez grid-template-columns i grid-template-rows. Te dwie właściwości decydują, ile masz torów i jakiej są szerokości lub wysokości.

Na szerokim ekranie najczęstszy problem to zbyt długa linia tekstu. Powyżej pewnej szerokości czytanie staje się męczące, dlatego warto ograniczyć kontener, np. max-width: 70ch i wyśrodkować go marginesami. Drugi błąd to rozciąganie siatki na siłę — karty robią się wtedy ogromne i puste. Lepiej zwiększyć liczbę kolumn albo dodać odstępy. Pamiętaj też, że media query nie naprawi złej struktury HTML. Jeśli sekcja nie ma logicznego porządku, żaden breakpoint tego nie ukryje.

Typowe pułapki to także używanie list-style-position: inside bez zastanowienia. Ta wartość powoduje, że znacznik wchodzi do wnętrza bloku tekstu, co przy zagnieżdżeniu może rozjechać wcięcia. Lepiej zostać przy outside i kontrolować odstępy przez padding. Kolejna pułapka to dziedziczenie color i font-size — one również przechodzą na podlisty, przechowywanie w małym mieszkaniu co bywa pożądane, ale czasem trzeba je nadpisać. Zawsze testuj w przeglądarce i sprawdzaj, które właściwości faktycznie się dziedziczą, bo lista dziedziczonych cech jest długa, a intuicja bywa zawodna.

Przy bardzo wąskich kontenerach rozważ zmianę kierunku na kolumnowy. W układzie pionowym flex-grow rozdziela wysokość, a problem szerokości znika. To prostsze niż walka z kurczeniem w poziomie. Jeśli jednak musisz zostać przy poziomie, ustaw na kontenerze flex-wrap: wrap — wtedy zamiast ściskania elementy przejdą do nowej linii, a grow zadziała w obrębie każdej z nich.

If you liked this write-up and you would like to obtain a lot more details concerning wykończenie wnętrz kindly pay a visit to our website. Zacznij od stylu mobilnego jako bazowego. Najpierw piszesz reguły dla wąskiego ekranu, bez żadnego media query. Potem dodajesz @media (min-width: …) i dokładasz zmiany dla szerszych widoków. Taki układ jest odporniejszy, bo przeglądarka zawsze ma sensowny punkt startowy. Odwrotna kolejność — najpierw desktop, potem nadpisywanie dla telefonu — generuje długie listy wyjątków i łatwo zgubić, która reguła wygrywa.

Na koniec kwestia spójności ważniejsza niż idealne nazwy. Ustal w projekcie jeden separator i trzymaj się go w każdym pliku, nawet jeśli nazwa wydaje się długa. Jeśli używasz komponentów w kilku miejscach, trzymaj blok w osobnym pliku stylów. Dzięki temu po miesiącu wystarczy wpisać nazwę bloku i od razu wiesz, gdzie szukać kodu, zamiast przeszukiwać cały arkusz.

Pierwsza zasada: dziedziczenie dotyczy tylko właściwości oznaczonych jako dziedziczone. W przypadku list oznacza to, że jeśli ustawisz list-style-type: square na elemencie
, to wszystkie zagnieżdżone listy
wewnątrz niego również przyjmą kwadratowe znaczniki, chyba że nadpiszesz tę wartość. Podobnie działa list-style-position. Natomiast list-style-image też jest dziedziczony, więc jeśli raz ustawisz obrazek jako znacznik, pojawi się on także w podlistach. Aby temu zapobiec, trzeba jawnie zmienić tę właściwość dla zagnieżdżonych elementóoświetlenie w salonie.

Flex-grow ustawione na wartość większą od zera mówi przeglądarce: ten element może urosnąć, jeśli w kontenerze zostanie wolne miejsce. Problem pojawia się, gdy wolnego miejsca nie ma wcale, a mimo to elementy mają się rozciągać. Wtedy przeglądarka nie tworzy miejsca z powietrza — sięga po mechanizm zmniejszania, czyli flex-shrink, a gdy i to nie wystarczy, zawartość zaczyna wychodzić poza kontener. Zrozumienie tej kolejności jest kluczem do przewidywalnego układu.

Czwarta zasada: unikaj używania list-style: none na głównej liście, jeśli chcesz zachować znaczniki w podlistach. Ta właściwość skrótowa zeruje wszystkie trzy składniki i są one dziedziczone. W efekcie podlisty również stracą znaczniki. Lepiej osobno wyłączyć list-style-type: none tylko dla wybranego poziomu, a dla głębszych poziomów przywrócić znaczniki, np. ul list-style-type: none; i ul ul list-style-type: disc; . To częsty błąd, który prowadzi do całkowitego zniknięcia punktorów.

Zdjęcie z aparatu waży kilka megabajtów, a mimo to po zapisaniu w JPEG zajmuje ułamek tej wielkości. To zasługa kompresji stratnej: algorytm wyrzuca informacje, których oko i tak nie rozróżni, ale robi to na stałe. Każde otwarcie i ponowny zapis w tym samym formacie dokłada kolejną porcję strat. Dlatego zdjęcie wielokrotnie edytowane i zapisywane jako JPEG zaczyna wyglądać jak rozmazana plama, zwłaszcza na krawędziach kontrastowych elementów. Wniosek praktyczny: JPEG jest formatem końcowym, nie roboczym. Jeśli planujesz kilka poprawek, pracuj na pliku bezstratnym, a do JPEG zapisz dopiero finalną wersję.