4 zasady pisania alt, które ratują dostępność i wygląd strony
Atrybut alt to tekst, który trafia w miejsce obrazu, gdy ten się nie wczyta, oraz do czytnika ekranu, gdy użytkownik nie widzi grafiki. Nie jest to ozdoba kodu ani pole do wrzucania słów kluczowych. Ma jedno zadanie: przekazać sens obrazu temu, kto go nie odbiera wzrokiem. Jeśli obraz nie niesie żadnej informacji, atrybut alt nadal jest potrzebny — pusty, ale obecny.<br>
<br>
<br>
<br>
Ostatnia pułapka to procenty względem wysokości. Flex-basis: 50% w kontenerze z flex-direction: column odnosi się do wysokości rodzica, ale tylko gdy ta wysokość jest jawnie określona. Rodzic z height: auto nie da podstawy do obliczeń i element zachowa się jak przy basis: auto. Jeśli potrzebujesz równych rzędów w kolumnie, ustaw rodzicowi konkretną wysokość albo przełącz się na grid z równymi jednostkami fr — tam podział przestrzeni jest jednoznaczny i nie zależy od kolejności elementów.<br>
<br>
<br>
<br>
Link, który działa na twoim komputerze, po przeniesieniu na inny albo po wgraniu na serwer potrafi przestać działać. Powód jest prawie zawsze ten sam: zamiast ścieżki względnej ktoś wpisał ścieżkę bezwzględną. Różnica między nimi jest niewielka w zapisie, ale ogromna w skutkach.<br>
<br>
<br>
<br>
Zacznij od rozróżnienia: flex-basis to nie width. Wartość bazowa jest punktem wyjścia dla algorytmu flex, który może ją zwiększyć przez flex-grow albo zmniejszyć przez flex-shrink. Gdy ustawiasz flex-basis: 30%, element domyślnie dostaje flex-shrink: 1, więc przy ciasnym kontenerze kurczy się poniżej 30%. Jeśli chcesz, żeby procent był twardy, dopisz flex-shrink: 0. Pamiętaj jednak, że wtedy łatwo o przepełnienie i poziomy pasek przewijania.<br>
<br>
<br>
<br>
Jak policzyć procent, żeby nie zgadywać Przy trzech kolumnach i odstępie 16 px w kontenerze o szerokości 1000 px dostępna przestrzeń to 1000 minus dwa odstępy, czyli 968 px. Jedna kolumna ma więc 322,6 px, co daje około 32,26% szerokości rodzica. Wpisujesz flex-basis: 32,26% i flex-shrink: 0. W CSS nie musisz liczyć tego ręcznie — nowsze przeglądarki obsługują calc: flex-basis: calc(33.333% - 10.666px). To czytelniejsze i odporne na zmianę odstępu, choć nadal wymaga znajomości liczby elementów w rzędzie.<br>
<br>
<br>
<br>
Gdy przenosisz plik z linkiem w inne miejsce, ścieżki względne się psują, a bezwzględne nie. Dlatego w projektach, które mają działać na różnych maszynach, stosuje się ścieżki względne albo odwołania liczone od katalogu głównego projektu. Zanim uznasz link za gotowy, otwórz dokument z innego folderu i z podfolderu — jeśli działa w obu przypadkach, zapis jest poprawny.<br>
<br>
<br>
<br>
Drugi typowy błąd to nadmiarowe „../". Jeśli plik docelowy leży wyżej, a ty schodzisz jeszcze wyżej, link wyjdzie poza katalog projektu i wskaże miejsce, którego na serwerze nie ma. Sprawdź to, licząc poziomy od pliku źródłowego, a nie od korzenia. Trzeci błąd to wielkość liter — na komputerze z Windows różnica między „Obrazy" a „obrazy" często nie przeszkadza, na serwerze linuksowym oznacza brak pliku.<br>
<br>
<br>
<br>
Kontener to pojemnik, a elementy to jego bezpośrednie dzieci. Wnuki nie biorą udziału w głównym układzie flex — chyba że same staną się kontenerami. To rozróżnienie ratuje przed wieloma godzinami debugowania. Gdy ustawiasz justify-content albo align-items, działasz wyłącznie na bezpośrednich dzieciach. Jeśli element znajduje się głębiej, jego pozycja zależy od rodzica, który go bezpośrednio obejmuje.<br>
<br>
<br>
<br>
Nagłówki kolumn i wierszy — nie tylko pogrubiona czcionka Do nagłówków służy , a nie z pogrubieniem. Różnica jest praktyczna: przeglądarki i czytniki ekranu rozpoznają, że komórka opisuje zawartość, a nie ją przechowuje. Nagłówek kolumny umieszczasz w pierwszym wierszu, a nagłówek wiersza — w pierwszej komórce każdego wiersza. Gdy tabela ma złożoną budowę, dodaj atrybut scope o wartości col albo row. To jedno słowo potrafi zdecydować, czy osoba korzystająca z czytnika ekranu zrozumie, do czego odnoszą się dane.<br>
<br>
<br>
<br>
Etykieta powiązana z polem formularza to jeden z tych szczegółów, które działają niezauważenie, dopóki ktoś nie kliknie w tekst obok pola i kursor nie pojawi się w niewłaściwym miejscu. Mechanizm jest prosty: atrybut for w znaczniku label wskazuje identyfikator pola (id). Gdy klikniesz w tekst etykiety, przeglądarka przenosi fokus do powiązanego elementu i ustawia w nim kursor. Bez tego powiązania kliknięcie w opis nic nie robi — a to irytuje, zwłaszcza przy polach wyboru i małych przyciskach.<br>
<br>
<br>
<br>
Ścieżka bezwzględna zaczyna się od korzenia systemu plików albo od litery dysku. W systemach uniksowych to ukośnik na początku, w Windows dodatkowo litera dysku i dwukrodek. Taka ścieżka jest jednoznaczna i zawsze wskazuje to samo miejsce, niezależnie od tego, skąd ją wywołasz. Ścieżka względna nie ma punktu początkowego — liczy się od katalogu, w którym znajduje się plik zawierający link. To właśnie dlatego ten sam zapis raz działa, a raz nie.