| Kosten | Четверг, 16 Января 2020, 20:49 | Сообщение 1 |
| Частью любого веб-дизайна является стилизация ссылок, так, чтоб сделать красивое оформление при наведении клика. Одна из целей станет хороший уровень доступности, где как правило, рекомендуется иметь подчеркивания, потому что это облегчает поиск ссылок. Задействуем стандарты, где не будет каких-либо хитрости CSS, как border или box-shadow, чтобы подчеркнуть стиль.
Есть два свойства CSS, которые вы можете использовать:
1. ext-decoration-color
2. text-decoration-skip
Где при помощи text-decoration-color можно изменить цвет подчеркивания.
А также text-decoration-skip определяет как отображаются подчеркивания.
Но эти два свойства еще не получили большой популярности, так как на это есть очевидная причина. Да, вы угадали, они не поддерживаются не во всех браузерах, а только на обновленных версиях.
Ниже приведен пример CSS, который вы можете использовать для подчеркивания и очистки другого цвета. Где префикс -webkit требуется для браузера Safari.
Код a {
color: #475a8a;
text-decoration: underline;
-webkit-text-decoration-color: #9bb7b1;
text-decoration-color: #9bb7b1;
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink;
}
a:hover {
-webkit-text-decoration-color: #475a8a;
text-decoration-color: #475a8a;
}
Он принимает различия браузеров, предоставляя запасные варианты для них, которые не поддерживают определенные функции. И это уже встроено в CSS, где если свойство CSS неизвестно, то браузер просто проигнорирует его. Но будущие версии могут начать поддерживать, где таким образом, вы получаете автоматическое обновление, ничего не делая.
Демонстрация
Если различия в браузере неприемлемы, вы можете использовать box-shadow и text-shadow для создания более согласованного вида. Но имейте в виду, что CSS text-shadow может снизить производительность.
| | Страна: (RU) |
| |
