TerraDuniaWiki - Benutzerbeiträge [de]

Flex-wrap włączony za późno psuje cały układ strony

2026-10-19T11:30:30Z

MarshaDadson72: Die Seite wurde neu angelegt: „Jak liczyć kropki i ukośniki Ścieżka względna opisuje drogę od katalogu bieżącego. Kropka pojedyncza oznacza katalog bieżący, dwie kropki to katalog nadrzędny. Jeśli plik podstrona/index.html ma wskazać na obrazy/logo.png leżące o poziom wyżej, zapis wygląda tak: ../obrazy/logo.png. Gdy plik docelowy leży w tym samym katalogu, wystarczy sama nazwa. Każde zejście w dół to nazwa folderu i ukośnik, każde wyjście w górę to ../. Poli…“

Jak liczyć kropki i ukośniki Ścieżka względna opisuje drogę od katalogu bieżącego. Kropka pojedyncza oznacza katalog bieżący, dwie kropki to katalog nadrzędny. Jeśli plik podstrona/index.html ma wskazać na obrazy/logo.png leżące o poziom wyżej, zapis wygląda tak: ../obrazy/logo.png. Gdy plik docelowy leży w tym samym katalogu, wystarczy sama nazwa. Każde zejście w dół to nazwa folderu i ukośnik, każde wyjście w górę to ../. Policz poziomy na kartce albo w drzewie katalogów, zanim wpiszesz cokolwiek do kodu. Kolejność reguł i podejście mobile first Reguły [https://rhymeallnight.com/members/lukaszdabrowski17/activity/730522/ przechowywanie w małym mieszkaniu] CSS działają kaskadowo. Jeśli najpierw napiszesz styl dla szerokiego ekranu, a potem dla wąskiego, ten drugi nadpisze pierwszy tylko wtedy, gdy warunek będzie spełniony. W praktyce wygodniej zacząć od układu dla wąskiego ekranu, a potem dodawać min-width dla coraz szerszych widoków. To podejście mobile first. Dzięki niemu telefon dostaje najprostszy, bazowy styl, a dodatkowe elementy pojawiają się dopiero, gdy jest na nie miejsce. Warto trzymać breakpointy w jednym miejscu i nie mieszać jednostek — raz piksele, raz em — bo przy zmianie rozmiaru czcionki reguły zaczną się rozjeżdżać. Do sterowania odstępami używaj gap, a nie marginów, bo gap działa między elementami i między liniami. Uwaga na min-width. Jeśli element ma min-width większy niż dostępna szerokość, nie skurczy się i wyjdzie poza kontener. To typowy błąd przy kartach z obrazkiem lub długim słowem, którego przeglądarka nie łamie. Rozwiązaniem jest min-width: 0 na elemencie potomnym oraz overflow-wrap: anywhere na tekście. Flex-shrink i sztywna szerokość rozwiązują dwa różne problemy, choć na pierwszy rzut oka oba dotyczą rozmiaru elementu. Flex-shrink to właściwość elastyczna: mówi przeglądarce, jak bardzo dany element może się zmniejszyć, gdy w kontenerze flex zabraknie miejsca. Sztywna szerokość, np. width: 300px, ustala rozmiar bazowy i zwykle kończy się konfliktem z rozciągliwym rodzeństwem. W praktyce wybór zależy od tego, czy chcesz, aby element reagował na brak miejsca, czy ma go ignorować. Na koniec: nie mieszaj flex-wrap: wrap z gridem bez potrzeby i nie licz na to, że wrap naprawi układ bez elastycznych szerokości. Najpierw ustal, co ma się zawijać, potem dobierz basis i minimalne szerokości, a na końcu sprawdź zachowanie przy najdłuższym możliwym tekście. Wtedy elementy przejdą do nowego rzędu dokładnie tam, gdzie tego oczekujesz. Jak wymusić zawijanie bez psucia proporcji Najpierw ustaw kontener: display: flex oraz flex-wrap: wrap. Następnie zadbaj o szerokość elementów. Jeśli elementy mają width: 100%, żaden nie zmieści się obok drugiego i każdy wyląduje w osobnej linii. Lepiej użyć flex: 1 1 240px, co daje elastyczną podstawę i pozwala elementom rosnąć lub maleć w ramach rzędu. Wartość basis decyduje o punkcie, w którym element przechodzi do nowej linii. Im większa, tym szybciej zawija. Typowe pomyłki wynikają z mieszania separatorów. W systemach uniksowych działa ukośnik /, w [https://search.yahoo.com/search?p=systemie%20Windows systemie Windows] historycznie używano odwrotnego \. W kodzie stron i arkuszy stylów używaj wyłącznie ukośnika zwykłego — odwrotny bywa interpretowany jako znak ucieczki i psuje całą ścieżkę. Uważaj też na wielkość liter: serwery produkcyjne często działają na systemach wrażliwych na wielkość, więc Logo.png i logo.png to dwa różne pliki. Lokalnie na Windows może działać, a po wdrożeniu link przestanie trafiać. Na koniec: flex-shrink działa tylko w kontenerze flex. W zwykłym przepływie blokowym nie ma znaczenia. Jeśli więc debugujesz układ i flex-shrink nie przynosi efektu, sprawdź, czy rodzic ma display: flex. Sztywna szerokość natomiast działa wszędzie, ale w flexie bywa nadpisywana przez flex-basis. Świadome rozdzielenie tych dwóch mechanizmów pozwala uniknąć zarówno niekontrolowanego kurczenia, jak i niepotrzebnego przewijania. Jak to sprawdzić bez zgadywania Najprościej przypisz elementom tymczasowo tło i obramowanie, a w narzędziach deweloperskich włącz podgląd układu flex. Zobaczysz wtedy trzy liczby: bazę, wynik po rozdzieleniu wolnego miejsca i rzeczywistą szerokość. Jeś[http://Www.Automingwei.com/home.php?mod=space&uid=575065 li baza] jest inna, niż zakładasz, problem prawie zawsze siedzi w flex-basis auto albo w braku jawnej wartości. Warto też pamiętać, że flex-basis ma pierwszeństwo przed width. Ustawienie width: 200px i flex-basis: auto sprawi, że i tak liczy się width, ale flex-basis: 100px nadpisze tę wartość. Ścieżka bezwzględna zaczyna się od korzenia systemu plików albo od korzenia witryny. W kontekście strony bezwzględna ścieżka to zapis od ukośnika początkowego, np. /assets/style.css. Działa niezależnie od tego, w jak głębokim podkatalogu znajduje się dokument, który ją wywołuje. Minus jest jeden: jeśli przeniesiesz cały projekt na subdomenę lub do katalogu o innej nazwie, taki link przestanie trafiać we właściwe miejsce. Przy pracy lokalnej ścieżka bezwzględna z literą dysku lub pełnym adresem sieciowym jest jeszcze bardziej krucha.

Gdy element nie mieści się w linii, sprawdź jego display

2026-10-19T11:11:54Z

MarshaDadson72: Die Seite wurde neu angelegt: „Kiedy raster jeszcze daje radę Raster bywa jedynym sensownym wyborem, gdy liczy się wierne odwzorowanie faktury: zdjęcia, skany, malarstwo cyfrowe z miękkimi przejściami tonalnymi. Warunek jest jeden — plik musi mieć wystarczającą rozdzielczość od początku. Przy druku licz gęstość w punktach na cal i pomnóż przez docelowy wymiar. Obraz na plakat 60 na 90 centymetrów przy 300 punktach na cal wymaga około 7000 na 10600 pikseli. Jeśli ma…“

Kiedy raster jeszcze daje radę Raster bywa jedynym sensownym wyborem, gdy liczy się wierne odwzorowanie faktury: zdjęcia, skany, malarstwo cyfrowe z miękkimi przejściami tonalnymi. Warunek jest jeden — plik musi mieć wystarczającą rozdzielczość od początku. Przy druku licz gęstość w punktach na cal i pomnóż przez docelowy wymiar. Obraz na plakat 60 na 90 centymetrów przy 300 punktach na cal wymaga około 7000 na 10600 pikseli. Jeśli masz połowę tego, nie ratuj tego rozciąganiem w edytorze. Typowy błąd polega na powiększaniu w programie graficznym z włączoną interpolacją i uznaniu, że problem zniknął. Powiększenie wygląda lepiej na ekranie, ale w druku nadal brakuje danych. Drugi częsty błąd to skalowanie w dół i z powrotem w górę — każda taka operacja trwale usuwa szczegóły. Trzeci: zapis do formatu stratnego po każdym powiększeniu, co dokłada kolejne artefakty. Przy rasterze pracuj na kopii, nigdy na pliku źródłowym, i sprawdzaj efekt w docelowym rozmiarze, a nie w widoku dopasowanym do okna. Przy kompresji stratnej warto stosować maskowanie krawędzi: w programach graficznych istnieje opcja „wyostrz krawędzie" lub „zachowaj szczegóły", ale to tylko półśrodek. Lepiej zapobiec problemowi, niż go naprawiać. Jeśli już masz plik z artefaktami, nie licz na idealne odzyskanie jakości. Możesz spróbować delikatnego wygładzenia (np. filtr medianowy) albo rozmycia Gaussa o małym promieniu, ale to zawsze pogorszy ostrość. Jedynym pewnym rozwiązaniem jest ponowny eksport z oryginału z lepszymi ustawieniami. Praktyczna zasada jest prosta. Jeśli obiekt da się opisać kształtem, użyj wektora. Jeśli istotna jest fotograficzna faktura, użyj rastra o rozdzielczości policzonej pod docelowy format. Wektoryzacja automatyczna ze zdjęcia rzadko daje dobry wynik — powstaje plik z tysiącami przypadkowych kształtów, który wygląda gorzej niż oryginał. Lepiej narysować uproszczoną wersję ręcznie albo ograniczyć się do dużego rastra. Zanim cokolwiek powiększysz, sprawdź, czym jest plik i jakie ma wymiary, bo od tego zależy cały efekt końcowy. Powielanie obrazu do wielkiego formatu najczęściej kończy się rozczarowaniem, bo ludzie nie rozróżniają dwóch zupełnie różnych sposobów zapisu grafiki. Obraz rastrowy to siatka pikseli o ustalonej liczbie kolumn i wierszy. Obraz wektorowy to zbiór punktów, linii i krzywych opisanych matematycznie, przeliczanych na piksele dopiero w chwili wyświetlania lub druku. Ta różnica decyduje o tym, co się stanie, gdy powiększysz plik dziesięciokrotnie. Raster przy skalowaniu w górę nie zyskuje żadnych nowych detali. Program rozciąga istniejące piksele i dopisuje brakujące na podstawie sąsiadów. Efekt widać natychmiast: krawędzie miękną, drobne litery się rozmywają, a cienkie linie znikają albo zamieniają się w poszarpane schodki. Jeśli plik ma 1000 pikseli szerokości, a potrzebujesz 8000, algorytm nie odtworzy szczegółu, którego nigdy w pliku nie było. Możesz co najwyżej wygładzić to, co zostało. Display: inline-block łączy cechy obu. Element płynie w linii obok innych, ale przyjmuje width, height oraz pełne margin i padding. Świetnie sprawdza się przy przyciskach, kartach czy kafelkach, które mają stać obok siebie i mieć określone wymiary. Uwaga na wspomniane białe znaki — jeśli w kodzie masz enter między elementami inline-block, zobaczysz kilkupikselową przerwę. Rozwiązania: usuń spacje w HTML, ustaw font-size: 0 na rodzicu i przywróć go na dzieciach albo użyj komentarza między znacznikami. Wektor zachowuje się odwrotnie. Powiększenie do dowolnego rozmiaru nie zmienia jakości, bo krzywe są przeliczane od nowa dla każdej rozdzielczości. Logo, ikony, wykresy, schematy, typografia i wszelkie płaskie ilustracje powinny powstawać jako wektor. Uważaj jednak na dwie pułapki. Pierwsza: umieszczenie rastrowego zdjęcia w pliku wektorowym nie czyni go wektorowym — ten fragment nadal się rozmyje. Druga: zbyt skomplikowane ścieżki z tysiącami punktów bywają trudne do edycji i mogą spowalniać druk. Upraszczaj kształty, zanim wyślesz plik dalej. Jeżeli element inline-block nie chce się ustawić w rzędzie mimo wystarczającej szerokości, sprawdź sumę szerokości, paddingów, obramowań i marginesów. Często przekracza ona szerokość rodzica o kilka pikseli i ostatni element spada do nowej linii. Warto wtedy przełączyć kontener na flex — to prostsze i pozbawione problemu białych znaków. Flex nie zmienia jednak displayu samych dzieci; one nadal mogą być inline-block lub block, ale ich pozycjonowanie przejmuje rodzic. Zagnieżdżanie list w HTML to codzienność: menu, drzewa kategorii, spisy treści. Problem pojawia się wtedy, gdy chcemy nadać listie zewnętrznej inne właściwości niż wewnętrznej, a przeglądarka uparcie stosuje te same. Dzieje się tak, bo większość właściwości list — od koloru tekstu, przez krój pisma, po rozmiar — dziedziczy się z rodzica na dziecko. Jeśli więc ustawisz kolor na elemencie nadrzędnym, wewnętrzna lista go odziedziczy, nawet jeśli jej nie dotykałeś. To nie błąd, to podstawowe zachowanie kaskady. Kluczowe jest rozróżnienie: część właściwości (np. kolor, font-family, line-height) dziedziczy się domyślnie, a część (np. margin, padding, border) nie. Wiedza o tym, które z nich przechodzą na dzieci, oszczędza godziny debugowania.

Benutzer:MarshaDadson72

2026-10-19T11:11:52Z

MarshaDadson72: Die Seite wurde neu angelegt: „Entuzjasta praktycznego designu z wieloletnią praktyką. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.“

Entuzjasta praktycznego designu z wieloletnią praktyką. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.