Атрибут media
Синтаксис
HTML
<picture>
...
<source srcset="..." media="[значение]">
...
<img src="..." alt="...">
</picture>
Описание
Атрибут / параметр media (от англ. "media" ‒ «медиа, носитель») указывает типы или характеристики устройств, при которых может быть использован альтернативный источник изображения.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 5.0 | |
| 5.1 | 4.7.4. The source element when used with the picture element The media content... |
| XHTML | |
| 1.0 | |
| 1.1 | |
Дополнительные ресурсы:
| Сайт | Тема |
|---|---|
| w3.org | CSS 3: Медиа Запросы |
Значения
В качестве значения данного параметра указывается либо единственный дескриптор устройства (ресурс в данном случае будет предназначаться только для одного типа устройств) либо разделённый запятыми список дескрипторов устройств (ресурс в данном случае будет предназначаться для группы указанных типов устройств).
- all
- Предназначен для всех устройств.
- aural
- Предназначен для синтезаторов речи.
- braille
- Предназначен для тактильных устройств обратной связи Брайля.
- handheld
- Предназначен для портативных устройств (маленький экран, монохромный, растровая графика, ограниченная пропускная способность).
- Предназначен для страничных, непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра перед печатью.
- projection
- Предназначен для проекторов.
- screen
- Предназначен для не выгружаемых компьютерных экранов.
- tty
- Предназначен для устройств с фиксированным шагом сетки символов, таких как телетайп, терминалы или портативные устройства с ограниченными возможностями отображения.
- tv
- Предназначен для устройств вроде телевизора (низкое разрешение, цветной, ограниченные возможности прокрутки).
Значение по умолчанию: «screen».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр media (Элемент source)</title>
</head>
<body>
<h1>Пример использования атрибута "media"</h1>
<picture>
<source srcset="/examples/images/pineberry/480.png" type="image/png" media="print">
<source srcset="/examples/images/pineberry/720.png" type="image/png" media="(max-width: 1280px)">
<source srcset="/examples/images/pineberry/1080.png" type="image/png" media="(max-width: 1920px)">
<img src="/examples/images/pineberry/360.png" alt="Клубника «пайнберри»">
</picture>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр media (Элемент source)</title>
</head>
<body>
<h1>Пример использования атрибута "media"</h1>
<picture>
<source srcset="/examples/images/pineberry/480.png" type="image/png" media="print">
<source srcset="/examples/images/pineberry/720.png" type="image/png" media="(max-width: 1280px)">
<source srcset="/examples/images/pineberry/1080.png" type="image/png" media="(max-width: 1920px)">
<img src="/examples/images/pineberry/360.png" alt="Клубника «пайнберри»">
</picture>
</body>
</html>
Параметр media (Элемент source)