Text decoration skip: text-decoration-skip | CSS-Tricks

Задача

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5 CSS 2.1 IE Cr Op Sa Fx

The result of the example is shown in Fig. one.

The thickness of the line and the color of the underscore is also set through the Border-Bottom property.

Surely you noticed on many resources an animated underscore and wanted to find out how to make it possible on your website. To make beautiful cSS underscore Elements we will not need large knowledge, or connecting additional scripts, all that we need is standard HTML and CSS.

Variations underline

Underline links or any other elements, you can come up with any. Underlining can emerge from below, leave to the left or right, etc. We will look more over interesting example, in which the underscore will be touched from the center to the edges, as on the demonstration below.

demonstration of underscore

HTML.

To begin with, creating any element, for example, take tag a. The attribute is not important to us, because most of the work will be set up with styles.

CSS.

Implementation will be in two lines that will be touched from the middle of the bottom of the element to its edges.

For the underscore, we are responsible for the Text-Decoration property, but it does not make sense here, because it is not entirely relevant to embody our animation plans in this case. We will not forget that each element can be assigned a pseudo-element :: Before or :: Afterter. Therefore, all properties will be asked to them, and our reference immediately set the following parameters:

A (display: inline-block; position: relative; text-decoration: none;)

Thus, we set block streaming and positioning relative to the source location. All this is done so that the underscore does not get out of the element when we pseudo-element :: Before appoint absolute positioning. After that, we need to set its clear location and size. And here we immediately create the first half of the underscore.

A :: Before: Absolute; CONTENT: «»; Height: 2px; width: 0; background-color: red; transition: width .5s Ease-in-Out, Left .5s Ease-In- Out; Left: 50%; Bottom: 0;)

Those. The height of the underscore line will be 2px, length 0, red, and the TRANSITION property is responsible for the animation. And of course, the indent to the left is 50%, i.e. Central point. Almost the same actions and pseudo-element :: After:

A :: After (Display: Block; Position: absolute; content: «»; Height: 2px; width: 0; background-color: red; transition: width .5s Ease-in-Out; Left: 50%; bottom: 0;)

A: Hover :: Before (Width: 50%; Left: 0;) A: Hover :: Afterter (Width: 50%;)

It is worth noting that this is just one of the ways to implement this idea. You can do the same with only one pseudo-element :: Before. Subscribe to materials and suggest the topics for articles.

Underscore for block elements like tag

To create a line under the text, add the Border-Bottom style property to the element, its value is simultaneously the thickness of the line, its style and color (Example 1).

Example 1. Line on the whole width

HTML5 CSS 2.1 IE CR OP SA FX

The distance from the line to the text can be adjusted by the Padding-Bottom property by adding it to the h2 selector. Result this example shown in fig. one.

Text underscore

To emphasize only the text, you must use the Text-Decoration property with the Underline value, again adding it to the h2 selector (Example 2).

Example 2. Line on the width of the text

HTML5 CSS 2.1 IE CR OP SA FX

The black header attracts attention, despite the fact that it is black, not white.

The result of this example is shown in Fig. 2.

In the case of using the Text-Decoration property, the line is rigidly tied to the text, so it will not be possible to determine its position and style.

or learn tags formatting HTML text

One of the key and easiest tutorial lessons is presented to your attention.

• HTML text It is the main component of most Internet pages.
• By key phrases in the text of the HTML pages Users can find your site.
• HTML text May be any size and color, at your discretion. You can also determine the type of font and its volume.
• HTML Size Font It is commonly installed in pixels.
• HTML formatting Text Widespread, formatting tags are applied.

See below tags formatting HTML text:

• Tags → fat HTML text (bold font).
• Tags → Fat HTML text (bold font).
• Tags → Monoshyry HTML text (monosular font).
• Tags → Monoshyry HTML text (monosular font).
• Tags → Monoshyry HTML text (monosular font).
• Tags → HTML text, size is more than usual (large font).
• Tags → HTML textThe size is less than the usual (small font).
• Tags → inclined HTML text (inclined font).
• Tags → inclined HTML text (inclined font).
• Tags → inclined HTML text (inclined font).
• Tags → Stressed HTML text (underlined font).
• Tags → Crushed HTML text (Stressed font).
• Tags _{→ HTML text (font) in the lower index.}
• Tags ^{→ HTML text (Font) in the upper index.}

HTML text formatting: crushed, underlined text

Result: … Monoshyry font

Result: … font size is more than usual

Result: … inclined font

Result: Stressed text (stressed font)

Result: Upper index

C formatting, presented above, should be applied only for small sections of text. Use CSS. If you want to set a specific font for the whole page, or for several lines, for example.

Тонкое управление свойством text-decoration

От автора: Скорее всего, вы уже знакомы с данным свойством. Например, большинство браузеров, по умолчанию, задают с помощью данного свойства подчеркивание у ссылок (text-decoration: underline;), которое мы можем отменить вот так: text-decoration: none;.

Но возможно вы не знаете о том, что вы можете делать не только это с помощью данного свойства, а также существуют различные дополнительные свойства, которые предоставляют вам больше возможностей для управления оформлением текста.

Для данного свойства можно задать несколько значений

Например:

a { text-decoration: underline overline; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Посмотрите описание данной возможности в Альманахе. Если быть точнее, то в данном случае происходит добавление нескольких значений для дополнительного свойства text-decoration-line.

Вы можете управлять цветом данного свойства

По умолчанию для данного свойства задается цвет, указанный для текста (в свойстве color). Но вы можете изменить это:

a { text-decoration-color: #f06d06; }

Посмотрите описание данной возможности в Альманахе.

Примечание: Браузерный «движок» Gecko отображает подчеркивание под нижним выносным элементом букв (подстрочным элементом литеры), а WebKit/Blink – над:

Слева показан пример в браузере Chrome, справа – в Firefox.

Обычно цветные подчеркивания реализуются с помощью свойства border, а не text-decoration. Для каждой из границ элемента может быть указан индивидуальный цвет, толщина, и позиционируются границы значительно лучше.

Но есть вещи, которые нельзя сделать с помощью границ, например…

Вы можете менять стиль данного свойства

Вы просто не сможете сделать также с помощью границ!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

a { text-decoration-style: wavy; }

Посмотрите описание данной возможности в Альманахе.

А можно сделать и еще лучше

Есть определенное желание сделать подчеркивание текста лучше. Например, пропускать подчеркивание нижних выносных элементов у букв для улучшения читабельности подчеркнутого текста:

Такая возможность будет доступна благодаря свойству text-decoration-skip, хотя она пока не реализована ни в одном из браузеров. А пока мы можем указать для подчеркивания более мягкий и менее контрастный цвет. Здесь можно применить rgba():

И, кстати, пропуск нижних выносных элементов у букв – это всего лишь одна из возможностей. Вы также сможете пропускать некоторые строчные элементы, пробелы и управлять подчеркиванием по краям текста.

Примечание: Похоже, что в Safari/iOS пропуск нижних выносных элементов у букв задан по умолчанию.

Если вы хотите отменить данное поведение, воспользуйтесь следующей записью: -webkit-text-decoration-skip: none;.

Тестирование

Из-за разной степени браузерной поддержки, некоторые (или все) демо-примеры могут не сработать в вашем браузере.

Так что да! Даже такие простые вещи, которые мы воспринимаем, как должное, могут со временем меняться в CSS царстве.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Firefox 86

Опубликовано:

2021-02-24

Ко дню защитника Отечества — новая версия любимого браузера.

CSS, HTML

• Экспериментальная поддержка CSS-функции image-set() в Nightly-сборках Firefox. Функция позволяет исполь­зовать в CSS адаптивный подход к загрузке изобра­жений. Например, в качестве фонового изобра­жения элемента (background-image) можно исполь­зовать разные версии изобра­жений в зави­симости от плотности точек устройства вывода и — косвенно — скорости интернет-соединения.

  Плотность точек можно задавать с помощью относи­тельных единиц x/dppx, соответствующих масштабу страницы (соотно­шению размеров логи­ческого и физи­ческого пикселов), или удельного разрешения dpi (коли­чество точек на дюйм) или dpcm (коли­чество точек на сантиметр), подходящего для стилей, предназначенных для печати.

  Изобра­жения с пони­женным разре­шением могут исполь­зоваться браузером не только на экранах с низкой плотностью точек, но и на HiDPI-экранах для ускорения загрузки при низкой скорости интернет-соединения.

  За включение поддержки image-set() в Firefox отвечает параметр layout.css.image-set.enabled на странице скрытых настроек, доступной по псевдо-URL-адресу about:config.

• Включена по умолчанию поддержка псевдо­класса :autofill и его псевдонима :-webkit-autofill. Псевдо­класс соотве­тствует элементам форм, содержащим значения, авто­мати­чески вставленные браузером в рамках функции авто­запол­нения. Ранее функцио­нальность была доступна только для внутренних нужд браузера через нестан­дарт­ный псевдо­класс -moz-autofill.
• В CSS-свойстве list-style-image теперь можно использовать любые значения типа «изображение» (<image>). Свойство позволяет пере­опре­делить внешний вид маркеров элементов списков.
• Поддержка оператора lighter элемента feComposite, реализующего функцио­нальность фильтров SVG. Оператор указывается в атрибуте operator и служит для наложения двух изображений друг на друга в режиме суммирования.
• Удалена поддержка скрытого параметра layout.css.text-decoration-skip-ink.enabled, позво­лявшего включать/выключать поддержку CSS-свойства text-decoration-skip-ink. Свойство было добавлено в Firefox 70 и по умолчанию прерывает линию под­чёрки­вания/над­чёрки­вания/пере­чёрки­вания при пере­сечении штрихов символов для облегчения восприятия текста, но приводит к спорным результатам в сочетании с некоторыми кирилли­ческими буквами, в частности «д», особенно в начале/конце слов.

JavaScript

• Включена по умолчанию поддержка объектов Intl.DisplayNames, экспериментально доступная начиная с Firefox 78. Функцио­нальность позволяет едино­образно генерировать, например, названия валют в соот­ветствии с заданными языковыми и регио­нальными параметрами.
• Включён по умолчанию сброс значения свойства window.name в пустую строку при загрузке страниц других доменов и возвращение прежнего значения при возвращении на страницу прежнего домена, на котором исходное значение было установлено. Функцио­нальность номинально была реализована в Firefox 82, но, как теперь понятно, по умолчанию была отключена, за что отвечал параметр privacy.window.name.update.enabled.
• Разрешения на уровне доменов (host permissions) теперь дают расширениям доступ к привиле­гиро­ванным частям программного интер­фейса управления вкладками tabs API без необходимости отдельно запрашивать разрешение tabs, дающее доступ к более широким возмож­ностям, чем может требоваться при исполь­зовании разрешений на уровне доменов.

Доступность

• Использование функции быстрой навигации в программах чтения с экрана (скрин­ридерах, screen reader) для пере­хода к редак­тируемым текстовым полям больше не приводит к ошибочному переходу на не под­лежащие редакти­рованию элементы, например, на сайте messenger.com.
• Функция «mouse review» программы чтения с экрана Orca теперь работает правильно после пере­клю­чения между вкладками браузера. Функция отображает информацию об элементе, находящемся под указателем мыши.
• Устранена проблема, из-за которой программы чтения с экрана ошибочно сообщали о заголо­вочных ячейках в таблицах, содержащих ячейки, объеди­няющие несколько столбцов.

Прочее

См. также

CSS — text-decoration-styleCSSсвойство задает стиль линий , указанныхtext-decoration-l

text-decoration-style CSS свойство задает стиль линий , указанных text-decoration-line . Стиль применяется ко всем строкам, которые установлены с помощью text-decoration-line .

Если указанное оформление имеет конкретное семантическое значение, такое как прямая линия, означающая, что некоторый текст был удален, авторам рекомендуется обозначать это значение с помощью HTML-тега, например <del> или <s> . Так как в некоторых случаях браузеры могут отключить стилизацию, семантическое значение не исчезнет в такой ситуации.

При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

Syntax

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;


text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Values

solid

Рисует одну линию.

double

Рисует двойную линию.

dotted

Рисует пунктирную линию.

dashed

Рисует пунктирную линию.

wavy

Рисует волнистую линию.

-moz-none

Не рисует линии. Используйте text-decoration-line : none .

Formal definition

Формальный синтаксис

solid | double | dotted | dashed | wavy

Examples

Setting a wavy underline

.example {    
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;    
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}

CSS

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

<p>This text has a wavy red line beneath it.</p>

Results

Specifications

См.также

• При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

Фоновое подчеркивание для ссылок / текста (мини дизайн тренд)

После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники.

Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS свойство (text-decoration-skip). С другой стороны такой прием позволяет выделить нужный участок текста, ссылку либо конкретные слова в предложении, сделав типографику страницы чуть более интересной.

Как правило, для реализации используются яркие цвета, возможно, контрастные. Чаще всего они светлее текста, располагаются за ним. Степень пересечения элементов встречается разная — где-то они лишь соприкасаются, в других примерах «фон» занимает более трети текста.

Сложно сказать сколько проживет данный тренд веб-дизайна, главное при его реализации не забывать о юзабилити — тексты должны хорошо читаться, а обилие полосок не отвлекать пользователя от основного контента. С яркими акцентами нужно быть внимательным.

Свойство text-decoration-skip

Напоследок пару слов хотелось бы сказать про, упомянутое выше, CSS свойство, которое определяет как именно фоновая полоска будет вести себя с контентом на странице. Если интересно, в блоге есть детальная заметка про подчеркивание ссылок и текста.

У text-decoration-skip есть несколько значений:

• objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки).
• none — создаются пересечения со всеми объектами.
• spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing.
• ink (как в примере выше) — линии не пересекает символы и буквы.
• edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве.
• box-decoration — не учитываются отступы margin, border и padding.

Чтобы проще это понять вот картинка (из этой статьи).

Если вы видели на каких-то сайтах примеры нового мини-тренда с перекрывающими текст линиями, делитесь линками в комментариях. Будет интересно глянуть.

text-decoration-skip — CSS: Каскадные таблицы стилей

Свойство text-decoration-skip CSS устанавливает, какие части содержимого элемента должно пропускаться любое текстовое оформление, влияющее на элемент. Он контролирует все линии оформления текста, нарисованные элементом, а также любые линии оформления текста, нарисованные его предками.

 
пропустить украшение текста: нет;
текст-украшение-пропуск: объекты;
текст-украшение-пропустить: пробелы;
текст-украшение-пропуск: края;
текст-украшение-пропуск: украшение коробки;


text-decoration-skip: пробелы между объектами;
пропустить украшение-текста: начальные-пробелы конечные-пробелы;
text-decoration-skip: украшение бокса краев объектов;


текст-украшение-пропустить: наследовать;
текст-украшение-пропуск: начальный;
текст-украшение-пропустить: отключено;
  

Значения

нет

Ничего не пропущено.Таким образом, оформление текста выполняется для всего текстового содержимого и между атомарными блоками встроенного уровня.

объекта

Полное поле поля элемента пропускается, если это атомарный встроенный элемент, такой как изображение или встроенный блок.

места

Пропускаются все интервалы: все пробелы Unicode и все разделители слов, а также любые смежные межбуквенного интервала или межсловного интервала .

ведущие пробелы

То же, что пробелов , за исключением того, что пропускаются только ведущие пробелы.

конечные пробелы

То же, что пробелов , за исключением того, что пропускаются только конечные пробелы.

края

Начало и конец оформления текста немного смещены (например, на половину толщины линии) от края содержимого блока оформления. Таким образом, смежные элементы получают отдельные подчеркивания. (Это важно для китайского языка, где подчеркивание является одной из форм пунктуации.)

Коробка декоративная

Оформление текста пропускается через поля поля, границы и отступы поля.Это влияет только на украшения, наложенные предком; Коробка для декорирования никогда не перекрывает собственное украшение коробки.

 нет | [объекты || [пробелы | [ведущие пробелы || конечные пробелы]] || края || коробка-украшение] 

Пропуск края

HTML

  
 Эй, возьми чашку  кофе ! 
  

CSS

  п {
  маржа: 0;
  размер шрифта: 3em;
  оформление текста: подчеркивание;
  текст-украшение-пропуск: края;
}  

Результат

Таблицы BCD загружаются только в браузере

text-decoration-skip | CSS-уловки

Свойство text-decoration-skip указывает, где следует разрыв подчеркивания, надчеркивания или зачеркивания текста.Это улучшает читаемость оформленного текста и исправляет грамматику пунктуации для некоторых языков.

Вот один пример:

  a {
  текст-украшение-пропуск: чернила;
}  

Внимание! Значение ink было изменено на совершенно новое свойство, text-decoration-skip-ink: auto; .

Если ваш браузер поддерживает это свойство, вы заметите здесь, что в нижних элементах каждого символа (например, «y» и «p») есть небольшие пробелы по краям:

См. Pen text-decoration-skip от CSS-Tricks (@ css-tricks) на CodePen.

Если ваш браузер не поддерживает эту функцию, то это то, что вы должны ожидать от свойства в поддерживающем браузере:

Значения

• объекта : по умолчанию. Строка оформления пропускает встроенные объекты, такие как изображения или элементы встроенного блока.
• нет : декоративная линия пересекает все, включая встроенные объекты, которые обычно пропускаются.
• пробелов : декоративная строка пропускает пробелы, символы-разделители слов и любые пробелы, заданные с интервалом между буквами или интервалом между словами .
• чернила : декоративные линии пропускают глифы или нисходящие элементы.
• края : декоративная линия начинается немного позже начального края контента и заканчивается немного раньше конечного края контента.Это свойство было разработано для того, чтобы два расположенных рядом подчеркнутых элемента не выглядели так, как будто они разделяют одно подчеркивание. Это полезно для текста на китайском языке, в котором для знаков препинания используется подчеркивание.
• box-decoration : декоративная линия пропускает унаследованные поля, границу и отступы.

Обновление: похоже, что значение конечных пробелов устарело, так как его больше нельзя найти в спецификации.

Поскольку это свойство не поддерживается ни одним браузером, демонстрации еще нет, но вот пример того, как каждое из значений может выглядеть после реализации text-decoration-skip .

В конце 2014 года Apple внесла изменение в text-decoration в браузерах Safari и iOS, которое имитирует text-decoration-skip: ink; должно работать. Хотя ни одно из значений text-decoration-skip еще официально не реализовано, вы можете отключить это поведение по умолчанию с помощью -webkit-text-decoration-skip: none; .

См. Pen -webkit-text-decoration-skip: none; от CSS-Tricks (@ css-tricks) на CodePen.

Связанные

Дополнительная информация

Поддержка браузера

Desktop

текст-украшение-пропустить-чернила | CSS-уловки

text-decoration-skip-ink — это свойство, которое управляет поведением подчеркивания и overline (но не сквозной строки ), когда строка проходит через часть символа / глифа. Это дает вам точный контроль над тем, как подчеркивание или надчеркивание взаимодействуют с символами, выступающими над верхним или нижним краем строки.

Ранее это обрабатывалось с помощью text-decoration-skip: ink; свойство / значение, но после обсуждения того, как решить проблему с каскадными стилями, непреднамеренно перезаписывающими стили с более низким приоритетом (из-за количества опций, доступных для text-decoration-skip ), отдельные свойства будут разбиты на новые свойства, аналогичные text-decoration-skip-ink .Дополнительные сведения и примеры того, почему это было изменено, см. В этом обсуждении на GitHub и в протоколах рабочей группы CSS, в которых обсуждаются свойства.

По умолчанию браузеры «пропускают» области, где «чернила» символа пересекают подчеркивание, например:

Вы можете изменить это поведение, чтобы заставить подчеркивание / надчеркнуть переход с по символа, установив text-decoration-skip-ink на none .

  .line-of-text-thats-Уже-подчеркнутый {
  текст-украшение-пропустить-чернила: нет;
}  

В результате линия проходит сквозь символы:

Синтаксис

  текст-украшение-пропустить-чернила: авто | никто;  

Значения

text-decoration-skip-ink принимает следующие значения:

• auto — это значение по умолчанию, которое будет «пропускать» подчеркивание / наложение при прохождении через символ.
• нет обрежет это подчеркивание / подчеркивание прямо через ваши свисающие y и высокие t.

Пример

См. Пример Pen text-decoration-skip-ink
от CSS-Tricks (@ css-tricks) на CodePen.

Поддержка браузера

Desktop

Связанные

Ресурсы

CSS-текст-украшение-пропустить

<стиль> h2 { шрифт: 100 3em без засечек; текст-украшение-строка: подчеркивание; стиль оформления текста: сплошной; текст-украшение-пропустить: пробелы; }

Пример с пробелами

Обратите внимание, если это не сработает для вас, возможно, это проблема совместимости с браузером.На момент написания статьи поддержка этого свойства браузером была ограничена.

Свойство CSS text-decoration-skip указывает, какие части содержимого элемента должны пропускаться любые текстовые декорации, влияющие на элемент.

Свойство text-decoration-skip используется вместе со свойством text-decoration-line (или сокращенным свойством text-decoration ), чтобы определить, пропускать ли определенные части строки или нет.

Синтаксис

пропустить украшение-текста: нет | [объекты || пробелы || чернила || края || шкатулка-украшение]

Возможные значения

нет

Ничего не пропустить: текстовое оформление отображается для всего текстового содержимого и между атомарными полями на строчном уровне.

объекта

Пропустите этот элемент (весь его поле поля), если он является атомарным встроенным (например, изображением или встроенным блоком).

места

Пропустить все интервалы, т. Е. Все символы со свойством Unicode White_Space и все символы разделителей слов, а также любые смежные межбуквенные интервалы или межсловные интервалы.

чернила

Пропустить то место, где нарисованы глифы: прервать линию оформления, чтобы форма текста просвечивала там, где в противном случае оформление текста могло бы пересекать глиф.

края

Начало и конец строки помещаются немного внутрь от края содержимого блока украшения, так что, например, два подчеркнутых элемента рядом друг с другом не имеют единой подчеркивания. (Это важно для китайского языка, где подчеркивание является одной из форм пунктуации.)

Коробка декоративная

Пропустить поля поля, границы и отступы поля. Обратите внимание, что это влияет только на украшения, наложенные предком; коробка для украшения никогда не перекрывает собственное украшение коробки.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:

начальная

Представляет значение, указанное в качестве начального значения свойства.

наследовать

Представляет вычисленное значение свойства родительского элемента.

снято

Это значение действует как наследовать или начальное , в зависимости от того, унаследовано свойство или нет.Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Основная информация об имуществе

Начальное значение

Объектов

Относится к

Все элементы

Унаследовано?

Есть

Медиа

Визуальный

Анимационный

Нет

Пример кода

Базовый CSS

Вот пример базовой декларации.Объявление состоит из свойства и его значения.

текст-украшение-пропуск: чернила;

Значит, его можно использовать так:

h2 { текст-украшение-строка: подчеркивание; стиль оформления текста: пунктирная; цвет оформления текста: желто-зеленый; текст-украшение-пропуск: чернила; }

Рабочий пример в HTML-документе

Пример с пробелами

Обратите внимание, если это не сработает для вас, возможно, это проблема совместимости с браузером.На момент написания статьи поддержка этого свойства браузером была ограничена.

Попробуй

Спецификации CSS

Поддержка браузера

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузером.

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д.Как и в случае с любым свойством CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

W3C не рекомендует эту практику, однако во многих случаях единственный способ проверить свойство — это включить расширение CSS, совместимое с вашим браузером.

Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

text-decoration-skip · Документы WebPlatform

Сводка

Указывает, какие части содержимого элемента пропускаются при применении любого оформления текста.

Обзорная таблица

Начальное значение

объекта

Относится к

Все элементы

Унаследовано

Да

Медиа

визуальный

Расчетное значение

как указано

Анимационный

Нет

Свойство объектной модели CSS

текст

Синтаксис

• text-decoration-skip: box-decoration
• текст-украшение-пропустить: края
• текст-украшение-пропуск: чернила
• текст-украшение-пропустить: нет
• текст-украшение-пропустить: объект
• text-decoration-skip: пробелы

Значения

нет

Ничего не пропустит; оформление текста будет нарисовано для всего текстового содержимого

объект

Пропустит элемент (включая его поле), если он является атомарным встроенным

мест

Пропускает пробелы, в том числе:

• обычных мест - U + 0020
• вкладок - U + 0009
• nbsp - U + 00A0
• идеографическое пространство - U + 3000
• все пробелы фиксированной ширины - примеры: от U + 2000 до U + 200A, U + 202F и U + 205F
• любой соседний интервал между буквами или словами

чернила

Пропустить, где нарисованы какие-либо глифы.Это прервет линию оформления, так что текст будет виден там, где в противном случае украшение могло бы пересекать текст. Обычно это включает восходящие и нисходящие символы глифов.

Примечание: UA также может пропускать небольшие расстояния справа или слева от контура глифа.

Коробка-украшение

Пропускает поля поля, границы и отступы поля.

Примечание: пока не известно, является ли это необходимым значением

края

Оформление текста будет немного вставлено, так что два расположенных рядом элемента не будут выглядеть как единое непрерывное украшение.Это важно для контента на китайском языке, где подчеркивание является формой пунктуации.

Примеры

Пропускает верхние и нижние элементы, позволяя отображать текст через любое украшение.

  п {
   текст-украшение-пропуск: чернила;
}
  

Банкноты

Это свойство наследуется, поэтому дочерние элементы могут иметь разные настройки.

Связанные спецификации

Модуль оформления текста CSS, уровень 3

Кандидат в рекомендации

Атрибуции

Свойство CSS text-decoration-skip - CSS Portal

Описание

Свойство text-decoration-skip указывает, какие части содержимого элемента должны пропустить любое текстовое оформление, влияющее на элемент.Он контролирует все линии оформления текста, нарисованные элементом, а также любые линии оформления текста, нарисованные его предками.

Свойство text-decoration-skip устарело или больше не входит ни в одну из рабочих групп CSS.

Начальное значение

объектов

Относится к

Все элементы

Унаследовано

Есть

Медиа

Визуальный

Расчетное значение

Как указано

Анимационный

Нет

Версия CSS

CSS3

Синтаксис JavaScript

объект .style.textDecorationSkip

Синтаксис

 пропустить-декорировать текст: нет | [объекты || пробелы || чернила || края || коробка-украшение] 

Значения

• noneНичего не пропускать: текстовое оформление рисуется для всего текстового содержимого и между атомарными полями встроенного уровня.
• объектов Пропустите этот элемент (весь его поле поля), если он является атомарным встроенным (например, изображением или встроенным блоком).
• пробелов Пропустить все интервалы, т.е.е. все символы со свойством Unicode White_Space [UAX44] и все символы-разделители слов, а также любые смежные межбуквенные или межсловные интервалы.
• ink Пропустить то место, где нарисованы глифы: прервать декоративную линию, чтобы форма текста была видна там, где в противном случае оформление текста могло бы пересекать глиф.
• краев Браузер должен расположить начало и конец строки немного внутрь (например, на половину толщины линии) от края содержимого рамки для украшения так, чтобы, e.грамм. два подчеркнутых элемента рядом друг с другом не имеют единого подчеркивания.
• box-decoration Пропустить поля, границу и отступы поля. Обратите внимание, что это влияет только на украшения, наложенные предком; коробка для украшения никогда не перекрывает собственное украшение коробки.

Пример

Поддержка браузера

CSS - пропустить украшение текста