https://jak.mazovia.edu.pl/api.php?action=feedcontributions&feedformat=atom&user=HGISelene2 Mazovia - Wkład użytkownika [pl] 2026-10-20T05:33:31Z Wkład użytkownika MediaWiki 1.42.1 https://jak.mazovia.edu.pl/index.php?title=Zanim_ustawisz_display:_flex,_sprawd%C5%BA,_czym_jest_o%C5%9B_g%C5%82%C3%B3wna&diff=1118683 Zanim ustawisz display: flex, sprawdź, czym jest oś główna 2026-10-19T09:49:11Z <p>HGISelene2: Utworzono nową stronę &quot;Druga pułapka to style inline i deklaracje z flagą ważności. Atrybut stylu w znaczniku ma wyższy priorytet niż zwykłe reguły z arkusza, więc żadne przestawianie linii go nie przebije. Flaga ważności działa jeszcze mocniej i potrafi zablokować całą kaskadę. Używaj jej oszczędnie, najlepiej wcale, bo później nie pamiętasz, która reguła faktycznie rządzi. Jeśli musisz nadpisać inline, zrób to świadomie i skomentuj w kodzie, żeby następna…&quot;</p> <hr /> <div>Druga pułapka to style inline i deklaracje z flagą ważności. Atrybut stylu w znaczniku ma wyższy priorytet niż zwykłe reguły z arkusza, więc żadne przestawianie linii go nie przebije. Flaga ważności działa jeszcze mocniej i potrafi zablokować całą kaskadę. Używaj jej oszczędnie, najlepiej wcale, bo później nie pamiętasz, która reguła faktycznie rządzi. Jeśli musisz nadpisać inline, zrób to świadomie i skomentuj w kodzie, żeby następna osoba nie straciła godziny na szukanie przyczyny.&lt;br&gt;&lt;br&gt;Trzecia pułapka to media queries i stany. Reguły w zapytaniach o media nie mają automatycznie większej wagi — liczy się ich pozycja względem reszty. Jeśli umieścisz je przed stylami bazowymi, te drugie mogą je nadpisać przy spełnionym warunku. Podobnie jest z pseudoklasami, na przykład stanem najechania kursorem. Kolejność ma znaczenie również wtedy, gdy warunek jest aktywny. Praktyczny nawyk: najpierw style ogólne, potem stany, a na końcu zapytania o media. Dzięki temu późniejsza linia rzeczywiście robi to, czego oczekujesz.&lt;br&gt;&lt;br&gt;Co się psuje, gdy brakuje tej linii Bez deklaracji viewport telefon przyjmuje domyślną szerokość układu, często około 980 pikseli, i skaluje całość tak, by zmieściła się na ekranie. Strona wygląda jak miniaturka: nagłówki są czytelne dopiero po zbliżeniu, a użytkownik musi przesuwać widok w dwóch kierunkach. Media queries oparte na szerokości ekranu nie zadziałają zgodnie z zamiarem, bo przeglądarka nadal widzi szeroki layout. Efekt jest szczególnie widoczny na formularzach — pola i przyciski stają się zbyt małe do wygodnego wypełniania.&lt;br&gt;&lt;br&gt;Gdy w arkuszu stylów podajesz font-family: &quot;Moja Czcionka&quot;, Arial, sans-serif, przeglądarka nie traktuje tej listy jako propozycji do wyboru. Czyta ją od lewej do prawej i używa pierwszego kroju, który jest dostępny w systemie użytkownika. Jeśli &quot;Moja Czcionka&quot; nie została pobrana przez @font-face ani nie jest zainstalowana lokalnie, następuje ciche przejście do kolejnego elementu stosu. Problem w tym, że wizualnie dzieje się to bez ostrzeżenia, a layout potrafi się rozjechać, bo inne kroje mają odmienne proporcje znaków.&lt;br&gt;&lt;br&gt;Testuj stos, wyłączając kolejne kroje w narzędziach deweloperskich. Sprawdź, czy po podmianie na zapasowy tekst nadal mieści się w kontenerze, czy nagłówki nie łamią się na trzy linie i czy przyciski nie tracą czytelności. Zwróć uwagę na wysokość x, grubość i szerokość znaków — krój zapasowy o węższym kroju potrafi rozsypać siatkę, a szerszy wywoła poziomy pasek przewijania. Ustaw też jawnie line-height i font-size, zamiast liczyć, że wszystko wyrówna się samo.&lt;br&gt;&lt;br&gt;Na koniec kilka zasad, które oszczędzają czas. Po pierwsze, testuj w przeglądarce z podświetlaniem flexa — narzędzia deweloperskie pokazują osie i rozmiary. Po drugie, nie ustawiaj szerokości na sztywno, jeśli używasz flex-grow; lepiej operować na proporcjach. Po trzecie, pamiętaj, że Flexbox działa tylko w obrębie jednego wymiaru — albo rząd, albo kolumna. Jeśli potrzebujesz układu dwuwymiarowego, sięgnij po Grid. I wreszcie: nie bój się eksperymentować na małym przykładzie, zanim wdrożysz flexa do całego layoutu. Zrozumienie osi głównej to połowa sukcesu.&lt;br&gt;&lt;br&gt;Kaskada to mechanizm, w którym przeglądarka rozstrzyga konflikt między regułami. Gdy dwie reguły pasują do tego samego elementu i mają taką samą wagę, wygrywa ta, która pojawia się później w źródle. To brzmi banalnie, dopóki nie zobaczysz, jak łatwo odwrócić tę kolejność przez przypadek. Wystarczy dopisać nowy styl na końcu arkusza, dołączyć plik z importem w złym miejscu albo użyć selektora o tej samej specyficzności w innym pliku — i nagle „popsuty&quot; układ okazuje się skutkiem kolejności, a nie złego kodu.&lt;br&gt;&lt;br&gt;Jak sobie radzić w praktyce? Ustal jedną kolejność i się jej trzymaj: reset, typografia, układ, komponenty, nadpisania. Grupuj reguły dla tego samego elementu w jednym miejscu, zamiast rozrzucać je po pliku. Gdy coś nie działa, sprawdź w narzędziach deweloperskich, która deklaracja została przekreślona i dlaczego. Zamiast dodawać kolejną linię na końcu, usuń źródło konfliktu. Kaskada nie jest wrogiem — jest narzędziem, które nagradza przewidywalność i porządek.&lt;br&gt;&lt;br&gt;Jak nie zgubić się w osiach i rozmiarach Praktyczna rada: zawsze najpierw ustal flex-direction, a dopiero potem dobieraj wyrównanie. Jeśli chcesz wyśrodkować element w poziomie i pionie, użyj justify-content: center i align-items: center przy domyślnym row. Gdy zmienisz na column, te same wartości dadzą odwrotny efekt — justify-content zadziała w pionie, a align-items w poziomie. Kolejna pułapka to flex-basis, flex-grow i flex-shrink. Domyślnie elementy mają flex: 0 1 auto, co oznacza, że nie rosną, mogą się kurczyć i mają rozmiar wynikający z zawartości. Jeśli chcesz, aby elementy równo się rozciągały, ustaw flex: 1. Pamiętaj jednak, że flex: 1 to skrót od flex-grow: 1, flex-shrink: 1 i flex-basis: 0%. To zero na końcu bywa zaskakujące: element z flex: 1 ignoruje swoją domyślną szerokość i dzieli przestrzeń po równo.</div> HGISelene2 https://jak.mazovia.edu.pl/index.php?title=U%C5%BCytkownik:HGISelene2&diff=1118681 Użytkownik:HGISelene2 2026-10-19T09:49:09Z <p>HGISelene2: Utworzono nową stronę &quot;Pasjonat 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.&quot;</p> <hr /> <div>Pasjonat 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> HGISelene2