Kiedy inspektor oszukuje, a kiedy naprawdę pomaga Warto wiedzieć, że zmiany w inspektorze są ulotne. Znikają po odświeżeniu strony i nie zapisują się w pliku. To nie wada, a zabezpieczenie: edytujesz kopię wyświetlaną w pamięci przeglądarki. Jeśli chcesz zachować efekt, przepisz zmiany ręcznie do arkusza w edytorze kodu. Nie ma tu przycisku zapisu i dobrze, bo przypadkowa zmiana nie zepsuje działającej witryny.
Kiedy ustawiasz w kontenerze flex element z długim tekstem, obrazkiem lub przyciskiem, często okazuje się, że mimo wartości flex-shrink większej od zera element nadal nie chce się zmniejszyć. Wygląda to jak błąd, ale nim nie jest. Wartość flex-shrink mówi jedynie, jak bardzo element ma się kurczyć względem innych, a nie poniżej pewnego progu. Ten próg to minimalna szerokość treści, czyli min-content.
W praktyce działa to tak: przeglądarka najpierw ustala, ile miejsca wymaga najdłuższe nieprzerwane słowo, obrazek lub inny element, którego nie da się złamać. To właśnie min-content. Dopóki nie zezwolisz na łamanie treści, element nie zmniejszy się poniżej tej granicy, nawet jeśli flex-shrink wynosi 2 czy 3. Dlatego długie słowo bez spacji potrafi rozepchnąć cały układ i zablokować kurczenie sąsiadów.
Na koniec: dwuklik jest wygodny do szybkiego podglądu, ale nie nadaje się do testowania formularzy, plików cookie ani zapytań sieciowych. Do takich prób uruchom lokalny serwer, a plik index.html traktuj jako punkt wejścia. Warto też trzymać kopię działającej wersji przed każdą zmianą przypisania rozszerzeń — cofnięcie błędnego ustawienia bywa szybsze niż szukanie przyczyny w kodzie.
Inspektor elementu to narzędzie wbudowane w przeglądarkę, które pokazuje strukturę dokumentu i wszystkie reguły CSS działające na wybranym fragmencie strony. Otwiera się go skrótem klawiszowym — najczęściej klawiszem funkcyjnym lub kombinacją z klawiszem modyfikującym — albo z menu kontekstowego po kliknięciu prawym przyciskiem myszy i wybraniu opcji badania elementu. Po otwarciu panelu zaznaczenie elementu w drzewie HTML od razu podświetla go na stronie, a obok widać listę stylów z podziałem na reguły odziedziczone, nadpisane i aktywne.
Em liczy się od rodzica, rem od korzenia Em odnosi się do rozmiaru czcionki elementu nadrzędnego. To wygodne przy przyciskach i odstępach wewnątrz komponentu, bo padding i margin w em rosną razem z tekstem przycisku. Uwaga na pułapkę zagnieżdżania: jeśli rodzic ma font-size: 1.2em, a dziecko też 1.2em, rozmiar dziecka liczy się od rozmiaru rodzica, nie od bazy. Trzy poziomy zagnieżdżenia i tekst puchnie niekontrolowanie. To klasyczny błąd przy listach zagnieżdżonych i akordeonach.
Zmiana wartości w panelu stylów działa natychmiast: klikasz w liczbę przy właściwości, wpisujesz nową i widzisz efekt bez przeładowania strony. Tak samo dodajesz nowe właściwości — wystarczy wpisać nazwę i wartość w wolnym wierszu. Możesz też wyłączyć konkretną regułę, odznaczając ją po lewej stronie. To najszybszy sposób sprawdzenia, czy problem leży w kolorze, marginesie czy nadpisanej regule z innego arkusza.
Przydatny trik: w panelu stylów wpisz właściwość z wartością tymczasową, żeby sprawdzić układ, a potem skopiuj gotowy fragment do schowka i wklej go do pliku. Uważaj na jednostki — przeglądarka przyjmie wpis bez jednostki, ale w arkuszu może zostać zinterpretowany inaczej. Nie zmieniaj też jednocześnie wielu właściwości, bo nie będziesz wiedzieć, która dała efekt. Jedna zmiana, jeden test.
Rozmiar czcionki można zapisać na trzy sposoby i każdy z nich zachowuje się inaczej, gdy użytkownik powiększy tekst w przeglądarce albo zmieni domyślne ustawienia systemu. Pixel (px) to wartość bezwzględna, oderwana od preferencji czytelnika. Em i rem to jednostki relatywne, ale odnoszą się do różnych punktów odniesienia. Zanim wybierzesz jedną z nich, ustal, co ma się skalować razem z czym.
Najczęstszy błąd to walka ze stylem, który jest nadpisany przez regułę o wyższej specyficzności albo przez ważność. Inspektor przekreśla takie właściwości, więc zamiast poprawiać niewłaściwy wiersz, sprawdź, która reguła faktycznie działa. Druga pułapka to edycja w widoku zgodności z urządzeniem mobilnym — zmiany wprowadzone przy wąskim viewporcie mogą nie odpowiadać temu, co widzisz na szerokim ekranie, bo inne media queries wchodzą w grę.
Rem odnosi się zawsze do rozmiaru czcionki elementu głównego, czyli do tego, co ustawisz na selektorze html. Dzięki temu 2rem znaczy dokładnie to samo w każdym miejscu dokumentu, niezależnie od zagnieżdżenia. To czyni rem przewidywalnym do typografii, nagłówków i odstępów między sekcjami. Praktyczna zasada: ustaw bazę na html font-size: 100% , a konkretne rozmiary opisuj w rem. Wtedy zmiana jednej wartości przeskalowuje cały interfejs.
In case you adored this post along with you wish to acquire guidance concerning przeczytaj więcej generously visit the internet site.