Атрибут compact тега <dl>
Описание
Атрибут compact в теге <dl> является устаревшим в HTML5. Ранее он использовался для визуального уплотнения списка определений, уменьшая межстрочные интервалы между элементами <dt> и <dd>.
Важно: Этот атрибут больше не поддерживается в HTML5. Вместо него следует использовать CSS-свойства для управления отступами и межстрочными интервалами.
Исторический пример:
<!-- Устаревший синтаксис -->
<dl compact>
<dt>HTML</dt>
<dd>Язык разметки</dd>
<dt>CSS</dt>
<dd>Таблицы стилей</dd>
</dl>
Современная CSS-альтернатива:
<style>
.compact-dl {
line-height: 1.2;
}
.compact-dl dt,
.compact-dl dd {
margin-top: 0;
margin-bottom: 0.2em;
display: inline;
}
.compact-dl dt:after {
content: ": ";
}
.compact-dl dd:after {
content: "\A";
white-space: pre;
}
</style>
<dl class="compact-dl">
<dt>JavaScript</dt>
<dd>Язык программирования</dd>
<dt>API</dt>
<dd>Интерфейс программирования</dd>
</dl>
Сравнение подходов:
| Критерий | Атрибут compact | CSS-решение |
|---|---|---|
| Поддержка | Устарело в HTML5 | Полностью поддерживается |
| Гибкость | Фиксированное оформление | Полный контроль над стилями |
| Доступность | Могло ухудшать читаемость | Можно адаптировать под нужды |
Рекомендуемые CSS-свойства:
line-height- для управления межстрочным интерваломmargin- для контроля отступовdisplay: inline- для inline-отображения терминов и определений:after- для добавления разделителей
Пример с адаптивным compact-режимом:
<style>
.responsive-dl dt,
.responsive-dl dd {
margin: 0.3em 0;
}
@media (max-width: 600px) {
.responsive-dl.compact-mode dt,
.responsive-dl.compact-mode dd {
margin: 0.1em 0;
display: inline;
}
.responsive-dl.compact-mode dt:after {
content: ": ";
}
}
</style>
<dl class="responsive-dl compact-mode">
<dt>DOM</dt>
<dd>Объектная модель документа</dd>
<dt>AJAX</dt>
<dd>Асинхронные запросы</dd>
</dl>
Почему атрибут compact устарел:
- Нарушал принцип разделения структуры и оформления
- Имел ограниченные возможности настройки
- Не поддерживал современные техники адаптивного дизайна
- Мог ухудшать доступность и читаемость контента
Примечание: Хотя некоторые браузеры могут до сих пор поддерживать атрибут compact для обратной совместимости, его использование в новых проектах не рекомендуется. Для профессиональной верстки всегда используйте CSS-техники управления отступами и плотностью расположения элементов.