4 pułapki przy flex-basis w procentach względem rodzica

Kiedy w arkuszu stylów wpisujesz font-family z kilkoma nazwami, przeglądarka nie wybiera pierwszej z listy. Bierze pierwszą, która jest faktycznie dostępna na urządzeniu użytkownika. Problem w tym, że nie widzisz, którą wybrała — chyba że sprawdzisz to świadomie. Sam wygląd tekstu to za mało, bo podobne kroje potrafią wyglądać niemal identycznie, a różnice w metrykach psują układ dopiero po dłuższej chwili.

Co się dzieje z elementem absolute i na co uważać Element z position: absolute zostaje wyjęty z normalnego przepływu dokumentu. Przestaje zajmować miejsce, więc sąsiednie elementy mogą się pod niego wsunąć. Rodzic traci informację o jego wysokości, co często objawia się zapadniętym kontenerem i nachodzącymi na siebie sekcjami. Rozwiązaniem bywa nadanie rodzicowi minimalnej wysokości albo pozostawienie w przepływie innego potomka, który tę wysokość utrzyma.

Flex-basis w procentach liczy się zawsze względem głównego rozmiaru kontenera rodzica. Jeśli rodzic ma flex-direction: row, procent odnosi się do szerokości. Przy flex-direction: column — do wysokości. To pierwsze miejsce, w którym ludzie się mylą, bo patrzą na oś, w której elementy są ułożone, a nie na to, co faktycznie jest bazą procentu. W praktyce: flex: 0 0 50% na dziecku kontenera z flex-direction: row da mu połowę szerokości rodzica, nawet jeśli sam element ma narzuconą inną szerokość — flex-basis wygrywa, dopóki width nie jest ustawione z wyższym priorytetem.

Drugi częsty problem to z-index. Element absolutny tworzy nowy kontekst układania tylko wtedy, gdy ma z-index inny niż auto albo position: fixed lub sticky. Dwa elementy absolutne z różnych kontenerów mogą się nakładać w nieprzewidywalny sposób, jeśli ich przodkowie mają własne konteksty układania. Najprościej trzymać absolutne elementy w jednym, przewidywalnym drzewie i nie mnożyć kontekstów bez potrzeby.

Typowe błędy widać gołym okiem. Powtarzanie tego samego identyfikatora na kilku elementach — przeglądarka to zniesie, ale dokument przestaje być poprawny, a skrypt trafi tylko na pierwszy element. Stosowanie identyfikatora tam, gdzie wystarczyłaby klasa, i odwrotnie: nadawanie klas elementom, które występują raz i nigdy się nie powtórzą. Kolejny częsty problem to nazwy klas opisujące wygląd, na przykład „czerwony-tekst", zamiast roli, na przykład „ostrzeżenie". Gdy zmienisz kolorystykę, pierwsza nazwa stanie się kłamstwem.

Ostatnia rzecz, o której łatwo zapomnieć: testuj na docelowych systemach, nie tylko na własnym. To, co u Ciebie wygląda dobrze, na innym urządzeniu może zostać zastąpione. Jeśli zależy Ci na powtarzalności, dołącz plik czcionki zamiast liczyć na to, że użytkownik ma ją zainstalowaną. Wtedy stos przestaje być loterią, a zaczyna być decyzją.

Najczęstszy błąd to stosowanie border-box tylko do wybranych elementów. Jeśli ustawisz go na kontenerze, ale nie na jego dzieciach, nadal możesz mieć niespodzianki. Najlepiej od razu ustawić globalnie: *, *::before, *::after box-sizing: border-box; . To prosty zabieg, który eliminuje większość problemów z wymiarami. Uwaga na stare skrypty lub style zewnętrzne, które mogą nadpisywać tę właściwość – sprawdź, czy nie ma konfliktów.

Najprostsza metoda to panel deweloperski. Otwórz go, kliknij prawym przyciskiem na element i wybierz zbadanie. W zakładce z stylami znajdź sekcję typografii. Przeglądarka pokazuje tam nie tylko zadeklarowany stos, ale też faktycznie użyty krój — zwykle z adnotacją, że pochodzi z listy lub z systemowego zastępnika. W nowszych wersjach wystarczy najechać kursorem na nazwę, żeby zobaczyć podgląd. To najpewniejszy sposób, bo opiera się na wewnętrznym mechanizmie silnika, a nie na domysłach.

Uważaj też na czcionki zależne od wagi i stylu. Jeśli w stosie jest krój o wadze 400, a element wymaga 600, przeglądarka może podstawić zupełnie inny, jeśli ten pierwszy nie ma takiego wariantu. W panelu deweloperskim zobaczysz wtedy ostrzeżenie o syntetycznym pogrubieniu. Podobnie bywa z kursywą. Sam wybór z listy to jeszcze nie koniec — liczy się, czy dany krój ma realnie potrzebny wariant.

Sprawdzanie przez JavaScript i pułapka fałszywych wyników Możesz też posłużyć się skryptem. Technika polega na tym, że mierzysz szerokość znaku w danej czcionce i porównujesz ją z szerokością trzech czcionek zapasowych — jeśli wynik jest identyczny, krój najpewniej nie istnieje i system podstawił domyślny. To działa, ale ma słabość: bywają kroje o zbliżonych metrykach, które dają ten sam pomiar i test zwraca fałszywy negatyw. Dlatego nigdy nie opieraj się wyłącznie na jednym znaku ani na jednym rozmiarze.

Typowy błąd to wpisanie nazwy czcionki bez cudzysłowów, gdy składa się z kilku słów. Wtedy przeglądarka potraktuje każdy wyraz jako osobny kandydat. Drugi częsty problem: stos kończy się na nazwie, której nie ma na żadnej platformie, i cały tekst ląduje w domyślnym kroju szeryfowym lub bezszeryfowym. Zawsze zostawiaj na końcu ogólną rodzinę, taką jak serif, sans-serif albo monospace.