Спокойное подчёркивание текста ссылки
Иногда я не могу решить, как должна выглядеть идеальная ссылка в тексте. Она должна быть очевидной, но в то же время должна быть оформлена не настолько интенсивно, чтобы отвлекать от чтения текста. В целом мне нравится идея, что ссылки должны быть синими и подчёркнутыми, так как это наиболее близко к привычному виду ссылок по умолчанию, но я гибко подхожу к этому вопросу. Ссылки, имеющие «фирменный» цвет и отличающиеся от цвета текста, кажутся прекрасными, особенно если они тоже подчёркнуты.
Вот как выглядят ссылки с полностью стандартными css стилями:
Мне кажется, она выглядит несколько излишне насыщенной. Думаю, её можно улучшить, сохранив дух происходящего, но немного смягчив.
Отодвинем подчёркивание ссылки
Мне кажется, что текст ссылки станет лучше восприниматься, если немного отодвинуть подчёркивание от текста. Давайте установим шрифт system-ui и немного отодвинем подчёркивание ссылки:
a {
text-underline-offset: 2px;
}Я считаю, что это в целом лучше, независимо от font-family, line-height и т.д.
Добавим прозрачности к подчёркиванию ссылки
Это та часть, которая максимально смягчает визуальный стиль ссылки, но при этом она по-прежнему воспринимается как ссылка. Для этого у нас есть css свойство text-decoration-color, к которому можно просто применить смягчённый цвет напрямую. Но можно поступить немного умнее!
- Чтобы не задавать второй статичный цвет, давайте воспользуемся ключевым словом
currentColor. Таким образом, не придётся управлять ещё одним цветом в таблице стилей. - Воспользуемся этим преобразованием стилей для
:hoverи:focus, что может стать ещё одним сложным выбором!
Синтаксис относительного цвета был бы здесь очень кстати, но до полноценной кроссбраузерной поддержки пока не дотягивает, поэтому вместо него используем лучше поддерживаемую css функцию color-mix().
В качестве дополнительной хитрости применим полупрозрачное подчёркивание только тогда, когда ссылка «не» под курсором или в фокусе, то есть при наведении курсора или попадании в фокус этот стиль будет удалён:
a:not(:is(:hover, :focus)) {
text-decoration-color:
color-mix(in srgb, currentColor, transparent 75%);
}Раскрасим ссылки в разные цвета!
Использование ключевого слова currentColor означает, что какого бы цвета ни были ссылки, мы получим этот спокойный стиль, сопровождающий их, несмотря ни на что.
a:nth-of-type(1) {
color: #e53935;
}
a:nth-of-type(2) {
color: #4caf50;
}
a:nth-of-type(3) {
color: #ff6d00;
}Возможно, это достойный кандидат для таблицы стилей по умолчанию.
Доступно ли все это? Я думаю, что если цвет ссылки достаточно контрастен по отношению к фону, а стили клавиатурного фокуса убедительны, то всё будет в порядке. Но если я ошибаюсь, не стесняйтесь и поправьте меня в комментариях.