Атрибут media тега <source> — умова вибору джерела

Атрибут media визначає, які медіа-пристрої оптимізовані медіа ресурсу.

Браузери можуть використовувати цей атрибут, щоб визначити, чи може він відтворити файл чи ні. Якщо браузер не може відтворити файл, він може не завантажувати його.

Цей атрибут може приймати кілька значень.

Можливі оператори

And - Вказує на оператор AND
Not - Вказує на оператор NOT
, - Вказує на оператор OR

автор: с3с

Загальний опис

автор: NagarD

Нотатка: Цей атрибут є чисто консультативним.
автор: с3с

Синтаксис

<source media="value">

Атрибут media може отримувати 22 значень:

all

Без задання. Підходить для всіх пристроїв.

автор: с3с

aural

Синтезатори мови.

автор: с3с

braille

Пристрої зворотного зв’язку Брайля.

автор: с3с

handheld

Кишенькові пристрої (маленький екран, обмежена пропускна здатність).

автор: с3с

projection

Проектори.

автор: с3с

print

Для друку.

автор: с3с

screen

Для екранів комп’ютерів.

автор: с3с

tty

Телетайпи та аналогічні методи ЗМІ з використанням сітки символів із фіксованим кроком.

автор: с3с

tv

Для пристроїв телебачення.

автор: с3с

width

Визначає ширину цільової області відображення. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (min-width:500px)".

автор: с3с

height

Визначає висоту цільової області дисплея. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (max-height:700px)".

автор: с3с

device-width

Визначає ширину цільового відображення/паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (device-width:500px)".

автор: с3с

device-height

Вказує висоту цільового відображення / паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (device-height:500px)".

автор: с3с

orientation

Визначає орієнтацію цільового відображення/паперу. Можливі значення: "portrait" або "landscape" Приклад: media="all and (orientation: landscape)".

автор: с3с

aspect-ratio

Визначає співвідношення ширина/висота цільової області дисплея. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (aspect-ratio:16/9)".

автор: с3с

device-aspect-ratio

Задає співвідношення ширини_пристрою/висоти_пристрою цільового дисплея/паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (aspect-ratio:16/9)".

автор: с3с

color

Визначає кількість біт на колір цільового дисплея. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (color:3)".

автор: с3с

color-index

Визначає кількість кольорів цільового дисплея який він може обробляти. Можуть бути використані префікси «min-» та «max-». Приклад: "screen and (min-color-index:256)".

автор: с3с

monochrome

Задає кількусть бітів на піксель в буфері кадру монохромних зображень. Можуть бути використані префікси «min-» та «max-». Приклад: media="screen and (monochrome:2)"

автор: с3с

resolution

Визначає щільність пікселів (точок на дюйм або точок на сантиметр) цільового відображення/паперу. Можуть бути використані префікси «min-» та «max-». Приклад: media="print and (resolution:300dpi)"

автор: с3с

scan

Визначає метод сканування на екрані телевізора. Можливі значення: "progressive" і "interlace". Приклад: media="tv and (scan:interlace)".

автор: с3с

grid

Вказує, якщо пристрій виведення це сітка або растрове зображення. Можливі значення: "1" для сітки, і "0" в іншому випадку. Приклад: media="handheld and (grid:1)".

автор: с3с

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	3	15	3.1	15	12	9

Підтримка: мобільні переглядачі
Переглядач
	4.4	18	15	2

Приклади

+ запропонувати свій приклад у пісочниці

<h3>Приклад використання атрибуту media</h3> 

<picture>
   <source media="(min-width: 500px)" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='150'%3E%3Crect%20width='400'%20height='150'%20fill='%232a9d8f'/%3E%3Ctext%20x='200'%20y='83'%20font-family='sans-serif'%20font-size='26'%20text-anchor='middle'%20fill='%23ffffff'%3Eширокий%20екран%3C/text%3E%3C/svg%3E">
   <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='150'%3E%3Crect%20width='400'%20height='150'%20fill='%23e76f51'/%3E%3Ctext%20x='200'%20y='83'%20font-family='sans-serif'%20font-size='26'%20text-anchor='middle'%20fill='%23ffffff'%3Eвузький%20екран%3C/text%3E%3C/svg%3E" width="400" height="150" alt="Запасне зображення">
</picture>

<p>Ширше за 500px — одне джерело, вужче — інше. У <code>&lt;video&gt;</code> та <code>&lt;audio&gt;</code> цей атрибут не працює: там браузер обирає доріжку лише за <code>type</code>.</p>

автор: с3с

<h3>Приклад використання атрибуту media</h3> 

   <picture>
    <source srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%232a9d8f'/%3E%3Ctext%20x='200'%20y='108'%20font-family='sans-serif'%20font-size='26'%20text-anchor='middle'%20fill='%23ffffff'%3Eальбомна%20орієнтація%3C/text%3E%3C/svg%3E" media="screen and (orientation: landscape)">
    <source srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%23e76f51'/%3E%3Ctext%20x='200'%20y='108'%20font-family='sans-serif'%20font-size='26'%20text-anchor='middle'%20fill='%23ffffff'%3Eкнижкова%20орієнтація%3C/text%3E%3C/svg%3E" media="screen and (orientation: portrait)">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="400" height="200" alt="Запасне зображення">
  </picture>

автор: с3с

Дві однакові конструкції <picture>. У першої умова записана правильно: до 480px видно квадратну картинку з <img>, ширше — широку зі <source>; звузьте вікно й побачите перемикання без перезавантаження. У другої в media забуто дужки, тому джерело не спрацьовує ніколи, і завжди видно запасну картинку.

HTML

<p class="head">1. Правильна умова — картинка перемикається на 480px</p>
<picture>
    <source media="(min-width: 480px)" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='90'%3E%3Crect%20width='320'%20height='90'%20fill='%233a9a4f'/%3E%3Ctext%20x='16'%20y='58'%20font-family='sans-serif'%20font-size='34'%20fill='%23ffffff'%3E320%20x%2090%3C/text%3E%3C/svg%3E">
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Crect%20width='140'%20height='140'%20fill='%23f2b134'/%3E%3Ctext%20x='14'%20y='78'%20font-family='sans-serif'%20font-size='26'%20fill='%23ffffff'%3E140%20x%20140%3C/text%3E%3C/svg%3E" alt="широкий кадр на стільниці й квадратний на вузькому екрані">
</picture>

<p class="head">2. Забуто дужки — умова хибна, джерело не спрацює ніколи</p>
<picture>
    <source media="min-width: 480px" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='90'%3E%3Crect%20width='320'%20height='90'%20fill='%233a9a4f'/%3E%3Ctext%20x='16'%20y='58'%20font-family='sans-serif'%20font-size='34'%20fill='%23ffffff'%3E320%20x%2090%3C/text%3E%3C/svg%3E">
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Crect%20width='140'%20height='140'%20fill='%23f2b134'/%3E%3Ctext%20x='14'%20y='78'%20font-family='sans-serif'%20font-size='26'%20fill='%23ffffff'%3E140%20x%20140%3C/text%3E%3C/svg%3E" alt="запасний квадратний кадр">
</picture>

<p class="head">3. Що зараз бачить сама сторінка</p>
<p class="state">Вікно вужче за 480px — умова не справдилась.</p>
<p class="state wide">Вікно від 480px — умова справдилась, і перша картинка взяла джерело.</p>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

img {
    max-width: 100%;
    outline: 2px dashed #b9c6d8;
    outline-offset: 3px;
}

.state {
    max-width: 560px;
    padding: 6px 10px;
    border-left: 4px solid #b9c6d8;
    color: #5a6472;
}

.wide {
    display: none;
}

@media (min-width: 480px) {
    .state {
        display: none;
    }

    .state.wide {
        display: block;
        border-left-color: #3a9a4f;
        color: #1e5a2c;
    }
}

автор: NagarD

Різниця між HTML 4.01 та HTML5

Атрибут media тега <source> з'явився тільки в HTML5.

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.