Czytelny tekst czy ładny design? Liczba, która rozstrzyga

Warto też pamiętać, że zmiana modelu wyświetlania nie zmienia znaczenia elementu. Możesz zrobić z linku element blokowy, ale nadal pozostanie linkiem, z całą swoją dostępnością i zachowaniem. Możesz też z akapitu zrobić element liniowy, choć zwykle nie ma po temu powodu. Zanim zaczniesz naprawiać układ, sprawdź, z jakim typem elementu pracujesz i czy próbujesz wymusić na nim coś, czego jego model nie przewiduje. Świadomość tej różnicy oszczędza godziny walki z odstępami, które i tak nie chciałyby się zachować tak, jak zakładałeś.

Kontrast nie jest kwestią gustu. To liczba, którą można sprawdzić przed wdrożeniem i poprawić w kilka minut. Wystarczy przeliczyć kilka zestawów, pilnować stanów i nie ufać jednemu ekranowi.

Trzeci błąd dotyczy stanów. Przycisk w spoczynku może mieć kontrast 6:1, ale po najechaniu kursorem zmienia kolor i spada do 3:1. Tekst wpisany w pole formularza, podpowiedź wyszarzona po kliknięciu, link już odwiedzony — każdy z tych wariantów trzeba sprawdzić oddzielnie. Projektanci często pilnują widoku głównego, a zapominają o interakcjach.

Jak policzyć kontrast bez wzorów Ręczne liczenie jest żmudne, bo jasność względna nie jest zwykłą jasnością koloru. Składają się na nią trzy składowe: remont łazienki krok po kroku czerwona, zielona i niebieska, każda podniesiona do potęgi około 2,4 i inaczej ważona. Na szczęście nie trzeba tego robić samemu. Wystarczy wziąć próbkę koloru tekstu i koloru tła, a potem sprawdzić je w dowolnym narzędziu do kontroli kontrastu. Wpisuje się dwa kody kolorów, na przykład w zapisie szesnastkowym, i od razu widać wynik.

Jak wyrównać do górnej krawędzi i kiedy to zawodzi Ustawienie vertical-align: top sprawia, że wierzchołek pudełka elementu pokrywa się z wierzchołkiem najwyższego elementu w linii. To najczęściej stosowane rozwiązanie, gdy chcesz mieć równy górny rant niezależnie od wysokości sąsiadów. Uwaga na marginesy: top odnosi się do krawędzi marginesu, nie do krawędzi obramowania. Jeśli element ma margin-top, zostanie on uwzględniony i górna krawędź optycznie opadnie. Podobnie działa bottom, które wyrównuje do najniższego elementu w linii, a nie do dołu kontenera.

Drugi częsty błąd to testowanie tylko dużej czcionki. Duży tekst wypada lepiej, więc łatwo uznać, że wszystko jest w porządku. Tymczasem ten sam kolor użyty w akapicie, w podpisie albo w etykiecie pola formularza może już nie spełniać minimum. Osobno sprawdzaj tekst zwykły i tekst duży, bo mają inne progi.

Drugi typowy błąd to używanie atrybutu aria-label lub aria-labelledby na kontenerze zamiast poprawnego fieldset i legend. To działa, ale wyłącznie wtedy, gdy kontener ma odpowiednią rolę, na przykład group. Sam zwykły div z aria-label nie zostanie odczytany jako grupa. Jeśli już sięga się po ARIA, trzeba nadać kontenerowi rolę group i zadbać, by każdy element miał własną, unikalną etykietę. Mieszanie starego fieldset z nowym ARIA bez potrzeby zwykle kończy się podwójnym odczytem nazwy przez czytnik ekranu.

Na koniec: nie mieszaj flex-basis w procentach z min-width i max-width bez świadomości, że te właściwości mają wyższy priorytet. Jeśli ustawisz flex-basis: 50% i min-width: 300px, element nie skurczy się poniżej 300px, nawet jeśli 50% daje mniej. To przydatne przy responsywności, ale może prowadzić do nieoczekiwanego przewijania poziomego. Testuj układ przy różnych szerokościach okna i sprawdzaj w narzędziach deweloperskich, jak przeglądarka faktycznie oblicza flex-basis.

Kiedy procenty się sprawdzają, a kiedy szkodzą Procenty działają przewidywalnie, gdy kontener ma ustaloną szerokość i nie zmienia jej w trakcie układania. Wtedy flex-basis: 50% daje dwa elementy po połowie, o ile nie mają marginesów ani obramowań wliczanych do szerokości. Problem pojawia się przy kontenerach z szerokością zależną od zawartości — na przykład gdy rodzic jest elementem flex lub grid bez zdefiniowanej bazy. Wówczas procent może zostać zignorowany albo policzony względem rozmiaru, który sam dopiero się ustala. Efekt bywa taki, że elementy nachodzą na siebie lub rozjeżdżają się przy zmianie rozmiaru okna.

Kontrast tekstu i tła da się zmierzyć. Nie chodzi o wrażenie estetyczne ani o to, czy projektantowi podoba się dany odcień. Istnieje wzór matematyczny, który przelicza jasność dwóch kolorów na jedną liczbę. Ta liczba mówi, czy tekst da się przeczytać bez wysiłku, czy tylko się wydaje, że da się przeczytać.

Dlaczego link nie łamie linii i kiedy to się mści Element liniowy nie tworzy nowej linii i nie przyjmuje pionowych marginesów ani wysokości w sposób, jakiego oczekuje większość osób. Link, wyróżnienie czy fragment kodu wstawiają się między słowa i dopasowują do linii tekstu. Problem pojawia się, gdy ktoś próbuje zrobić z linku przycisk: ustawia wysokość, padding pionowy i marginesy, a potem dziwi się, że nic nie działa albo że element nachodzi na sąsiednie linie. Padding pionowy na elemencie liniowym bywa widoczny, ale nie wpływa na wysokość linii, więc wizualnie potrafi nachodzić na sąsiadów. Jeśli potrzebny jest przycisk, trzeba zmienić sposób wyświetlania na blokowy lub liniowo-blokowy.

In the event you adored this short article as well as you would like to obtain more information relating to odwiedź stronę generously go to our web page.