Obraz przedstawia formatowanie CSS paragrafu. Aby otrzymać czerwony kolor poza obramowaniem, tak jak przedstawiono na obrazie, należy zdefiniować własność
A. background
B. outline
C. border
D. padding
Pytanie z egzaminu CKE, czerwiec 2023 (arkusz EE.09-SG-23.06).
Własność outline jest tu właściwa, bo w CSS rysuje dodatkowy kontur poza obramowaniem elementu. W modelu pudełkowym mamy kolejno: zawartość, padding, border i margin, a outline jest nakładany na zewnątrz borderu. Co ważne, outline nie zajmuje miejsca w układzie strony, czyli nie zmienia szerokości ani wysokości elementu i nie przesuwa sąsiednich elementów. Dlatego bardzo dobrze pasuje do sytuacji, gdy na obrazku czerwony kolor znajduje się poza obramowaniem paragrafu. Przykład praktyczny: p { border: 2px solid black; outline: 4px solid red; } da czarne obramowanie i czerwony kontur na zewnątrz. Można też użyć outline-offset, np. outline-offset: 3px, aby odsunąć kontur od ramki. Z mojego doświadczenia to jest często mylone z border, ale branżowo outline kojarzy się też z dostępnością, np. widocznym zaznaczeniem elementów po użyciu klawiatury. Dobra praktyka: nie usuwać bezmyślnie outline: none, bo użytkownicy klawiatury tracą wtedy informację, gdzie aktualnie jest fokus.
W tym zadaniu łatwo pomylić kilka właściwości CSS, bo wszystkie dotyczą wyglądu elementu, ale każda działa w innym miejscu modelu pudełkowego. Padding nie tworzy koloru poza obramowaniem. To wewnętrzny odstęp między treścią paragrafu a jego ramką, więc powiększa przestrzeń w środku elementu. Jeżeli ustawisz padding, tekst odsunie się od krawędzi, ale czerwony obszar nie pojawi się na zewnątrz borderu. Border też nie jest najlepszą odpowiedzią, bo oznacza samo obramowanie. Można oczywiście zrobić czerwony border, ale wtedy czerwony kolor będzie ramką, a nie kolorem poza już istniejącym obramowaniem. To jest ważna różnica, szczególnie gdy na obrazku widać osobno ramkę i dodatkowy zewnętrzny kontur. Background dotyczy tła elementu, najczęściej obszaru zawartości i paddingu, a w typowej sytuacji nie służy do narysowania linii poza borderem. Tło może zachowywać się różnie przy background-clip, ale nadal nie jest to standardowy sposób na zewnętrzny kontur. Właściwą właściwością jest outline, ponieważ rysuje linię na zewnątrz obramowania i nie wpływa na rozmiar pudełka w layoucie. Typowy błąd myślowy polega na tym, że patrzymy tylko na kolor, a nie na miejsce jego występowania. W CSS miejsce ma znaczenie: padding jest w środku, border jest na krawędzi, background jest tłem elementu, a outline siedzi na zewnątrz borderu.