Атрибут id тега <picture>
Описание
Атрибут id для тега <picture> задаёт уникальный идентификатор контейнера адаптивных изображений. Этот идентификатор может использоваться для CSS-стилизации, JavaScript-обращений или как якорная ссылка.
<picture id="main-hero-image">
<source media="(min-width: 1200px)" srcset="hero-large.jpg">
<source media="(min-width: 768px)" srcset="hero-medium.jpg">
<img src="hero-small.jpg" alt="Главное изображение">
</picture>
Основные характеристики:
| Аспект | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы (A-Za-z), может содержать цифры, дефисы и подчёркивания |
| Регистр | Чувствителен к регистру (mainImage ≠ mainimage) |
Использование с CSS:
<style>
#main-hero-image {
max-width: 100%;
margin: 0 auto;
display: block;
}
#main-hero-image img {
border-radius: 8px;
}
</style>
Использование с JavaScript:
<script>
const heroImage = document.getElementById('main-hero-image');
// Изменение источника при клике
heroImage.addEventListener('click', function() {
this.querySelector('img').src = 'new-hero-image.jpg';
});
</script>
Рекомендации:
- Используйте семантичные имена (например, "product-gallery-main" вместо "pic1")
- Избегайте избыточных префиксов (не нужно "picture-main-hero", достаточно "main-hero")
- Для стилизации предпочтительнее использовать классы
- Храните согласованность именования в проекте
Особенности работы:
- Применяется ко всему контейнеру
<picture> - Не заменяет id для вложенного
<img> - Позволяет управлять всей группой источников как единым элементом
Пример с динамической заменой изображений:
<picture id="interactive-gallery">
<source id="webp-source" type="image/webp">
<img id="fallback-img" alt="Интерактивная галерея">
</picture>
<script>
function updateGallery(imageName) {
const gallery = document.getElementById('interactive-gallery');
gallery.querySelector('#webp-source').srcset = `${imageName}.webp`;
gallery.querySelector('#fallback-img').src = `${imageName}.jpg`;
}
</script>
Примечание: Хотя атрибут id полезен для управления элементами <picture>, помните о его глобальной уникальности. Для повторяющихся компонентов (например, галерей изображений) лучше использовать классы в сочетании с data-атрибутами.