От автора: интернет работает на ссылках. Помимо всего прочего, у ссылок очень строгие ограничения по стилям, по большей части из соображений безопасности. Дизайнеры, например, Marcin Wichary заметили, что эти ограничения влияют на разборчивость ссылок, поэтому они предложили свои способы обхода этих запретов. CSS стандарты развиваются, и множество из этих проблем постепенно решаются, что улучшает юзабилити и внешний вид ссылок.
Свойство text–decoration–skip
По умолчанию ссылки имеют синий цвет с подчеркиванием. Подчеркивание заходит на нижние выноски таких букв как j, что затрудняет чтение ссылок. Есть множество обходных путей решения этой проблемы, но теперь в CSS есть свой способ – свойство text–decoration–skip. У свойства очень много значений, но цель всегда одна – указать места, где подчеркивание не должно отрисовыватться.
Большинство дизайнеров заинтересует значение ink, решающее описанную выше проблему. Это значение обрывает подчеркивание в местах с нижними выносками букв. Эффект можете посмотреть в начале статьи.
|
1 |
a { text–decoration–skip: ink; } |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ Safari 10 такое поведение встроено по умолчанию. Во всех остальных браузерах у свойства text–decoration–skip по умолчанию стоит значение none.
У свойства text–decoration–skip есть значение spaces, с которым подчеркивание не будет перепрыгивать между словами. Есть и другие значения, более подробно см. в статье на Mozilla Developer Network.
На данный момент свойство text–decoration–skip поддерживается в Safari, в Chrome поддержки нет. Однако в Chrome Canary поддержка есть, что, возможно, приведет в скором времени к поддержке и в обычном Chrome.
Свойство text-decoration-color
По умолчанию цвет подчеркивания ссылки наследуется от цвета текста. Существует множество способов установить другой цвет, самый простой через border-bottom вместо text-decoration. Однако теперь в CSS есть прямой способ изменять цвет подчеркивания:
|
1 |
a { text–decoration–color: #ccc; } |
Поддержка у text–decoration–color почти такая же, как у text–decoration–skip: оба поддерживаются в Chrome Canary, но в просто Chrome и других браузерах нет.
Заключение
Пока что оба свойства имеют слабую поддержку в браузерах, но это скоро изменится, и в будущем их стоит использовать в своих стилях. Если вам важны такие мелочи типографского изящества, могу предложить парочку ресурсов:
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
