Атрибут style тега <progress>
Описание
Атрибут style для тега <progress> позволяет задавать CSS-стили непосредственно для элемента прогресс-бара. Эти стили применяются только к конкретному элементу и имеют высокий приоритет.
<progress
value="65"
max="100"
style="width: 100%; height: 20px; border-radius: 10px;">
65%
</progress>
Ключевые особенности:
| Аспект | Описание |
|---|---|
| Приоритет | Стили имеют высокий приоритет (кроме !important) |
| Область действия | Только для текущего элемента |
| Синтаксис | CSS-правила через точку с запятой |
Стилизация частей прогресс-бара:
<style>
/* Для WebKit/Blink браузеров */
progress::-webkit-progress-bar {
background: #f0f0f0;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: linear-gradient(to right, #4CAF50, #8BC34A);
border-radius: 10px;
}
/* Для Firefox */
progress::-moz-progress-bar {
background: linear-gradient(to right, #4CAF50, #8BC34A);
}
</style>
<progress value="75" max="100" style="width: 100%;">75%</progress>
Рекомендации:
- Используйте для разовых стилевых правок
- Для сложной стилизации выносите CSS в отдельные правила
- Избегайте !important в inline-стилях
- Учитывайте кросс-браузерные различия
Ограничения:
- Нет поддержки медиа-запросов
- Нельзя использовать псевдоклассы
- Усложняет поддержку кода
Примечание: Для production-кода рекомендуется выносить стили в отдельные CSS-файлы или теги <style>. Inline-стили лучше использовать только для быстрого прототипирования или динамического изменения стилей через JavaScript.