Co się stanie, gdy dwie reguły CSS się kłócą i która wygrywa

Flex-basis to tylko punkt wyjścia. Ostateczny rozmiar zależy od flex-grow i flex-shrink. Jeśli ustawisz flex: 1 1 50%, element zacznie od 50% szerokości rodzica, ale może się rozciągnąć lub skurczyć w zależności od dostępnego miejsca. Przy flex-grow: 1 i braku innych elementów zajmie całą wolną przestrzeń. Częstym błędem jest zakładanie, że procentowa wartość flex-basis jest sztywna – nie jest, chyba że ustawisz flex-grow: 0 i flex-shrink: 0.

Inne podejście to rezygnacja z inline-block na rzecz flexboxa. Wystarczy na kontenerze ustawić display: flex, a przerwy znikną same. To rozwiązanie jest odporne na białe znaki i nie wymaga hacków. Jeśli jednak musisz zostać przy inline-block, możesz też zastosować ujemny margines, ale to metoda krucha — wartość zależy od czcionki i może wymagać korekty przy każdej zmianie stylu.

Powstaje więc pytanie, jak sensownie opisać grupę pól, skoro pojedynczy label nie wystarczy. Rozwiązanie jest jedno i dobrze znane: zestaw pól opakowuje się w element fieldset, a opis całej grupy umieszcza się w legend. Wtedy każdy input dostaje własny, krótki label — na przykład „Dzień", „Miesiąc", „Rok" — a legend opisuje całość, na przykład „Data urodzenia". Czytnik ekranu odczyta najpierw nazwę grupy, potem nazwę konkretnego pola, dzięki czemu użytkownik nie zgubi się w formularzu.

Na co uważać? Po pierwsze, nie myl odstępu od białych znaków z domyślnym marginesem elementów. Po drugie, przy font-size: 0 pamiętaj o dzieciach — ich rozmiar czcionki musisz przywrócić, inaczej tekst zniknie. Po trzecie, nie ustawiaj szerokości 33,33% bez uwzględnienia przerwy, bo nawet najmniejsza spacja zepsuje układ. Najbezpieczniej jest albo usunąć białe znaki, albo przejść na flexbox.
Inny częsty problem pojawia się przy obrazkach wstawionych do tekstu. Obrazek jako element inline ma linię bazową na dolnej krawędzi i pod nim zostaje miejsce na ogonek litery. Rozwiązanie jest jedno: display: block lub vertical-align: middle. Pierwsze wyłącza obrazek z układu tekstowego, drugie centruje go względem wysokości wiersza. Wybór zależy od tego, czy obrazek ma być częścią zdania, czy osobnym elementem.

Uwaga na typowe pułapki. Selektor uniwersalny `*` ma zerową specyficzność, podobnie jak kombinatory `>`, `+` i `~`. Pseudoklasa `:where()` również nic nie wnosi, a `:is()` i `:not()` przyjmują wartość najwyższego argumentu ze swojej listy. Łatwo też przeoczyć, że `!important` odwraca kolejność: ważna deklaracja autora wygrywa ze zwykłą, ale przegrywa z ważną deklaracją użytkownika, a obie ustępują ważnym stylom przeglądarki. Jeśli dwie deklaracje mają identyczną specyficzność i wagę, wygrywa ta zapisana później — również wtedy, gdy pochodzi z dołączonego pliku umieszczonego niżej.

Progi, które faktycznie mają sens Nie ma jednego słusznego zestawu progów. Zamiast kopiować gotowe wartości, ustawiaj punkty graniczne tam, gdzie twój układ zaczyna wyglądać źle — gdy tekst się rozjeżdża, kolumny stają się zbyt wąskie albo nawigacja przestaje się mieścić. Typowy start to około 600 px dla tabletu w pionie i 1024 px dla szerszego widoku, ale traktuj je jako punkt wyjścia, nie dogmat. Testuj w przeglądarce, przeciągając krawędź okna i obserwując, w którym momencie pojawia się problem.

Jak liczyć specyficzność selektora Specyficzność to cztery liczby zapisywane jako (a, b, c, d). Pierwsza dotyczy stylów inline, druga identyfikatorów, trzecia klas, atrybutów i pseudoklas, czwarta elementów i pseudoelementów. Selektor `#menu .item a` ma wartość (0, 1, 1, 1), a `nav ul li a` tylko (0, 0, 0, 4). Porównujesz je od lewej do prawej — sama jedna jedynka w drugiej kolumnie przebija dowolną liczbę zer w kolejnych. To dlatego jeden identyfikator potrafi rozbić cały porządek w arkuszu.

Gdy ustawiasz kilka elementów obok siebie jako display: inline-block, w przeglądarce pojawia się między nimi niewielka przerwa. To nie margines ani padding — to efekt działania białych znaków przechowywanie w małym mieszkaniu kodzie HTML. Przeglądarka traktuje znak nowej linii, spację czy tabulator remont łazienki krok po kroku między znacznikami tak samo jak urządzić małą kuchnię pojedynczą spację w tekście. In the event you loved this article and you want to receive more information about Metamorfoza Mieszkania generously visit the web site. Ta spacja ma szerokość równą szerokości odstępu w użytej czcionce, dlatego przy mniejszym rozmiarze pisma przerwa jest mniejsza, a przy większym — większa.
Zacznij od tego, że nie każda reguła ma takie samo znaczenie. Style z arkusza autora wygrywają z domyślnymi stylami przeglądarki, ale przegrywają z deklaracjami oznaczonymi jako ważne. W praktyce najczęstszy konflikt rozgrywa się jednak między dwiema zwykłymi regułami autora, bo to one trafiają do projektów najczęściej. Wtedy decyduje specyficzność.

Zrozumienie tej hierarchii oszczędza godziny. Gdy wiesz, że liczy się pochodzenie, potem waga, potem specyficzność, a na końcu kolejność, przestajesz dodawać losowe `!important` i zaczynasz pisać style, które da się przewidzieć bez uruchamiania przeglądarki.