Атрибут class тега <embed>
Описание
Атрибут class в теге <embed> позволяет назначить один или несколько CSS-классов для стилизации и управления встраиваемым контентом через CSS и JavaScript. Классы используются для группировки элементов и применения к ним общих стилей.
<!-- PDF с классами для стилизации -->
<embed src="document.pdf" type="application/pdf"
class="pdf-viewer responsive-embed">
<!-- Видео с классами для управления -->
<embed src="video.swf" type="application/x-shockwave-flash"
class="media-player flash-content" id="main-video">
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация | .pdf-viewer { border: 1px solid #ddd; } |
Визуальное оформление контейнера |
| Адаптивный дизайн | .responsive-embed { max-width: 100%; } |
Гибкие размеры для разных устройств |
| JavaScript-обработка | document.querySelector('.flash-content') |
Выбор элемента для управления |
Пример комплексного использования:
<style>
.media-container {
position: relative;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.flash-content {
background: #000;
}
.print-hide {
display: none;
}
</style>
<embed src="presentation.swf" type="application/x-shockwave-flash"
class="media-container flash-content print-hide"
width="800" height="600">
Рекомендации по именованию классов:
- Используйте осмысленные имена, отражающие назначение
- Придерживайтесь единого стиля именования (BEM, kebab-case)
- Избегайте слишком общих названий вроде "box" или "content"
- Для модификаторов используйте префиксы (media-container--large)
Особенности работы:
- Можно указывать несколько классов через пробел
- Классы наследуют CSS-свойства от родительских элементов
- Некоторые свойства могут не применяться к встроенному контенту
- Работает со всеми современными браузерами
Ограничения:
- Стили не влияют на внутреннее содержимое плагинов (например, сам PDF)
- Для некоторых типов контента требуется дополнительная обёртка
- В устаревших браузерах могут быть проблемы с каскадированием
Примечание: Хотя атрибут class универсален для всех HTML-элементов, его применение к <embed> часто ограничивается стилизацией только внешнего контейнера. Для сложных сценариев рекомендуется использовать дополнительный <div>-контейнер.