https://wiki.rettungsdienstblog.eu/api.php?action=feedcontributions&feedformat=atom&user=MayP13477507 2026-11-11T04:43:34Z Benutzerbeiträge MediaWiki 1.37.1 https://wiki.rettungsdienstblog.eu/index.php?title=Gdy_kolor_idzie_w_dziedzictwo,_a_ramka_zostaje_na_g%C3%B3rze&diff=497863 2026-10-19T18:16:31Z

<p>MayP13477507: Die Seite wurde neu angelegt: „Flex-grow nie ustawia szerokości elementu. Określa tylko, jak podzielić wolną przestrzeń, która zostaje w kontenerze po odjęciu sumy bazowych rozmiarów wszystkich elementów potomnych. Jeśli w wierszu o szerokości 900 px masz trzy elementy z flex-basis: 200px, suma bazowa wynosi 600 px, a do podziału zostaje 300 px. Ta reszta trafia do elementów proporcjonalnie do wartości flex-grow.&lt;br&gt;&lt;br&gt;Jeśli chcesz mieć pewność, że otwierasz właśc…“</p> <hr /> <div>Flex-grow nie ustawia szerokości elementu. Określa tylko, jak podzielić wolną przestrzeń, która zostaje w kontenerze po odjęciu sumy bazowych rozmiarów wszystkich elementów potomnych. Jeśli w wierszu o szerokości 900 px masz trzy elementy z flex-basis: 200px, suma bazowa wynosi 600 px, a do podziału zostaje 300 px. Ta reszta trafia do elementów proporcjonalnie do wartości flex-grow.&lt;br&gt;&lt;br&gt;Jeśli chcesz mieć pewność, że otwierasz właściwy plik, przeciągnij go z folderu na okno przeglądarki albo skopiuj ścieżkę i wklej ją do paska adresu. Po każdej zmianie w kodzie zapisz plik i odśwież stronę skrótem klawiszowym. Gdy strona wygląda inaczej niż w internecie, sprawdź konsolę błędów przeglądarki — pokaże, których plików nie udało się wczytać. Pamiętaj też, że plik lokalny nie jest widoczny dla innych osób w sieci; to tylko kopia na twoim dysku.&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;Dwuklik w index.html to najszybszy sposób na podejrzenie statycznej strony bez instalowania czegokolwiek. Sprawdza się przy nauce HTML, CSS i prostym JavaScripcie, ale przestaje wystarczać, gdy projekt wymaga serwera, bazy danych albo zapytań do zewnętrznych usług. Warto znać granicę między jednym a drugim, żeby nie tracić czasu na szukanie błędów tam, gdzie problemem jest po prostu sposób otwarcia pliku.&lt;br&gt;&lt;br&gt;Zacznij od bazowego arkusza bez żadnych zapytań o media. Ustaw tam wszystko, co ma działać na najwęższym wspieranym ekranie: jedną kolumnę, pełną szerokość elementów, większe odstępy pionowe, mniejszą liczbę elementów obok siebie. Jeśli w bazie użyjesz na przykład siatki z trzema kolumnami, to na telefonie i tak musisz ją nadpisać, a to znaczy, że bazowy styl jest tymczasowy i mylący. Lepiej, gdy baza jest wersją ostateczną dla wąskiego ekranu, a nie wersją roboczą.&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;Selektor klasy wskazuje element przez wartość atrybutu class. Jedna klasa może wystąpić na wielu elementach, a jeden element może mieć kilka klas oddzielonych spacjami. To czyni klasę podstawowym narzędziem do stylowania komponentów wielokrotnego użytku: przycisków, kart, komunikatów. Identyfikator działa inaczej — w poprawnym dokumencie występuje tylko raz, więc nadaje się do wskazania unikalnego fragmentu, na przykład głównego kontenera strony czy konkretnego pola formularza, do którego prowadzi odnośnik wewnętrzny.&lt;br&gt;&lt;br&gt;Ostatnia rzecz: nie mieszaj flex-grow z justify-content: space-between w oczekiwaniu, że oba mechanizmy zadziałają razem. Gdy elementy rozciągną się na całą szerokość dzięki flex-grow, nie zostanie żadna wolna przestrzeń, którą justify-content mógłby rozdzielić. Wybierz jedno rozwiązanie: albo proporcjonalny podział przez flex-grow, albo równomierne odstępy przez justify-content.&lt;br&gt;&lt;br&gt;Uważaj też na flex-shrink. Domyślnie wynosi 1, więc gdy elementy nie mieszczą się w kontenerze, kurczą się proporcjonalnie, zanim flex-grow w ogóle zacznie działać. Jeśli chcesz, aby nadmiar był dzielony bez kurczenia, ustaw flex-shrink: 0 i pozwól, by elementy wychodziły poza kontener albo się zawijały. Pamiętaj, że flex-grow działa tylko wtedy, gdy w kontenerze jest wolne miejsce — przy przepełnieniu nie ma czego dzielić.&lt;br&gt;&lt;br&gt;Uważaj na różnicę między „odziedziczone&quot; a „przejęte wizualnie&quot;. Kolor tekstu dziedziczy się automatycznie, ale na przykład background-color już nie — dziecko nie dostanie tła rodzica. Ramka ma jeszcze jeden haczyk: jeśli ustawisz border: none na rodzicu, a na dziecku border: inherit, dziecko otrzyma wartość none, czyli brak ramki. Wartość inherit bierze to, co faktycznie obliczył rodzic, a nie to, co sobie wyobrażasz. Podobnie z border-radius — on również nie jest dziedziczony. Zaokrąglenie narożników rodzica nie zaokrągli automatycznie narożników dziecka, nawet jeśli dziecko jest wizualnie w środku.&lt;br&gt;&lt;br&gt;Najczęstszy błąd to nadpisywanie bazowych stylów w każdym zapytaniu. Jeśli bazowo ustawisz element jako blok, a potem w trzech media queries znowu robisz z niego blok, to kod puchnie i trudno znaleźć źródło problemu. Druga częsta wpadka to używanie max-width razem z min-width w jednym pliku. Mieszanie tych dwóch podejść kończy się chaosem, w którym nie wiadomo, która reguła wygrywa. Trzecia: sztywne wysokości i szerokości w pikselach w bazie. Na wąskim ekranie lepiej działa szerokość względna i minimalna wysokość oparta na zawartości.</div>

MayP13477507 https://wiki.rettungsdienstblog.eu/index.php?title=Benutzer:MayP13477507&diff=497861 2026-10-19T18:16:30Z

<p>MayP13477507: Die Seite wurde neu angelegt: „Pasjonat praktycznego designu na co dzień. 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 na co dzień. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję zmiany, które widać od pierwszego dnia.</div>

MayP13477507