Атрибут class тега <marquee>
Описание
Атрибут class для тега <marquee> позволяет назначать CSS-классы для стилизации бегущей строки. Хотя сам тег <marquee> устарел, классы остаются стандартным способом управления внешним видом элементов.
<marquee class="news-ticker primary">
Важные новости...
</marquee>
<style>
.news-ticker {
background-color: #f8f9fa;
padding: 10px;
font-size: 1.2em;
}
.primary {
color: #007bff;
border-bottom: 2px solid #007bff;
}
</style>
Современная альтернатива:
<div class="modern-ticker news-ticker primary">
<div class="ticker-content">Актуальные обновления...</div>
</div>
<style>
.modern-ticker {
overflow: hidden;
position: relative;
}
.ticker-content {
animation: scroll 15s linear infinite;
}
</style>
Рекомендации по использованию классов:
- Используйте осмысленные имена классов (БЭМ, OOCSS)
- Разделяйте стили анимации и оформления
- Избегайте избыточной вложенности селекторов
- Для состояний используйте модификаторы
Пример с модификаторами:
<style>
.ticker {
/* Базовые стили */
padding: 8px 0;
}
.ticker--speed-fast {
animation-duration: 5s;
}
.ticker--speed-slow {
animation-duration: 20s;
}
.ticker--paused {
animation-play-state: paused;
}
</style>
<div class="modern-ticker ticker ticker--speed-fast">
<div class="ticker-content">Быстрая прокрутка</div>
</div>
Ограничения устаревшего подхода:
- Тег <marquee> плохо сочетается с современными CSS-методологиями
- Ограниченные возможности анимации
- Проблемы с производительностью
- Отсутствие контроля через CSS-классы
Примечание: Для профессиональной реализации бегущих строк используйте CSS-анимации с семантической HTML-разметкой. Это обеспечит лучшую производительность, доступность и контроль стилизации через классы.