Атрибут media
Синтаксис
(X)HTML
<style type="..." media="[значение]"> ... </style>
Описание
Атрибут / параметр media (от англ. "media" ‒ «медиа, носитель») указывает типы или характеристики устройств, при которых могут быть применены стили.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | 14.2.3 Header style information: the STYLE element media = media-descriptors [CI]... DTD: Transitional
Strict
Frameset
|
| 5.0 | 4.2.6 The style element The media attribute... |
| 5.1 | 4.2.6. The style element The media attribute... |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
| 1.1 | Extensible HyperText Markup Language |
Значения
В качестве значения данного параметра указывается либо единственный дескриптор устройства (ресурс в данном случае будет предназначаться только для одного типа устройств) либо разделённый запятыми список дескрипторов устройств (ресурс в данном случае будет предназначаться для группы указанных типов устройств).
- all
- Предназначен для всех устройств.
- aural
- Предназначен для синтезаторов речи.
- braille
- Предназначен для тактильных устройств обратной связи Брайля.
- handheld
- Предназначен для портативных устройств (маленький экран, монохромный, растровая графика, ограниченная пропускная способность).
- Предназначен для страничных, непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра перед печатью.
- projection
- Предназначен для проекторов.
- screen
- Предназначен для не выгружаемых компьютерных экранов.
- tty
- Предназначен для устройств с фиксированным шагом сетки символов, таких как телетайп, терминалы или портативные устройства с ограниченными возможностями отображения.
- tv
- Предназначен для устройств вроде телевизора (низкое разрешение, цветной, ограниченные возможности прокрутки).
Значение по умолчанию: «screen».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр media (Элемент style)</title>
<style type="text/css" media="screen">
.pineberryImg {
width: 45%;
margin-left: 10px;
float: right;
}
</style>
<style type="text/css" media="print">
.pineberryImg {
width: 60%;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<h1>Пример использования атрибута "media"</h1>
<img src="/examples/images/pineberry/img360.jpg" class="pineberryImg" alt="Клубника «пайнберри»">
<blockquote cite="https://ru.wikipedia.org/wiki/Сорта_земляники_садовой">«Пайнберри» ('Pineberry') ‒ гибрид чилийской земляники, произрастающей в Южной Америке, и виргинской земляники, произрастающей в Северной Америке. Мякоть плода может варьироваться от белого до оранжевого цвета, имеет сильный аромат и вкус ананаса. Незрелые ягоды имеют зелёный цвет, затем белеют. Когда на ягодах появляется множество тёмно-красных семян, они считаются спелыми.</blockquote>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр media (Элемент style)</title>
<style type="text/css" media="screen">
.pineberryImg {
width: 45%;
margin-left: 10px;
float: right;
}
</style>
<style type="text/css" media="print">
.pineberryImg {
width: 60%;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<h1>Пример использования атрибута "media"</h1>
<img src="/examples/images/pineberry/img360.jpg" class="pineberryImg" alt="Клубника «пайнберри»">
<blockquote cite="https://ru.wikipedia.org/wiki/Сорта_земляники_садовой">«Пайнберри» ('Pineberry') ‒ гибрид чилийской земляники, произрастающей в Южной Америке, и виргинской земляники, произрастающей в Северной Америке. Мякоть плода может варьироваться от белого до оранжевого цвета, имеет сильный аромат и вкус ананаса. Незрелые ягоды имеют зелёный цвет, затем белеют. Когда на ягодах появляется множество тёмно-красных семян, они считаются спелыми.</blockquote>
</body>
</html>
Параметр media (Элемент style)