Procentowy flex-basis liczysz względem złego kontenera

Osobna sprawa to pola, które wizualnie wyglądają jak jedno, ale technicznie są osobne — na przykład trzy selecty na datę. Jeśli nie da się ich połączyć w fieldset, warto chociaż zachować kolejność zgodną z naturalnym czytaniem i opisać każdy element osobno. Unikaj też pustych labeli i placeholderów zamiast etykiet. Placeholder znika po wpisaniu tekstu i nie jest czytany przez część czytników ekranu, więc nie zastąpi prawdziwej etykiety.

, który potrafi zepsuć układ kilku kolejnych sekcji. Gdy szkielet jest poprawny, reszta pracy staje się przewidywalna. Przeglądarka nie musi zgadywać, style liczą się zgodnie z modelem pudełkowym, a walidator nie zgłasza ostrzeżeń. Wystarczy trzymać się jednej zasady: doctype, potem head z metadanymi, na końcu body z treścią — i żadnych elementów poza tym układem.

Kontrast tekstu i tła to nie kwestia gustu, lecz mierzalna wartość. Współczynnik kontrastu opisuje stosunek jasności względnej dwóch kolorów i mieści się w przedziale od 1:1 do 21:1. Wartość 1:1 oznacza brak różnicy, czyli tekst całkowicie zlewa się z tłem. Maksimum 21:1 to czerń na bieli — najwyższa możliwa czytelność. Ten jeden parametr decyduje o tym, czy odbiorca przeczyta komunikat bez wysiłku, czy zrezygnuje po kilku sekundach.

Pierwszy plik HTML wygląda niewinnie: kilka znaczników, trochę tekstu. Problem w tym, że przeglądarka nie zgaduje intencji autora. Jeśli na samym początku zabraknie deklaracji typu dokumentu, wchodzi w tryb quirks, czyli stary tryb zgodności. Wtedy pudełka liczone są inaczej, wysokości linii potrafią się rozjechać, a część nowych elementów działa nieprzewidywalnie. Naprawa jest banalna: pierwszy wiersz pliku to , zapisany wielkimi literami i bez żadnych znaków przed nim. Nawet spacja lub komentarz przed doctype wyłączają standardowy tryb renderowania. Po deklaracji przychodzi z atrybutem języka, np. . To nie kosmetyka — od tego zależy wymowa syntezatora mowy, dzielenie wyrazów i podpowiedzi wyszukiwarek. Wewnątrz znajdują się dwie sekcje: oraz . Kolejność jest stała. Zamiana ich miejscami to błąd, który przeglądarka próbuje naprawić po swojemu, przenosząc elementy i psując strukturę. Co naprawdę należy do sekcji head to metadane, których użytkownik nie widzi na stronie, ale które widzi maszyna. Obowiązkowy jest — bez niego polskie znaki zamieniają się w krzaki. Dalej , żeby strona nie była pomniejszona na telefonie. Tytuł w trafia na kartę przeglądarki i do wyników wyszukiwania; powinien być krótki i opisywać konkretną podstronę, a nie cały serwis. Dopiero potem dodaje się style, skrypty i inne zasoby. Najczęstszy błąd w tej sekcji to wrzucanie widocznej treści do . Nagłówki, akapity i obrazy muszą być w . Przeglądarka i tak przeniesie je do ciała dokumentu, ale zrobi to po swojemu, często przed właściwą treścią. Drugi typowy problem to kilka deklaracji kodowania albo powtarzający się — wystarczy jeden z każdego. zawiera wszystko, co widoczne: nagłówki, akapity, listy, obrazy, formularze. Tu również obowiązuje porządek. Jeden
na stronę opisuje główny temat, kolejne poziomy budują hierarchię. Znaczniki zamyka się w kolejności odwrotnej do otwierania, kolory ścian do salonu a elementy blokowe nie siedzą w środku tekstowych. Warto od razu wciąć kod w edytorze — ułatwia to wychwycenie brakującego
czy



Ustawienie flex-basis: 30% wydaje się proste, dopóki szerokość elementu nie zacznie zależeć od czegoś innego, niż się zakładało. Procent w tej właściwości nie odnosi się do viewportu ani do całego dokumentu — liczy się względem szerokości kontenera flex. Jeśli rodzic ma width: 100%, to zwykle działa intuicyjnie. Gdy jednak rodzic jest elementem inline, ma position: absolute bez określonej szerokości albo jest elementem zastępowanym, wartość procentowa staje się nierozwiązywalna i przeglądarka traktuje ją jak urządzić małą kuchnię auto. Wtedy element rośnie do rozmiaru treści, a układ przestaje przypominać siatkę, którą próbujesz zbudować.

Gdzie najczęściej pojawia się problem Typowe błędy dotyczą trzech miejsc. Pierwsze to szary tekst na białym tle — pozornie elegancki, w praktyce często spada poniżej progu czytelności. Drugie to jasne napisy na zdjęciach, które w jednym miejscu są czytelne, a w innym znikają, bo tło ma zmienną jasność. Trzecie to kolorowe przyciski z białym napisem: wystarczy nieco jaśniejszy odcień, by napis przestał być widoczny. Do tego dochodzi przezroczystość — półprzezroczyste panele zmieniają efektywny kolor If you loved this post and you would like to obtain additional details regarding Lebenskunst.berlin kindly go to our own web page. tła i potrafią zepsuć nawet poprawnie dobraną parę.

Obliczenie kontrastu wymaga znajomości jasności względnej obu kolorów, a nie ich „jasności na oko". Wzór opiera się na luminancji, w której składowa zielona ma największy wpływ na wynik, a niebieska najmniejszy. Dlatego żółty na białym wypada słabo, mimo że wydaje się jasny i wyraźny, a granatowy na kremowym — bardzo dobrze, choć to zestawienie spokojne i mało krzykliwe. Praktyczny wniosek: nie oceniaj kolorów wzrokiem, bo oko łatwo się myli, zwłaszcza przy zmęczeniu i na różnych ekranach.