Используем text-shadow вместо font-weight:bold

Когда используем свойство font-weight:bold для состояния :hover ссылки, ширина элемента увеличивается и строка получает небольшое смещение.

 

Для предотвращения скачка как показано на картинке, мы можем использовать свойство text-shadow вместо font-weight: bold

 

a:hover { text-shadow: 1px 0 0 currentColor;}

 

 

Это работает во всех браузерах, кроме (не трудно догадаться) Internet Explorer. Как нам решить эту проблему? Мы можем создать правило, при котором будут использоваться свойства, которые поддерживаются используемым браузером.

 

CSS Feature Queries

 

Можно использовать @supports для браузеров, которые совместимы с CSS Feature Queries и text-shadow. Пример:

 

a:hover { font-weight: bold;}
@supports (text-shadow: 1px 0 0 #000) { a:hover { font-weight: normal; text-shadow: 1px 0 0 currentColor; } }

 

 

Я предпочитаю использовать @supports так-как это свойство современно и намного превосходит старые методы, но однако не работает в IE11.