Co się stanie, gdy zabraknie alt?
Krótko, konkretnie, bez powtarzania podpisu Alt nie powinien powielać tekstu, który stoi obok. Jeśli pod obrazkiem jest podpis „Rysunek 1. Schemat połączeń", alt może być pusty, bo podpis już opisuje ilustrację. Unikaj też wstępów typu „zdjęcie przedstawia" – czytnik ekranu i tak poinformuje, że to obraz. Skup się na treści: „Pies rasy labrador biegnie po plaży". Długość? Zwykle wystarczy jedno zdanie, maksymalnie 125 znaków. Dłuższe opisy są męczące, ale jeśli obrazek jest złożony (np. diagram), możesz użyć dłuższego alt lub odesłać do opisu w tekście.<br>
<br>
<br>
<br>
Kontener flex rozdziela wolną przestrzeń między elementy proporcjonalnie do ich współczynnika flex-shrink i szerokości bazowej. Jeśli suma szerokości bazowej przekracza dostępne miejsce, nadwyżka jest odejmowana od każdego elementu. Element z większą szerokością bazową straci proporcjonalnie więcej pikseli. Efekt bywa zaskakujący: wąski element może w ogóle nie ucierpieć, a szeroki skurczy się mocno, mimo że miał sztywne width.<br>
<br>
<br>
<br>
Jak zablokować kurczenie i kiedy to ma sens Najprostsze rozwiązanie to flex-shrink: 0 na elemencie, który ma zachować swoją szerokość. Wtedy przeglądarka nie zabierze mu ani piksela — nadwyżka zostanie zdjęta z pozostałych elementów. Uważaj jednak na konsekwencje: jeśli wszystkie elementy w rzędzie dostaną flex-shrink: 0, a ich suma przekroczy szerokość kontenera, pojawi się poziomy pasek przewijania albo zawartość wyjdzie poza obszar. Często lepiej ustawić flex-shrink: 0 tylko na kluczowym elemencie, np. na przycisku lub ikonie, a resztę zostawić elastyczną.<br>
<br>
<br>
<br>
HSL rozwiązuje ten problem, bo opisuje kolor tak, jak postrzega go człowiek: hsl(210 80% 50%) to barwa, nasycenie i jasność. Chcesz ciemniejszy odcień tego samego koloru — zmniejszasz jasność. Chcesz wyblakły — obniżasz nasycenie. Dlatego HSL świetnie nadaje się do budowania palet i motywów, gdzie liczy się spójność odcieni. Uwaga na jednostki: barwa to stopnie od 0 do 360, a nasycenie i jasność to procenty. Wartość jasności 100% daje biel niezależnie od barwy, a 0% czerń — to częsta pułapka przy generowaniu palet w pętli.<br>
<br>
<br>
<br>
Jak zbudować poprawną strukturę header umieszczaj na początku sekcji lub całej strony. Zwykle zawiera logo, tytuł i podstawowe informacje. nav przeznaczony jest na główną nawigację — nie musi być w header, ale często tam trafia. W main umieść treść unikalną dla danego widoku; na stronie powinien być tylko jeden taki element. footer zamyka stronę lub sekcję i zawiera informacje końcowe, takie jak prawa autorskie, dane kontaktowe czy powtórzone odnośniki.<br>
<br>
<br>
<br>
Zapis szesnastkowy, rgb i hsl w praktyce HEX to sześć znaków po #, po dwa na składową R, G i B w systemie szesnastkowym. Skrót #f00 oznacza to samo co #ff0000 i jest czytelny, gdy wartości się powtarzają. Uwaga na kanał alfa: #ff000080 to kolor z przezroczystością, gdzie ostatnie dwa znaki określają krycie. Częsty błąd to pominięcie znaku # albo wpisanie pięciu zamiast sześciu cyfr — CSS zignoruje taką deklarację bez ostrzeżenia i kolor spadnie z wcześniejszej reguły.<br>
<br>
<br>
<br>
Dobry alt to nawyk. Przechodząc do publikacji, sprawdź każdy obraz: czy ma alt? Czy ten alt mówi, co trzeba wiedzieć, gdy obrazu nie widać? Czy nie jest zbyt długi lub zbyt krótki? Czy nie powtarza sąsiedniego tekstu? Odpowiedzi „tak" na te pytania oznaczają, że robisz to dobrze.<br>
<br>
<br>
<br>
Typowy błąd to poleganie wyłącznie na width bez sprawdzenia, czy element nie jest przypadkiem elementem flex. Wiele osób ustawia width: 200px i dziwi się, że po dodaniu kilku elementów obok siebie szerokość się zmienia. Warto wtedy zajrzeć do inspektora i sprawdzić obliczoną wartość flex-shrink. Inny częsty problem to kontener z flex-wrap: nowrap — wtedy elementy nigdy nie przejdą do nowej linii, więc będą się kurczyć bez końca, aż do osiągnięcia min-width lub zera.<br>
<br>
<br>
<br>
Zanim dwuklik zadziała, sprawdź, czy plik naprawdę nazywa się index.html, a nie index.html.txt. Systemy często ukrywają rozszerzenia znane, więc w edytorze tekstu zapiszesz „index.html", a otrzymasz „index.html.txt". Wtedy dwuklik otworzy notatnik albo edytor, nie przeglądarkę. Włącz wyświetlanie rozszerzeń w opcjach folderów i popraw nazwę. Druga pułapka to brak przypisania: jeśli .html nie jest skojarzone z żadną przeglądarką, system zapyta, czym otworzyć plik — wybierz przeglądarkę i zaznacz opcję stałego przypisania.<br>
<br>
<br>
<br>
Typowe błędy to wpisywanie nazw, które istnieją tylko na jednym systemie, oraz używanie cudzysłowów wokół nazw złożonych z wielu słów. Nazwy takie jak „Times New Roman" wymagają cudzysłowu, ale pojedyncze słowa — nie. Kolejny częsty problem: umieszczanie na końcu listy wyłącznie jednego ogólnego słowa kluczowego. Jeśli zabraknie wszystkich konkretnych krojów, przeglądarka i tak wybierze coś domyślnego, ale lepiej mieć kontrolę nad tym, co to będzie.