Projektowanie stron i frontend (HTML5 i CSS3)

Dlaczego: Domyślny content-box odnosi zadeklarowaną szerokość wyłącznie do obszaru treści, więc dopełnienie i obramowanie doklejane są na zewnątrz: 300 + 2 razy 20 + 2 razy 5 = 350. Wynik 370 kusi, bo dolicza marginesy, a te nigdy nie wchodzą w szerokość pudełka — powiększają jedynie miejsce zajmowane w układzie.

Dlaczego: Przy border-box deklarowana szerokość obejmuje treść, dopełnienie i obramowanie razem, więc pudełko nie rośnie — kurczy się treść: 300 minus 2 razy 25 minus 2 razy 5 daje 240. Odpowiedź 360 to wynik liczony odruchowo jak w modelu content-box, a 300 opisuje całe pudełko, a nie jego wnętrze.

Dlaczego: Punkty sumuje się ze składników selektora: cztery elementy dają 4, klasa z elementem 11, trzy elementy z klasą 13, a identyfikator z elementem aż 101. Jeden identyfikator przebija dowolną liczbę klas i elementów, dlatego ocenianie specyficzności po długości zapisu prowadzi do wskazania najdłuższego selektora zamiast najsilniejszego.

Dlaczego: Dopisek !important przebija całą kaskadę, łącznie ze stylem inline, który normalnie ma najwyższy priorytet wyceniany na 1000 punktów — i to on kusi jako odpowiedź. Gdyby !important usunąć, wygrałby styl inline, a spośród dwóch identycznych reguł p wybrana zostałaby ta zapisana później, bo przy równej specyficzności rozstrzyga kolejność w arkuszu.

Dlaczego: Test na article brzmi: czy da się tę treść opublikować samodzielnie. Section to tematycznie spójny fragment większej całości, zwykle z własnym nagłówkiem, aside oznacza treść poboczną, czyli znaczenie, a nie położenie przy prawej krawędzi, natomiast div nie niesie żadnego znaczenia i służy wyłącznie do grupowania oraz stylowania.

Dlaczego: Jednostka em liczy się od rozmiaru pisma rodzica, czyli 1,5 razy 20 daje 30 px, a rem zawsze od elementu html, czyli 1,5 razy 16 daje 24 px. Zamiana obu wartości miejscami to typowa pomyłka; dodatkowo przy zagnieżdżaniu em mnoży się poziom po poziomie, przez co tekst niepostrzeżenie rośnie, a rem takiego efektu kuli śnieżnej nie ma.

Dlaczego: O wysłaniu decyduje wyłącznie atrybut name i to on staje się kluczem tablicy odbieranej przez skrypt. Identyfikator id służy do powiązania etykiety, bo atrybut for wskazuje właśnie id, oraz do stylów i skryptów — stąd złudzenie, że wystarczy. Objaw jest klasyczny: przeglądarka nie zgłasza błędu, a skrypt nie dostaje żadnych danych.

Dlaczego: Przesyłanie plików wymaga kodowania multipart/form-data razem z metodą POST, ponieważ GET dokleja dane do adresu i ma ograniczoną długość, więc zawartości pliku nie przeniesie. Atrybut novalidate jedynie wyłącza wbudowaną walidację przeglądarki, a target decyduje o oknie z odpowiedzią — żaden z nich nie wpływa na sposób wysyłki.

Dlaczego: Tylko fixed pozycjonuje względem okna przeglądarki i nie przewija się razem ze stroną. Relative przesuwa element względem jego pierwotnego miejsca, zostawiając po nim pustą lukę, absolute odnosi się do najbliższego przodka o pozycjonowaniu innym niż static i wędruje z dokumentem, przy static wartości top oraz z-index są ignorowane, a sticky przykleiłby się dopiero po osiągnięciu progu.

Dlaczego: Justify-content zawsze steruje osią główną, a align-items osią poprzeczną. Po ustawieniu wartości column oś główna biegnie pionowo, więc role się zamieniają i to justify-content odpowiada za pion — odruchowe wskazanie align-items działa tylko dla domyślnego kierunku row. Właściwość vertical-align dotyczy elementów liniowych i komórek tabeli, nie kontenera flex.