https://wiki.rettungsdienstblog.eu/api.php?action=feedcontributions&feedformat=atom&user=AidenEaston68 2026-11-13T13:39:14Z Benutzerbeiträge MediaWiki 1.37.1 https://wiki.rettungsdienstblog.eu/index.php?title=Co_zrobi%C4%87,_gdy_inspektor_pokazuje_zmiany,_kt%C3%B3rych_nie_ma_w_pliku%3F&diff=497778 2026-10-19T18:07:23Z

<p>AidenEaston68: Die Seite wurde neu angelegt: „Projektowanie od telefonu w górę polega na tym, że najpierw piszesz style dla najwęższego ekranu, a dopiero później dodajesz reguły dla większych szerokości przez min-width. To odwrócenie naturalnego odruchu, bo większość osób zaczyna od szerokiego widoku na komputerze i potem walczy z jego upychaniem na małym ekranie. Kolejność ma znaczenie nie z powodu mody, ale dlatego, że łatwiej rozbudować prosty układ niż rozebrać przeładowa…“</p> <hr /> <div>Projektowanie od telefonu w górę polega na tym, że najpierw piszesz style dla najwęższego ekranu, a dopiero później dodajesz reguły dla większych szerokości przez min-width. To odwrócenie naturalnego odruchu, bo większość osób zaczyna od szerokiego widoku na komputerze i potem walczy z jego upychaniem na małym ekranie. Kolejność ma znaczenie nie z powodu mody, ale dlatego, że łatwiej rozbudować prosty układ niż rozebrać przeładowany.&lt;br&gt;&lt;br&gt;Punkty graniczne ustawiaj na podstawie treści, nie urządzeń Zapytania o media pisz wyłącznie z min-width, nigdy z max-width, jeśli trzymasz się podejścia od telefonu. Wartości nie bierz z nazw popularnych telefonów ani tabletów, bo te się zmieniają, a układ psuje się wtedy, gdy treść przestaje się mieścić. Ustaw punkt graniczny tam, gdzie naprawdę zaczyna brakować miejsca: gdy tekst łamie się w brzydkim miejscu, gdy przycisk przestaje być wygodny, gdy karta ma za mało miejsca na treść. Wtedy dodaj min-width i nową regułę, która poprawia tylko ten jeden element.&lt;br&gt;&lt;br&gt;Najprostszy test przed wdrożeniem: wyobraź sobie, że wycinasz dany fragment i wklejasz na inną stronę. Jeśli nadal jest zrozumiały, użyj article. Jeśli potrzebuje sąsiednich treści, wybierz section. Gdy nie spełnia żadnego z tych warunków, pozostań przy div. Ta jedna decyzja poprawia dostępność, porządkuje nagłówki i zmniejsza ryzyko, że wyszukiwarka błędnie zinterpretuje Twoją treść.&lt;br&gt;&lt;br&gt;flex-basis to najczęściej mylona właściwość. Przyjmuje wartości takie jak auto, 0, 200px, 30% lub max-content. Gdy ustawisz flex-basis: 0, element startuje z zerowej szerokości i dopiero flex-grow rozdziela mu miejsce. To zachowanie jest podstawą równych kolumn: flex: 1 1 0 sprawi, że każda kolumna dostanie dokładnie tyle samo, niezależnie od długości tekstu w środku. Jeśli zostawisz flex-basis: auto, element zaczyna od swojej naturalnej szerokości, więc kolumna z dłuższą treścią będzie szersza. To nie jest błąd — to często pożądane zachowanie, ale trzeba wiedzieć, co się wybiera.&lt;br&gt;&lt;br&gt;flex-grow działa jak licznik udziałów w wolnej przestrzeni. Jeśli dwa elementy mają flex-grow: 1 i flex-grow: 2, to drugi dostanie dwa razy więcej wolnego miejsca niż pierwszy. Ważne: dzielona jest tylko nadwyżka, a nie cała szerokość kontenera. Gdy elementy mają flex-basis: 100px każde, a kontener ma 400px, wolne 200px zostanie rozdzielone proporcjonalnie do wartości flex-grow. Wartość 0 oznacza, że element nie bierze udziału w podziale. Wartości ujemne są ignorowane, a liczby niecałkowite działają normalnie.&lt;br&gt;&lt;br&gt;Pamiętaj też o artykułach zagnieżdżonych. Komentarz pod wpisem może być osobnym article wewnątrz article nadrzędnego. To poprawne, ale wymaga ostrożności: każdy taki element powinien mieć nagłówek opisujący jego rolę. Bez tego powstaje struktura, w której nie wiadomo, gdzie kończy się wypowiedź autora, a zaczyna odpowiedź czytelnika.&lt;br&gt;&lt;br&gt;Kliknięcie w dowolny element na stronie podświetla odpowiadający mu węzeł w drzewie. W panelu stylów zobaczysz listę właściwości uporządkowaną według pierwszeństwa. Reguły przekreślone są nadpisane przez inne. Obok wielu z nich widnieje nazwa pliku i numer linii — to informacja, z którego arkusza pochodzi dana deklaracja. Jeśli zamiast tego widzisz określenie elementu lub informację o stylu wbudowanym, znaczy to, że reguła nie została wczytana z pliku i nie zapisze się sama. Zmiany wprowadzone w inspektorze są ulotne: znikną po odświeżeniu strony i nie wpłyną na to, co zobaczą inni.&lt;br&gt;&lt;br&gt;Trzymanie się tej kolejności daje kod, który jest krótszy i łatwiejszy do przewidzenia. Bazowy arkusz opisuje pełny, działający układ dla wąskiego ekranu, a media queries tylko go wzbogacają. Nie musisz pamiętać, co trzeba wyłączyć na telefonie, bo nic nie jest włączone na zapas. Dzięki temu mniej rzeczy się psuje przy zmianach, a poprawki dotyczą jednego punktu granicznego zamiast całego arkusza.&lt;br&gt;&lt;br&gt;Testuj bazę bez zapytań o media, zanim dodasz pierwszy min-width. Zmniejsz okno przeglądarki do najwęższego rozsądnego widoku i sprawdź, czy nic nie wychodzi poza ekran, czy tekst jest czytelny, czy elementy klikalne mają wygodny rozmiar. Dopiero potem powiększaj okno i obserwuj, w którym momencie układ przestaje wyglądać dobrze. W tym miejscu dodaj min-width i tylko tę jedną zmianę, która poprawia wygląd. Powtarzaj aż do najszerszego widoku.&lt;br&gt;&lt;br&gt;Zacznij od pytania, czy dana treść ma sens w oderwaniu od reszty strony. Wpis na blogu, komentarz użytkownika, recenzja produktu czy pojedynczy post na forum to article. Rozdział w artykule, sekcja z pytaniami i odpowiedziami albo blok z danymi kontaktowymi to section. Praktyczna zasada: article może mieć własny nagłówek, autora i datę, a section dziedziczy kontekst po rodzicu.&lt;br&gt;&lt;br&gt;Zawijanie włącza się przez flex-wrap: wrap. Bez tego elementy ściskają się w jednej linii, nawet jeśli stają się nieczytelne. Po włączeniu zawijania pojawia się wiele linii i wtedy align-content odpowiada za rozkład tych linii na osi poprzecznej. To kolejne miejsce, gdzie łatwo pomylić align-items z align-content. Pierwsze wyrównuje elementy w obrębie jednej linii, drugie rozkłada całe linie względem siebie.</div>

AidenEaston68 https://wiki.rettungsdienstblog.eu/index.php?title=Benutzer:AidenEaston68&diff=497777 2026-10-19T18:07:21Z

<p>AidenEaston68: Die Seite wurde neu angelegt: „Entuzjasta praktycznego designu na co dzień. Piszę o tym, jak wycisnąć maksimum z małego metrażu. Najbardziej lubię zmiany, które widać od pierwszego dnia.“</p> <hr /> <div>Entuzjasta praktycznego designu na co dzień. Piszę o tym, jak wycisnąć maksimum z małego metrażu. Najbardziej lubię zmiany, które widać od pierwszego dnia.</div>

AidenEaston68