W języku CSS wartości: underline, overline, line-through oraz blink dotyczą właściwości
A. font-decoration
B. text-align
C. font-style
D. text-decoration
Pytanie z egzaminu CKE, styczeń 2020 (arkusz E.14-SG-20.01).
Wartości underline, overline, line-through oraz historycznie blink są związane z właściwością text-decoration. Ta właściwość w CSS służy do dekorowania tekstu liniami: underline dodaje podkreślenie, overline linię nad tekstem, a line-through przekreślenie. W praktyce często spotkasz to przy linkach, np. a { text-decoration: none; } usuwa domyślne podkreślenie odsyłacza, a p.warning { text-decoration: underline; } może wyróżniać ważny fragment. W nowszych standardach CSS temat jest rozbity trochę dokładniej: istnieje np. text-decoration-line, text-decoration-color, text-decoration-style i text-decoration-thickness, ale text-decoration nadal działa jako wygodny skrót. Warto też wiedzieć, że blink jest przestarzałe i we współczesnych przeglądarkach raczej nie powinno się go używać, bo migający tekst jest słaby pod względem dostępności i UX. Moim zdaniem dobrze kojarzyć text-decoration głównie z liniami przy tekście, a font-style z krojem typu italic. To pomaga szybko odsiać podobnie brzmiące właściwości.
W tym pytaniu łatwo pomylić właściwości, bo wszystkie dotyczą wyglądu tekstu, ale w CSS każda z nich ma dość konkretne zadanie. font-style odpowiada za styl odmiany czcionki, czyli głównie normal, italic albo oblique. Jeśli chcesz zrobić tekst pochylony, używasz właśnie tej właściwości, ale ona nie rysuje żadnej kreski pod, nad ani przez tekst. To jest częsty błąd myślowy: skoro chodzi o wygląd liter, to ktoś wrzuca wszystko do font-style, a CSS jest jednak bardziej precyzyjny. text-align również nie pasuje, bo służy do wyrównywania zawartości w poziomie, na przykład left, right, center albo justify. Ta właściwość ustawia układ tekstu w bloku, a nie jego dekorację. Można mieć tekst wyśrodkowany i jednocześnie podkreślony, ale będą to dwie różne deklaracje CSS. Z kolei font-decoration brzmi wiarygodnie, trochę jak poprawna nazwa, ale nie jest standardową właściwością CSS. W praktyce takie wymyślone nazwy po prostu nie zadziałają, przeglądarka je zignoruje i efektu nie będzie. Poprawnym wyborem jest text-decoration, bo właśnie ona obsługuje dekoracje tekstu takie jak underline, overline i line-through. Z mojego doświadczenia najlepiej zapamiętać prostą zasadę: font-* dotyczy cech fontu, text-align dotyczy ustawienia tekstu w pudełku, a text-decoration dodaje linie dekoracyjne do tekstu.