html тег <a> атрибут media

Атрибут media визначає, які медіа-пристрої оптимізовані для документу. Цей атрибут використовується для вказівки того, що цільовий URL призначений для спеціальних пристроїв (наприклад, iPhone), мови або друкуючих пристроїв. Атрибут media може приймати кілька значень.

Використовується тільки з атрибутом href.

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

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

Нотатка

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

автор: NagarD

Синтаксис

<a media="value">

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

all

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

автор: NagarD

aural

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

автор: NagarD

braille

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

автор: NagarD

handheld

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

автор: NagarD

projection

Проектори.

автор: NagarD

print

Для друку.

автор: NagarD

screen

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

автор: NagarD

tty

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

автор: NagarD

tv

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

автор: NagarD

width

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

автор: NagarD

height

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

автор: NagarD

device-width

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

автор: NagarD

device-height

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

автор: NagarD

orientation

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

автор: NagarD

aspect-ratio

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

автор: NagarD

device-aspect-ratio

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

автор: NagarD

color

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

автор: NagarD

color-index

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

автор: NagarD

monochrome

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

автор: NagarD

resolution

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

автор: NagarD

scan

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

автор: NagarD

grid

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

автор: NagarD

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
Так Так Так Так Так

Мобільних переглядачів ще не додано.

Приклади

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

media на посиланні — підказка, для якого носія призначено документ за адресою (тут друк у 300dpi). Браузери поведінку не змінюють: посилання відкривається як звичайне, атрибут читають хіба інструменти.

<a href="/css/properties" media="print and (resolution:300dpi)">Версія довідника для друку</a>
автор: NagarD

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

Атрибут media для теґу <a> з’явився тільки у HTML5.

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

Коментарі

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

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

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

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

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

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

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

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

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

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

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.
Зворотний зв'язок
Вхід