Przekreślony tekst w HTML i CSS - jak zrobić go poprawnie?

Gdy na stronie trzeba pokazać starą cenę, nieaktualną informację albo zadanie, które zostało wykonane, sama linia przechodząca przez środek liter to dopiero początek. W tym poradniku pokazuję, jak zrobić przekreślony tekst w HTML i CSS, kiedy wybrać element , kiedy , a kiedy zwykłą regułę stylów, oraz jak uniknąć problemów z czytelnością i dostępnością.

Jak semantycznie przekreślić tekst w HTML

Najprostszy przypadek wygląda tak, że informacja nadal znajduje się na stronie, ale nie jest już aktualna. Wtedy używam elementu . Przeglądarka domyślnie rysuje przez jego zawartość poziomą linię, a kod od razu mówi, że dana treść straciła aktualność.

Promocja obowiązuje do 31 maja 15 czerwca.

Element pasuje także do nieaktualnej ceny, dawnej nazwy produktu albo informacji o wydarzeniu, które już się zakończyło. Nie oznacza jednak, że tekst został formalnie usunięty z dokumentu. To rozróżnienie jest małe wizualnie, ale ważne semantycznie.

Jeżeli pokazujesz zmianę w dokumencie, lepszy będzie element . Informuje on o usunięciu fragmentu treści i może zostać uzupełniony o atrybuty datetime oraz cite.

  Termin spotkania:
  12 września
  19 września.

W praktyce wykorzystałbym przy historii zmian, redagowaniu regulaminu albo prezentowaniu poprawionej treści. Para i pokazuje wtedy nie tylko efekt wizualny, ale też co usunięto i co dodano.

Jak uzyskać przekreślenie za pomocą CSS

Jeśli linia ma być wyłącznie elementem wyglądu, najczyściej użyć właściwości text-decoration. To rozwiązanie daje kontrolę nad kolorem, stylem i grubością dekoracji bez zmieniania znaczenia samego tekstu.

.przekreslenie {
  text-decoration: line-through;
}

W HTML klasę można przypisać na przykład do elementu :

  Zadanie wykonane

Do bardziej dopracowanych interfejsów przydają się dodatkowe właściwości. Możesz zmienić kolor linii, jej styl oraz grubość, choć ta ostatnia opcja wymaga ostrożności, bo zbyt mocne przekreślenie pogarsza czytelność.

.stara-cena {
  color: #777;
  text-decoration-line: line-through;
  text-decoration-color: #c62828;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

W sklepie internetowym często lepiej przekreślić wyłącznie starą cenę, a nową wyróżnić osobnym elementem. Dzięki temu użytkownik nie musi domyślać się, która wartość jest aktualna.

  249 zł
  199 zł

Moja praktyczna zasada jest prosta: HTML opisuje znaczenie, a CSS wygląd. Jeśli przekreślenie coś komunikuje, zaczynam od właściwego elementu HTML. Jeśli jest tylko ozdobą komponentu, wybieram klasę CSS.

Praktyczne zastosowania w interfejsie

Stara i nowa cena

Przekreślona cena jest jednym z najbardziej rozpoznawalnych zastosowań tej techniki. Stara wartość powinna być mniej wyrazista, ale nadal możliwa do odczytania. Nową cenę warto oznaczyć pogrubieniem i zadbać o wystarczający kontrast.

  

    399 zł
    299 zł
  

Sam wygląd nie powinien być jedynym komunikatem o promocji. Dodanie tekstu „cena regularna” i „cena promocyjna” pomaga osobom korzystającym z czytnika ekranu oraz użytkownikom, którzy mogą mieć trudność z rozpoznaniem delikatnej linii.

Lista zadań

W aplikacji typu to-do przekreślenie może sygnalizować wykonane zadanie. Tutaj zazwyczaj stosuję klasę CSS, ponieważ status zadania jest stanem komponentu, a nie zmianą treści dokumentu.

  Przygotować makietę strony

.zadanie--wykonane span {
  color: #6b7280;
  text-decoration: line-through;
}

Trzeba jednak pamiętać, że sama linia nie wystarczy. Checkbox powinien mieć stan zaznaczenia, a element może otrzymać dodatkowy opis, na przykład „wykonane”. W ten sposób interfejs pozostaje zrozumiały także bez patrzenia na ekran.

Przeczytaj również: Cień w CSS - Jak tworzyć naturalne efekty i unikać błędów?

Poprawiona treść

W changelogu, dokumentacji lub edytorze treści użyłbym razem z . Takie oznaczenie pokazuje historię zmiany i jest bardziej precyzyjne niż dekorowanie tekstu klasą.

  Wersja:
  2.4
  2.5

To rozwiązanie ma sens wtedy, gdy odbiorca powinien zobaczyć zarówno poprzednią, jak i aktualną wersję. Jeżeli stary tekst nie ma już żadnej wartości dla użytkownika, lepiej usunąć go z interfejsu zamiast zostawiać wiele przekreślonych fragmentów.

Najczęstsze błędy i problemy z dostępnością

Początkujący często sięgają po , bo ten znacznik był kiedyś popularny w prostych stronach HTML. Dzisiaj jest przestarzały i nie powinien pojawiać się w nowych projektach. Zastąp go elementem semantycznym albo CSS-em.

Drugim błędem jest używanie przekreślenia jako jedynego sposobu przekazywania informacji. Czerwona linia może oznaczać cenę nieaktualną, błąd, wykonane zadanie albo usunięty fragment. Bez dodatkowego tekstu lub właściwego kontekstu znaczenie może być niejasne.

• Nie przekreślaj całych długich akapitów, jeśli użytkownik nadal ma je czytać.
• Nie używaj samego koloru do rozróżnienia starej i nowej wartości.
• Nie ukrywaj ważnych informacji wyłącznie za pomocą display: none lub przekreślenia.
• Sprawdzaj wygląd na telefonie, ponieważ cienka linia może zlewać się z małym tekstem.

Ważny jest też kontrast. Szary tekst ze szarą linią wygląda elegancko, ale na jasnym tle może stać się prawie niewidoczny. Ja zwykle zaczynam od normalnej czytelności tekstu, a dopiero później zmniejszam jego wyrazistość, zamiast od razu stosować bardzo jasny kolor.

Jeżeli przekreślenie jest elementem interakcji, na przykład przycisku lub statusu, przetestuj komponent klawiaturą i czytnikiem ekranu. Efekt wizualny nie zastępuje informacji tekstowej, dlatego stan „wykonane”, „usunięte” albo „nieaktualne” powinien być możliwy do odczytania także w inny sposób.

Jak wybrać właściwe rozwiązanie w projekcie

Decyzję można sprowadzić do jednego pytania: czy przekreślenie opisuje znaczenie treści, czy tylko jej wygląd? Gdy chodzi o nieaktualność, wybierz . Gdy oznaczasz zmianę w dokumencie, sięgnij po . Gdy budujesz styl komponentu, zastosuj text-decoration: line-through.

Przed wdrożeniem sprawdź jeszcze trzy rzeczy: czy użytkownik wie, co oznacza linia, czy aktualna wartość jest wystarczająco widoczna oraz czy informacja pozostaje dostępna bez rozpoznawania koloru i dekoracji. Taki krótki test wyłapuje większość problemów, które później wracają podczas poprawiania interfejsu.

Linia przez tekst powinna coś komunikować

Technicznie przekreślenie jest proste, ale dobry frontend wymaga właściwego dopasowania narzędzia do znaczenia. , i CSS nie są zamiennikami jeden do jednego, choć w przeglądarce mogą wyglądać podobnie.

Najbezpieczniej zacząć od semantyki, a dopiero potem dopracować wygląd. Dzięki temu interfejs będzie czytelny dla użytkownika, zrozumiały dla technologii asystujących i łatwiejszy do utrzymania, gdy projekt zacznie się rozrastać.