/ 

Адекватное подчеркивание ссылок

Стандартное подчеркивание — ад перфекциониста. Оно нагло перекрывает висячие символы в тексте, его становится сложнее читать, и это режет глаза.

Для решения этой проблемы есть разные способы: SASS-миксины и JS-библиотеки. Эти методы не лишины недостатков, для миксинов нужен был однородный фон, а для библиотеки сами по себе большие и неудобные.

Благо ребята из w3с стандартизировали свойство text-decoration-skip, указав которое, можно заставить подчеркивание прерываться на висячих символах. Всего пара строчек, и моментально ваш сайт станет чуточку удобнее и лучше.

a {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip: ink;
}

Демка и поддержка бразузерами.

Данные о свойстве text-decoration-skip c сайта caniuse.com
Данные о свойстве text-decoration-skip c сайта caniuse.com

Примечания

  • В сафари на macOS подчеркивание выглядит хорошо и без text-decoration-skip
  • В хроме можно установить разрешение User JavaScript and CSS и добавить туда:
      a {
          -webkit-text-decoration-skip: ink;
          text-decoration-skip: ink;
      }
    

    Это исправит подчеркивание на всех сайтах.

Если вам нравятся мои заметки, можете подписаться на email-рассылку новых заметок. Раз в неделю, без спама.
Фронтенд

За и против. Оформление незагруженных изображений.

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

Фронтенд

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Фронтенд

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии

Фронтенд

CSS. Выравнивание блочного элемента по правому краю.

Способ горизонтального выравнивания по центру и правому краю для блочных элементов через CSS