https://wiki.rettungsdienstblog.eu/api.php?action=feedcontributions&feedformat=atom&user=WilfordBergmann 2026-11-13T08:52:02Z Benutzerbeiträge MediaWiki 1.37.1 https://wiki.rettungsdienstblog.eu/index.php?title=5_r%C3%B3%C5%BCnic_mi%C4%99dzy_article_i_section,_kt%C3%B3re_zmieni%C4%85_Twoje_podej%C5%9Bcie&diff=497857 2026-10-19T18:16:00Z

<p>WilfordBergmann: </p> <hr /> <div>Osobny problem to style wbudowane w komponenty i biblioteki. Reguły generowane dynamicznie często trafiają na koniec arkusza, a ich nazwy bywają losowe. Nie próbuj ich nadpisywać w ciemno. Sprawdź w narzędziach deweloperskich, która deklaracja faktycznie jest stosowana, a która została przekreślona. Panel stylów pokazuje kolejność i pochodzenie reguł, więc jedno spojrzenie oszczędza godziny domysłów.&lt;br&gt;&lt;br&gt;Kolor tekstu i ramka to dwie właściwości, które w CSS zachowują się zupełnie inaczej, choć w arkuszu stylów wyglądają podobnie. Kolor jest dziedziczony domyślnie — każdy element potomny przejmuje go od rodzica, chyba że sam go nadpisze. Ramka nie jest dziedziczona — element potomny nie dostaje obramowania tylko dlatego, że ma je rodzic. Zrozumienie tej różnicy oszczędza godziny debugowania i tłumaczy, dlaczego czasem „nic się nie zmienia&quot;, a czasem „wszystko się rozjeżdża&quot;.&lt;br&gt;&lt;br&gt;Zasada działania jest prosta. Przeglądarka układa elementy w linii, dopóki suma ich szerokości mieści się w kontenerze. Gdy następny element miałby zostać ściśnięty poniżej swojej szerokości bazowej, zostaje przeniesiony do nowej linii. Wartość wrap-reverse odwraca kierunek układania kolejnych rzędów — nowe linie pojawiają się nad poprzednimi, co bywa mylące przy kolumnach z rosnącą osią główną.&lt;br&gt;&lt;br&gt;Gdzie to wstawić i czego nie dodawać Znacznik musi znaleźć się w head, najlepiej zaraz po deklaracji kodowania znaków. Kolejność ma znaczenie: jeśli wstawisz go po dużych blokach CSS albo na końcu body, przeglądarka może zdążyć wyrenderować stronę w złym trybie. Uważaj też na kopiowanie gotowych fragmentów z różnych źródeł — często zawierają one dodatkowe parametry, które psują efekt. Na przykład maximum-scale=1 lub user-scalable=no blokują użytkownikowi powiększanie. To pozornie wygodne, ale utrudnia korzystanie osobom słabowidzącym i bywa podstawą skarg dostępnościowych.&lt;br&gt;&lt;br&gt;Przy wrapie istotne stają się właściwości wyrównania. align-content steruje rozmieszczeniem całych rzędów w kontenerze, a align-items — wyrównaniem elementów w obrębie pojedynczej linii. Mylenie tych dwóch prowadzi do efektu, w którym po dodaniu wrapa elementy nagle przestają być wyśrodkowane. Trzeba też pamiętać, że gap działa między rzędami i kolumnami, więc odstępy nie znikają przy przenoszeniu. To wygodniejsze niż marginesy, które wymagają zerowania na skrajnych elementach.&lt;br&gt;&lt;br&gt;Kiedy wrap pomaga, a kiedy maskuje problem Flex-wrap sprawdza się w galeriach, listach tagów, paskach filtrów i formularzach, gdzie liczba elementów bywa zmienna, a ich szerokość zależy od treści. W takich miejscach sztywne ściskanie psuje czytelność. Z drugiej strony wrap nie jest lekarstwem na brak miejsca w ciasnych komponentach — jeśli elementy mają stałe wymiary i nie mogą się zawijać, lepiej przemyśleć siatkę lub użyć min-width zamiast liczyć na automatyczne przenoszenie.&lt;br&gt;&lt;br&gt;Sprawdź stronę na prawdziwym telefonie, nie tylko w zwężonym oknie przeglądarki na komputerze. W trybie responsywnym na desktopie łatwo przeoczyć zachowanie przy zmianie orientacji ekranu. Obróć urządzenie, powiększ palcami, przewiń w bok — jeśli pojawia się poziomy pasek przewijania, gdzieś została sztywna szerokość. Napraw tę szerokość, a dopiero potem wracaj do viewportu.&lt;br&gt;&lt;br&gt;W praktyce warto zacząć od display: flex; flex-wrap: wrap; gap: 1rem; i dopiero potem dodawać wymiary dzieciom. Jeśli układ ma się łamać w konkretnym punkcie, lepiej użyć flex-basis z wartością procentową lub jednostką względną niż sztywnej szerokości w pikselach. Dzięki temu elementy same decydują, kiedy przejść do nowego rzędu, a kontener pozostaje odporny na zmianę szerokości okna i dłuższe treści.&lt;br&gt;&lt;br&gt;Jak wymusić dziedziczenie ramki, gdy naprawdę jest potrzebne Jeśli chcesz, aby obramowanie pojawiło się również na dzieciach, masz trzy praktyczne drogi. Pierwsza: użyj selektora potomka, np. .karta &gt;* i nadaj tam border: 1px solid. Druga: zastosuj border: inherit na wybranych elementach potomnych — to jawnie wciąga wartość obliczoną rodzica. Trzecia: zamiast ramki użyj outline lub box-shadow z ostrym cieniem, ale pamiętaj, że outline nie wpływa na układ, a box-shadow bywa niewidoczny przy braku tła. Najczęstszy błąd to wpisanie border: inherit na wszystkich potomkach bez zastanowienia — wtedy ramka pojawia się także na elementach inline, np. w środku zdania, co psuje typografię.&lt;br&gt;&lt;br&gt;Drugą pułapką jest łączenie selektorów bez potrzeby. Zapis typu element.klasa inna-klasa podnosi specyficzność i utrudnia późniejsze nadpisanie, zwłaszcza gdy trzeba szybko poprawić jeden widok. Trzymaj selektory możliwie krótkie i płaskie. Jeśli musisz coś wymusić, użyj flagi ważności świadomie i skomentuj powód, bo inaczej za tydzień nikt nie będzie wiedział, dlaczego zwykła zmiana nie działa.</div>

WilfordBergmann https://wiki.rettungsdienstblog.eu/index.php?title=Benutzer:WilfordBergmann&diff=497856 2026-10-19T18:15:58Z

<p>WilfordBergmann: Die Seite wurde neu angelegt: „Pasjonat praktycznego designu od kilku lat. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję zmiany, które widać od pierwszego dnia.“</p> <hr /> <div>Pasjonat praktycznego designu od kilku lat. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję zmiany, które widać od pierwszego dnia.</div>

WilfordBergmann