Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

От автора: интернет работает на ссылках. Помимо всего прочего, у ссылок очень строгие ограничения по стилям, по большей части из соображений безопасности. Дизайнеры, например, Marcin Wichary заметили, что эти ограничения влияют на разборчивость ссылок, поэтому они предложили свои способы обхода этих запретов. CSS стандарты развиваются, и множество из этих проблем постепенно решаются, что улучшает юзабилити и внешний вид ссылок.

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

По умолчанию ссылки имеют синий цвет с подчеркиванием. Подчеркивание заходит на нижние выноски таких букв как j, что затрудняет чтение ссылок. Есть множество обходных путей решения этой проблемы, но теперь в CSS есть свой способ – свойство text–decoration–skip. У свойства очень много значений, но цель всегда одна – указать места, где подчеркивание не должно отрисовыватться.

Большинство дизайнеров заинтересует значение ink, решающее описанную выше проблему. Это значение обрывает подчеркивание в местах с нижними выносками букв. Эффект можете посмотреть в начале статьи.

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

В 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 есть прямой способ изменять цвет подчеркивания:

Поддержка у text–decoration–color почти такая же, как у text–decoration–skip: оба поддерживаются в Chrome Canary, но в просто Chrome и других браузерах нет.

Заключение

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

Источник: http://thenewcode.com/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree