Pamiętaj też o grubości i stylu. Gdy font-family wskaże krój, który nie ma odmiany pogrubionej, przeglądarka sztucznie pogrubi znaki, co wygląda źle i pogarsza czytelność. Warto wybierać kroje z pełną rodziną wag albo świadomie rezygnować z pogrubień w miejscach, gdzie zastępczy krój może ich nie mieć. To samo dotyczy kursywy — niektóre systemy ją symulują, zamiast używać prawdziwego wariantu.
Najczęstsze błędy to walka z objawem zamiast przyczyną: dopisywanie marginesów, zmiana szerokości, kombinowanie z pozycjonowaniem. Żadne z tych działań nie usunie spacji, bo ona nadal tam jest. Drugi typowy problem to metoda z font-size: 0 zastosowana zbyt szeroko — potomkowie tracą czytelny rozmiar i trzeba go przywracać punktowo. Trzeci błąd to ujemny margines wpisany „na oko”, który przy innym kroju pisma rozjeżdża układ. Zanim zaczniesz poprawiać, ustal, czy elementy muszą być inline-block. Jeśli układają się w rząd lub siatkę, flex albo grid rozwiążą problem u źródła i oszczędzą ci późniejszych poprawek.
Jak usunąć przerwę bez psucia czytelności kodu Najprostsze rozwiązanie to sklejenie znaczników w jednej linii. Działa, ale kod staje się trudny do czytania, gdy elementów jest więcej. Lepszym sposobem jest komentarz HTML wstawiony między znaczniki — przeglądarka go zignoruje, a przerwa zniknie, bo komentarz nie tworzy węzła tekstowego. Można też ustawić rodzicowi font-size na zero, a dzieciom przywrócić normalny rozmiar czcionki. Ta metoda bywa wygodna, ale wymaga pilnowania, żeby żaden potomek nie odziedziczył zera i nie zniknął z ekranu.
Artykuł samodzielny i sekcja to dwa różne sposoby dzielenia treści na mniejsze jednostki. Artykuł (article) jest zamkniętą całością — ma własny temat, własny sens i może istnieć bez reszty dokumentu. Sekcja (section) to fragment większej całości, który bez kontekstu nadrzędnego traci znaczenie. W praktyce rozróżnienie sprowadza się do jednego pytania: czy dany blok treści ma sens, gdy wytniesz go z reszty strony i wkleisz gdzie indziej? Jeśli tak — to artykuł. Jeśli nie — to sekcja.
Zupełnie inaczej podchodzi się do problemu, gdy elementy mają układ oparty na flexboxie lub gridzie. W tych modelach białe znaki między elementami nie generują odstępu, bo elementy nie są już układane jak znaki w wierszu tekstu. To najczystsze rozwiązanie, jeśli nie musisz wspierać bardzo starych przeglądarek. Wystarczy ustawić na kontenerze display: flex i zadbać o gap albo marginesy, a odstępy staną się w pełni kontrolowane.
Gdy kilka elementów ustawionych jako inline-block stoi obok siebie w jednej linii, między nimi pojawia się niewielki odstęp, którego nikt świadomie nie ustawił. To nie margines, nie padding i nie font-size. To efekt tego, jak przeglądarka czyta kod HTML — każdy znak białej spacji między znacznikami traktuje jak zwykłą spację w tekście, a spacja ma swoją szerokość. Dwa elementy rozdzielone enterem albo tabulatorem zachowują się więc jak dwa słowa w zdaniu: coś je rozsuwa.
Specyficzność wygrywa z kolejnością Kolejność rozstrzyga dopiero przy równych szansach. Selektor o wyższej specyficzności wygra nawet wtedy, gdy stoi wyżej w pliku. Klasy i atrybuty biją selektory elementów, identyfikatory biją klasy, a styl w atrybucie elementu bije wszystko poza deklaracją z flagą ważności. Praktyczny wniosek jest taki: zanim przesuniesz regułę, sprawdź, czy nie wystarczy zawęzić selektora. Przesuwanie kodu w nieskończoność to walka z objawem, nie z przyczyną.
Kolejna opcja to ujemny margines dopasowany do szerokości spacji. To rozwiązanie kruche — wartość zależy od użytego fontu i rozmiaru tekstu, więc przy zmianie kroju pisma odstęp wróci albo elementy zaczną się nachodzić. Jeśli zależy ci na trwałym efekcie, rozważ rezygnację z inline-block na rzecz flexboxa. Kontener z display: flex układa dzieci w rzędzie bez żadnych przerw, a odstępy ustawiasz świadomie przez gap. To obecnie najczystsze podejście i nie wymaga żadnych sztuczek z białymi znakami.
Warto najpierw sprawdzić, czy to naprawdę wina białych znaków. Otwórz narzędzia deweloperskie, zaznacz element i obejrzyj jego pole. Jeśli odstęp nie ma koloru marginesu ani paddingu, a mimo to istnieje, sprawa jest jasna. Pomaga też szybki test: ustaw oba elementy dokładnie obok siebie w kodzie, bez żadnego znaku między znacznikami, i odśwież podgląd. Gdy przerwa zniknie, masz potwierdzenie.
Kontrast tekstu i tła da się zmierzyć. Wartość tę opisuje iloraz jasności względnej (luminancji) jaśniejszego i ciemniejszego elementu. Wynik zapisuje się jako stosunek, na przykład 4,5:1 albo 21:1. Maksimum to 21:1, czyli czerń na bieli; minimum to 1:1, gdy kolor tekstu i tła są identyczne i nic nie widać. Bez tego pomiaru projektowanie czytelnego tekstu sprowadza się do zgadywania, a wzrok bywa zawodny — szczególnie na ekranach o różnej jasności i kalibracji.
If you beloved this article as well as you wish to get more details about czytaj kindly pay a visit to our internet site.