Атрибут class тега <meter>
Описание
Атрибут class задаёт один или несколько классов для элемента <meter>, позволяя применять к нему CSS-стили и JavaScript-селекторы. Классы разделяются пробелами.
<meter
class="battery-level warning"
min="0"
max="100"
value="35">
</meter>
Основные возможности:
| Применение | Пример |
|---|---|
| CSS-стилизация | .battery-level { width: 200px; } |
| JavaScript-выборка | document.querySelector('.warning') |
| Состояния элемента | .battery-level.low { color: red; } |
Пример с CSS-стилизацией:
<style>
.performance-meter {
width: 300px;
height: 20px;
margin: 10px 0;
}
.performance-meter.critical {
accent-color: #dc3545;
}
.performance-meter.warning {
accent-color: #ffc107;
}
.performance-meter.normal {
accent-color: #28a745;
}
</style>
<meter class="performance-meter critical" min="0" max="100" value="95"></meter>
<meter class="performance-meter warning" min="0" max="100" value="65"></meter>
<meter class="performance-meter normal" min="0" max="100" value="35"></meter>
Рекомендации по именованию классов:
- Используйте осмысленные имена, отражающие назначение элемента
- Придерживайтесь единого стиля именования (BEM, kebab-case и др.)
- Избегайте слишком общих имен (like "box", "item")
- Для модификаторов используйте префиксы (like "--active", "is-visible")
Пример с BEM-нотацией:
<style>
.meter--storage {
--low-color: #ff6b6b;
--optimum-color: #51cf66;
height: 25px;
}
.meter--storage--low {
accent-color: var(--low-color);
}
</style>
<meter class="meter--storage meter--storage--low" min="0" max="500" value="450"></meter>
Ограничения и совместимость:
- Поддерживается всеми браузерами без исключений
- Максимальная длина значения атрибута - не менее 65536 символов
- Чувствителен к регистру в CSS и JavaScript
- Не влияет на семантику элемента
Примечание: Атрибут class является основным инструментом для стилизации элементов <meter>. Для сложных индикаторов рассмотрите возможность добавления/удаления классов через JavaScript в зависимости от значения (low, optimum, high).