Linia bazowa czy górna krawędź — co wyrównuje inline-block

Otwarcie pliku przez dwuklik ma też ograniczenia, których nie obejdziesz. Przeglądarka traktuje taką stronę jako plik lokalny, więc niektóre funkcje JavaScriptu, na przykład pobieranie danych z sieci czy odczyt plików, mogą być zablokowane przez politykę bezpieczeństwa. Formularze i odwołania do ścieżek serwerowych nie zadziałają. Jeśli potrzebujesz tych możliwości, uruchom lokalny serwer na komputerze i otwieraj stronę pod adresem lokalnym zamiast przez dwuklik.

Przyjęte progi są trzy. Dla zwykłego tekstu minimum to 4,5 do 1, a dla dużego — powyżej osiemnastu punktów lub czternastu pogrubionych — wystarczy 3 do 1. Najwyższy poziom, 7 do 1, dotyczy tekstu, który musi być czytelny w trudnych warunkach: na słońcu, na małym ekranie, przy słabym wzroku. Warto traktować te liczby jako punkt wyjścia, nie jako cel sam w sobie.

Kolejna pułapka to mylenie flex-shrink z flex-basis. Wartość flex-basis określa punkt startowy przed podziałem miejsca, a flex-shrink decyduje, co się dzieje, gdy tego miejsca brakuje. Jeśli pominiesz flex-basis, przeglądarka użyje width jako podstawy, a gdy i jego nie ma — auto, czyli szerokości wynikającej z treści. Dlatego element z długim tekstem i domyślnym flex-shrink: 1 może się skurczyć tak mocno, że tekst zacznie się łamać w niekontrolowany sposób. Wtedy warto dodać min-width: 0, bo elementy flex mają domyślne ograniczenie minimalnej szerokości oparte na treści.

Podstawą jest luminancja względna. Dla każdego kanału koloru (czerwony, zielony, niebieski) przelicza się wartość na skalę od zera do jednego, a potem waży je współczynnikami odpowiadającymi wrażliwości oka. Zielony waży najwięcej, niebieski najmniej. Z tych trzech liczb powstaje jedna wartość opisująca jasność koloru. Kontrast to iloraz jaśniejszej i ciemniejszej luminancji, powiększony o stałą. Wynik podaje się jako proporcję, na przykład 4,5 do 1. Im wyższa, tym lepiej.

Kolejna pułapka to procenty przy flex-wrap: wrap. Wtedy baza liczona jest od szerokości linii, a nie całego kontenera, i po zawinięciu elementów wartości potrafią się przeliczyć inaczej, niż zakładałeś. Przy dwóch kolumnach na wąskim ekranie lepiej użyć flex-basis: calc(50% - 1rem) i odstępu przez gap niż polegać na samych procentach. Pamiętaj też, że padding i border domyślnie powiększają element, dlatego box-sizing: border-box powinien być ustawiony globalnie.

Jak to wygląda w praktyce i gdzie ludzie się potykają Najczęstszy błąd polega na łączeniu width ze sztywną wartością i flex-shrink: 0. Taki zestaw jest podwójnie odporny na kurczenie i prawie zawsze prowadzi do przepełnienia kontenera. Drugi typowy problem to ustawienie flex-shrink: 0 na wielu elementach jednocześnie. Jeśli wszystkie dzieci mają zakaz kurczenia, żadne nie ustąpi i całość wyjdzie poza rodzica. Kurczenie ma sens tylko wtedy, gdy choć jeden element może oddać przestrzeń.

Gdy plik obrazka nie wczyta się — z powodu awarii serwera, przeniesienia zasobu albo połączenia bez dostępu do internetu — przeglądarka pokazuje w jego miejscu to, co znajdzie w atrybucie alt. Bez alt użytkownik zobaczy pusty prostokąt albo ikonę zepsutego obrazka. Czytnik ekranu w takiej sytuacji odczyta jedynie nazwę pliku, np. „zdjecie_0012.jpg", co nic nie wnosi. Dobrze napisany alt rozwiązuje oba problemy naraz: zastępuje treść wizualną, gdy obrazu nie ma, i przekazuje ją osobom korzystającym z syntezatora mowy.

Kłopot pojawia się, gdy w jednym wierszu mieszają się elementy o różnych wysokościach i różnych typach zawartości. Obrazek bez tekstu ma linię bazową na swojej dolnej krawędzi, a element z tekstem — na linii, na której stoją litery. Dlatego dwa identyczne z wyglądu prostokąty mogą stać na różnych poziomach. Rozwiązaniem jest albo ujednolicenie vertical-align dla wszystkich, albo dodanie do elementu z tekstem pustego miejsca, które przesunie jego linię bazową. Częstym błędem jest też ustawianie wysokości i marginesów bez sprawdzenia, czy nie zmieniają one położenia linii bazowej — marginesy w pionie na inline-blockach działają inaczej niż na blokach i potrafią rozjechać cały wiersz.

Warto najpierw ustalić, co w danym układzie jest punktem odniesienia. Linia bazowa to umowne miejsce, na którym „siedzą" litery bez wydłużeń, czyli bez ogonków takich jak „g" czy „y". Gdy do takiej linii dopasujesz inline-block, jego dolna krawędź trafi dokładnie na tę linię. Z kolei wartości top, middle, bottom pozwalają przesunąć element względem całego wiersza, a nie tylko względem samego tekstu. Najczęstszy błąd polega na mieszaniu tych dwóch porządków: ktoś ustawia vertical-align: top i dziwi się, remont mieszkania że element nadal nie styka się z górną krawędzią sąsiada, bo ten sąsiad jest wyrównany do linii bazowej.

Jak sprawdzić kontrast bez specjalistycznego oprogramowania Wystarczy znać wartości kolorów w zapisie szesnastkowym i skorzystać z prostego wzoru albo gotowego kalkulatora dostępnego w narzędziach dla projektujących interfejsy. Wpisuje się kolor tekstu i kolor tła, a wynik pojawia się natychmiast. Warto sprawdzić nie tylko główny tekst, ale też podpisy, etykiety przycisków, komunikaty o błędach i zastrzeżenia drobnym drukiem. To właśnie tam kontrast najczęściej zawodzi.

If you loved this post and you would such as to receive more details regarding przechowywanie w małym mieszkaniu kindly check out our own web site.