Вернуться к HTML

Тег <abbr>

Тег <abbr> (от англ. abbreviation – аббревиатура) используется для обозначения сокращений и акронимов (например, HTML, CSS, WWW). В отличие от устаревшего <acronym>, он поддерживается всеми современными браузерами.

🌐 Совместимость <abbr> с браузерами

Браузер Поддержка <abbr> Особенности
Chrome ✅ Да Полная поддержка
Firefox ✅ Да Полная поддержка
Safari ✅ Да Полная поддержка
Edge ✅ Да Полная поддержка
Opera ✅ Да Полная поддержка
IE ✅ Да (с IE8+) В IE7 и ниже не поддерживается стилизация через CSS, но текст отображается

💡 Как правильно использовать <abbr>

Рекомендуется добавлять атрибут title, чтобы пояснять значение сокращения при наведении: 

<abbr title="HyperText Markup Language">HTML</abbr>

Пример отображения:

  • В современных браузерах при наведении курсора появится подсказка с расшифровкой.

🎨 Стилизация <abbr>

Можно улучшить визуальное отображение с помощью CSS: 

abbr[title] {
  cursor: help;                /* Курсор "вопросительный знак" */
  text-decoration: underline dotted; /* Подчёркивание пунктиром */
  border-bottom: none;         /* Убирает стандартное подчёркивание (если есть) */
}

⚠️ Проблемы в старых браузерах

  1. Internet Explorer 7 и ниже:

    • Не поддерживает стилизацию <abbr> через CSS.
    • Решение: Используйте полифил (например, скрипт html5shiv).

  2. Старые версии Safari (до 4.0):

    • Могли некорректно обрабатывать <abbr>, но сейчас это неактуально.

📌 Вывод

  • <abbr> работает во всех современных браузерах.
  • Для IE7 и ниже нужен полифил, если важна стилизация.
  • Всегда используйте title для доступности и SEO.

Лучшая практика: всегда заменяйте <acronym> на <abbr> – это соответствует стандартам HTML5. 🚀