5 różnic między article i section, które zmieniają sposób pisania kodu

Jeśli chcesz, aby element nigdy się nie kurczył, ustaw flex-shrink: 0. Pamiętaj jednak, że wtedy może dojść do przepełnienia kontenera i pojawienia się paska przewijania. Alternatywnie zwiększ flex-shrink dla elementów, które mogą się zmniejszać, a dla tego jednego ustaw 0. Możesz też manipulować flex-basis — im większa wartość bazowa, tym większy udział w kurczeniu. Czasem lepiej użyć min-width: 0 na elemencie flex, Https://Lebenskunst.Berlin/Index.Php?Title=Flex_A_Elementy_Blokowe:_Kiedy_Znika_Nowa_Linia_W_TekśCie aby umożliwić kurczenie poniżej rozmiaru treści. Domyślnie elementy flex mają min-width: auto, co może blokować kurczenie poniżej rozmiaru zawartości. Ustawienie min-width: 0 pozwala zejść niżej.

Praktyczna zasada: najpierw napisz treść, potem dobierz znaczniki. Zapytaj, czy fragment jest samodzielny (article), czy tylko grupuje tematycznie (section), a jeśli nie spełnia żadnego z tych warunków — użyj div. Trzymanie się tej kolejności chroni przed nadmiarem znaczników i sprawia, że struktura dokumentu odzwierciedla realną hierarchię treści, a nie chwilową modę na semantykę.

Rem jako bezpieczniejszy wybór rem odwołuje się zawsze do rozmiaru czcionki elementu głównego, czyli html. Nie kumuluje się przy zagnieżdżaniu, więc łatwiej przewidzieć efekt. Standardowy zapis to ustawienie html font-size: 100% i praca na wartościach typu 1.25rem, 0.875rem. Jeśli chcesz powiązać całą stronę z preferencjami użytkownika, ustaw bazę w procentach albo w jednostkach względnych, a nie w pikselach. Wtedy powiększenie tekstu w przeglądarce skaluje wszystko spójnie.

Przycisk, bez którego formularz nie zadziała Najczęstszy błąd to rezygnacja z przycisku zatwierdzającego albo użycie zwykłego bez typu. Przeglądarka domyślnie traktuje przycisk wewnątrz formularza jako type="submit", ale poza formularzem lub przy nietypowej strukturze może się zachować inaczej. Bezpieczniej zapisać wprost: Wyślij. Wartość atrybutu value ma znaczenie tylko dla przycisków typu submit i reset — nie myl go z treścią widoczną na przycisku, którą umieszcza się między znacznikami.

Od strony dostępności oba znaczniki pomagają technologiom asystującym, ale tylko wtedy, gdy są użyte zgodnie z przeznaczeniem. Czytnik ekranu może poinformować użytkownika o liczbie artykułów i sekcji na stronie. Jeśli article zostanie użyty dla zwykłego bloku tekstu, ta informacja wprowadza w błąd. If you have any thoughts concerning where and how to use Lebenskunst.Berlin, you can call us at the webpage. Podobnie section bez nagłówka nie daje nawigacyjnej korzyści — bywa że lepiej zastąpić go elementem div z odpowiednią klasą.

CSS Grid działa na zasadzie siatki, którą sam definiujesz na kontenerze. Zanim ustawisz cokolwiek na dzieciach, musisz nadać rodzicowi display: grid. Bez tego wszystkie właściwości siatki są ignorowane. To pierwszy i najczęstszy błąd: początkujący ustawiają grid-template-columns na elemencie potomnym i dziwią się, że nic się nie dzieje. Siatkę zawsze opisujesz na kontenerze, a elementy potomne tylko się w niej układają.

Jak sprawdzić, gdzie naprawdę prowadzi ścieżka Najprostszy test to otwarcie pliku źródłowego i prześledzenie drogi od miejsca zapisu linku do celu. Zapisz na kartce aktualny folder dokumentu, potem każdy krok w górę lub w dół. Dopiero potem wpisz ścieżkę. Drugi sposób to użycie konsoli lub menedżera plików, który pokazuje ścieżkę bezwzględną. Skopiuj ją, a następnie zamień fragment wspólny dla obu plików na odpowiednią liczbę ../. Jeśli dokument i cel mają wspólny korzeń, ścieżka względna będzie krótsza i przenośniejsza — po skopiowaniu całego projektu na inny komputer nadal zadziała.

Link do pliku w innym folderze działa tylko wtedy, gdy ścieżka dokładnie odpowiada rzeczywistej strukturze katalogów. Każde odwołanie składa się z dwóch elementów: punktu startowego oraz trasy do celu. Punkt startowy decyduje o tym, czy ścieżka jest względna, czy bezwzględna. Ścieżka bezwzględna zaczyna się od katalogu głównego systemu lub serwera i zawiera pełną drogę do pliku. Ścieżka względna zaczyna się od miejsca, przechowywanie w małym mieszkaniu w którym znajduje się dokument zawierający link — i to właśnie ten punkt odniesienia najczęściej powoduje błędy.

Praktyczna zasada: w obrębie jednego projektu używaj ścieżek względnych, a bezwzględnych tylko wtedy, gdy cel naprawdę leży poza strukturą projektu albo gdy link ma działać niezależnie od położenia dokumentu. Zanim uznasz, że link jest gotowy, otwórz go z co najmniej dwóch różnych podstron oraz po przeniesieniu całego folderu w inne miejsce. Jeśli po przeniesieniu przestaje działać, mieszkanie w bloku środku została ścieżka bezwzględna. Popraw ją na względną i sprawdź ponownie. Konsekwentne trzymanie się jednego sposobu oszczędza godziny szukania literówek w adresach.

Wyobraź sobie stronę główną w folderze bazowym oraz podstronę w podfolderze obok. Jeśli w podstronie wpiszesz odwołanie zaczynające się od nazwy pliku, przeglądarka szuka go w tym samym folderze co podstrona, a nie w folderze głównym. Dlatego link prowadzi w pustkę, mimo że plik istnieje. Rozwiązaniem jest świadome operowanie znakami ../. Każde ../ oznacza przejście o jeden poziom wyżej w hierarchii katalogów. Zapis ../obrazki/logo.png mówi: cofnij się z bieżącego folderu, wejdź do folderu obrazki i pobierz plik logo.png.