Атрибут class тега <ins>
Описание
Атрибут class для тега <ins> позволяет назначать один или несколько CSS-классов для стилизации вставленного текста. Это стандартный HTML-атрибут, работающий одинаково для всех элементов.
<p>
Старая цена: <del>$100</del>
Новая цена: <ins class="price-change highlight">$80</ins>
</p>
<style>
.price-change {
color: green;
font-weight: bold;
}
.highlight {
background-color: #e6ffe6;
}
</style>
Основные возможности:
| Применение | Пример | Результат |
|---|---|---|
| Стилизация вставок | <ins class="new-content"> |
Визуальное выделение новых изменений |
| Анимация изменений | <ins class="fade-in"> |
Плавное появление нового контента |
| Группировка изменений | <ins class="version-2"> |
Отслеживание изменений по версиям |
Пример с анимацией:
<style>
.fade-insert {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; background-color: yellow; }
to { opacity: 1; background-color: transparent; }
}
</style>
<p>
Последнее обновление:
<ins class="fade-insert" datetime="2025-11-21">
Добавлены новые условия использования
</ins>
</p>
Рекомендации:
- Используйте семантические имена классов (например,
edit-commentвместоgreen-text) - Комбинируйте с атрибутами
datetimeиciteдля лучшего отслеживания изменений - Применяйте классы для визуального выделения важных правок
- Избегайте избыточного количества классов (1-2 обычно достаточно)
Пример с разными типами правок:
<style>
.correction { color: blue; }
.addition { color: green; }
.format-change { font-style: italic; }
</style>
<article>
<p>
<ins class="correction" datetime="2025-11-20">Исследования</ins>
показывают, что <ins class="addition">более 75%</ins> пользователей
<ins class="format-change">предпочитают</ins> темную тему.
</p>
</article>
Ограничения:
- Классы не влияют на семантическое значение элемента
- Не заменяют атрибуты
datetimeиcite - Избыточное использование может усложнить CSS
Пример в системе документооборота:
<style>
.editor-note { border-left: 3px solid #4CAF50; padding-left: 10px; }
.editor-john { background-color: #e6f7ff; }
.editor-emma { background-color: #fff2e6; }
</style>
<div class="contract">
<p>
Срок действия договора:
<ins class="editor-note editor-john" datetime="2025-11-20">
3 года с момента подписания
</ins>
</p>
</div>
Примечание: Атрибут class для тега <ins> особенно полезен в системах с совместным редактированием документов, где важно визуально отличать правки разных авторов или типов изменений.