Свойство CSS text-decoration-skip
Свойство CSS text-decoration-skip определяет части контента, которые пропускаются линией оформления. Значения и примеры.
Свойство CSS text-decoration-skip предназначалось для управления тем, какие части содержимого элемента должна пропускать линия оформления текста (подчёркивание, надчёркивание или зачёркивание), а не проходить сквозь них.
Оно применялось ко всем линиям оформления, нарисованным самим элементом, а также унаследованным от его предков. Идея состояла в том, чтобы предотвратить пересечение подчёркивания с пробелами, заменёнными элементами (например, изображениями) или нижними выносными элементами букв, таких как «g» и «y».
На практике это свойство так и не было реализовано. Разработчики браузеров выделили его функциональность в специальное свойство text-decoration-skip-ink — которое управляет пропуском над глифами букв, — а исходное text-decoration-skip было исключено из спецификации. Эта страница документирует его для справки; не используйте его в новом коде.
Значение ink — единственная часть этого свойства, которую браузеры когда-либо поддерживали, — была перенесена в отдельное свойство text-decoration-skip-ink. Именно это свойство вам, скорее всего, нужно сегодня.
Когда использовать
Никогда в новых проектах. text-decoration-skip устарело и не поддерживается ни одним современным браузером, поэтому его объявление не имеет никакого эффекта. Два практических вывода:
- Чтобы подчёркивание не перекрывало нижние выносные элементы букв, используйте
text-decoration-skip-ink: auto(это современное значение по умолчанию). - Для стилизации самих подчёркиваний используйте
text-decoration-line,text-decoration-color,text-decoration-styleили сокращённое свойствоtext-decoration.
Вы всё ещё можете встретить text-decoration-skip в старых таблицах стилей или руководствах — знать о нём (и понимать, что оно ничего не делает) — главная причина обращать на него внимание.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимируемое | Нет. |
| Версия | Черновик (устарело) |
| DOM Syntax | object.style.textDecorationSkip = "spaces"; |
Синтаксис
В удалённой спецификации значением было либо единственное ключевое слово none, либо одно или несколько ключевых слов из списка ниже, разделённых пробелами.
/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces edges;Пример свойства text-decoration-skip
Поскольку ни один браузер не реализует text-decoration-skip, подчёркивание ниже проведено прямо через всё содержимое — свойство просто игнорируется. Пример сохранён, чтобы показать исторический синтаксис:
Пример кода CSS text-decoration-skip
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 1em;
color: #ccc;
font-size: 2em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<h2>Text-decoration-skip property example</h2>
<p>
<em>Lorem,</em>
<em>ipsum is simply dummy text</em>
</p>
</body>
</html>Результат
Это свойство устарело и не поддерживается в современных браузерах. Пример не отобразит никаких визуальных изменений.
Значения
| Значение | Описание |
|---|---|
| none | Пропуск не применяется. Таким образом, линия оформления рисуется для всего текстового содержимого. |
| objects | Пропускает оформление над заменёнными элементами (например, изображениями) или блочными inline-элементами. |
| spaces | Все пробелы пропускаются. |
| leading-spaces | Начальные пробелы пропускаются (разделители слов плюс любые начальные межбуквенные или межсловные интервалы). |
| trailing-spaces | Конечные пробелы пропускаются (разделители слов плюс любые конечные межбуквенные или межсловные интервалы). |
| edges | Начало и конец каждой линии оформления немного смещены от края содержимого декорируемого блока, чтобы соседние подчёркивания визуально не сливались. |
| box-decoration | Области отступов, рамки и внутренних отступов блока пропускаются. |
Совместимость с браузерами
| Браузер | Поддержка |
|---|---|
| Chrome | Никогда не реализовывалось |
| Firefox | Никогда не реализовывалось |
| Safari | Никогда не реализовывалось |
| Edge | Никогда не реализовывалось |
| Opera | Никогда не реализовывалось |