HTML: зачеркивание
семантически верное зачеркивание с помощью HTML5
CSS великолепно подходит для управления дизайном элементов сайта, но, к сожалению, непригоден для того, чтобы передавать их смысловое значение. К счастью, для этой цели есть другой инструмент - HTML-теги. Когда Вы зачеркиваете какой-то контент, нужно понимать причину - для чего Вы это делаете. Зачеркнутый текст приобретает семантическое значение, благодаря тегам
Неактуальный текст
Текст удален
s или del
Как мы уже убедились, оба тега обеспечивают одинаковый визуальный эффект - зачеркнутый текст. Тем не менее, эти теги имеют разную смысловую нагрузку и не являются взаимозаменяемыми.
Обратимся к определениям.
s
тег
применяется для перечеркивания текста, который больше не является точным или актуальным.
Хороший пример: указание скидок в интернет-магазине:
100 руб. 90 руб.
Цена: 100 руб. 90 руб.
Тег
del
тег
нужен для зачеркивания текста, удаленного из документа.
Хороший пример: список дел:
Выполнить:
устроиться на работу- стать ведущим разработчиком
Выполнить:
-
устроиться на работу - стать ведущим разработчиком
Правило
Попробуем описать порядок использования тегов
del и ins
Совместное использование тегов - действительно отличная идея. Так можно создать интерфейс отслеживания изменений в документе.
Пример: текстовый редактор
Это мой
прокет
проект
Это мой
прокет
проект
Пример: интерфейс git
+ function TEA() {- function tea() {
strike
В некоторых документах все еще можно встретить тег
Совместимость
К сожалению, теги ::before и ::after позволяют анонсировать содержимое этих тегов. Однако, не стоит полагаться на такой подход, так как многие пользователи сознательно отключают анонсирование многословного контента.
del
del::before,
del::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
del::before {
content: " [deletion start] ";
}
del::after {
content: " [deletion end] ";
}
/* MDN */
s
s::before,
s::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
s::before {
content: " [start of stricken text] ";
}
s::after {
content: " [end of stricken text] ";
}
/* MDN */
Спасибо за внимание.
Написано по материалам статьи Samantha Ming “Strikethrough using HTML5”.
