Атрибут high тега <meter>
Описание
Атрибут high для тега <meter> определяет пороговое значение, выше которого текущий показатель считается высоким. Вместе с атрибутом low формирует три зоны отображения (низкая, нормальная, высокая).
<meter value="85" min="0" max="100" low="30" high="80">
Загрузка CPU: 85% (высокая)
</meter>
Логика работы high и low:
| Соотношение значений | Визуальное отображение | Семантическое значение |
|---|---|---|
| value ≤ low | ● Красный | Критически низкий уровень |
| low < value < high | ● Зеленый | Нормальный диапазон |
| value ≥ high | ● Желтый | Превышение нормального уровня |
Практические примеры:
<!-- Мониторинг температуры -->
<meter value="38" min="0" max="50" low="10" high="35" optimum="22">
Температура: 38°C (перегрев)
</meter>
<!-- Уровень заполнения хранилища -->
<meter value="87" min="0" max="100" low="20" high="85">
87% заполнено (требуется очистка)
</meter>
Стилизация зон в CSS:
<style>
meter {
width: 100%;
height: 25px;
margin: 10px 0;
}
/* Оптимальная зона (зеленая) */
meter::-webkit-meter-optimum-value {
background: #28a745;
}
/* Высокая зона (желтая) */
meter::-webkit-meter-suboptimum-value {
background: #ffc107;
}
/* Низкая зона (красная) */
meter::-webkit-meter-even-less-good-value {
background: #dc3545;
}
</style>
<meter value="90" min="0" max="100" low="30" high="80">
Высокая загрузка (90%)
</meter>
Рекомендации по настройке:
- Устанавливайте
highмежду 60-80% отmaxдля большинства случаев - Сочетайте с
optimumдля указания идеального значения - Для критических систем делайте запас между
highиmax - Всегда добавляйте текстовое описание состояния
Динамическое обновление с JavaScript:
<meter id="memoryMeter" min="0" max="100" low="20" high="85"></meter>
<button onclick="updateMemory(15)">Низкая
<button onclick="updateMemory(50)">Норма
<button onclick="updateMemory(90)">Высокая
<script>
function updateMemory(usage) {
const meter = document.getElementById('memoryMeter');
meter.value = usage;
let status = 'нормальная';
if (usage <= meter.low) status = 'низкая';
if (usage >= meter.high) status = 'высокая';
meter.textContent = `Использование памяти: ${usage}% (${status})`;
}
</script>
Примечание: Для комплексных систем мониторинга рекомендуется использовать специализированные библиотеки визуализации данных (Chart.js, D3.js), которые предоставляют больше возможностей кастомизации и интерактивности.