Kliknięcie w opis, które nie ustawia kursora — błąd, o którym większość zapomina
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.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Inspektor świetnie nadaje się do diagnozy: sprawdzenia, dlaczego element wychodzi poza kontener, jaki kolor faktycznie jest stosowany czy która reguła wygrywa w kaskadzie. Traktuj go jako brudnopis, a nie edytor. Efekt przeniesiony do pliku dopiero wtedy staje się trwały i widoczny dla wszystkich.<br>
<br>
<br>
<br>
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ę.<br>
<br>
<br>
<br>
Najczęstszy objaw jest taki: w kodzie masz kilka akapitów, listę albo sekcje, a po włączeniu flexa wszystkie sklejają się w jednej linii. Dzieje się tak, bo domyślna wartość flex-direction to row, a elementy flex domyślnie nie przechodzą do nowej linii — flex-wrap ma wartość nowrap. Blokowość nie znika całkowicie, ale zostaje nadpisana przez reguły flexboxa. W praktyce element nadal może mieć display: block, lecz jako dziecko flexa i tak uczestniczy w układzie osi głównej.<br>
<br>
<br>
<br>
Najczęstszy błąd to walka z liczbami bez zrozumienia, która wartość wygrywa. Zamiast zmniejszać marginesy na oślep, ustal jeden rytm pionowy strony i trzymaj się go konsekwentnie. Gdy wiesz, że przerwa między blokami wynosi zawsze tyle samo, przestajesz dodawać odstępy „na wszelki wypadek". Drugi typowy błąd to dodawanie pustych elementów odstępujących. Taki element sam wprowadza kolejne zapadanie i zwykle nic nie wnosi. Trzeci: stosowanie marginesów na elementach liniowych, które układają się w wiersz — tam odstępy liczą się inaczej.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Co zrobić, żeby nowa linia znów działała Jeśli chcesz zachować kontener flex i jednocześnie rozdzielić elementy w pionie, ustaw flex-direction: column. Wtedy oś główna biegnie pionowo i kolejne elementy układają się jeden pod drugim. Drugie rozwiązanie to flex-wrap: wrap w połączeniu z ograniczeniem szerokości elementów — wtedy po przekroczeniu dostępnego miejsca część z nich przejdzie do kolejnego wiersza. Trzecia możliwość to zdjęcie flexa z rodzica i użycie zwykłego bloku albo gridu, jeśli układ poziomy nie jest potrzebny.<br>
<br>
<br>
<br>
Raster to mapa pikseli. Zdjęcie z aparatu, zrzut ekranu, skan dokumentu — wszystko to raster. Jego rozdzielczość jest z góry ustalona i nie da się jej zwiększyć bez utraty informacji. Powiększając taki plik, program stosuje interpolację: uśrednia sąsiednie piksele i tworzy nowe. Efekt widoczny jest od razu — krawędzie się rozmywają, drobne detale znikają, a litery przestają być czytelne. Typowy błąd to skalowanie rastra w edytorze i liczenie, że filtr wyostrzający uratuje sytuację. Nie uratuje, bo dane, których nie ma w pliku, nie pojawią się znikąd.