Огляд
Медіа-запит @media дозволяє вказати тип носія, для якого буде застосовуватися вказаний стиль. Таблиця 1 містить перелік деяких з них.
| Тип | Опис |
|---|---|
| all | Всі типи. Це значення використовується за замовчуванням. |
| aural | Розмовні синтезатори та програми для відтворення тексту вслух. |
| braille | Пристрої на основі системи Брайля для сліпих. |
| handheld | Кишенькові комп'ютери та подібні пристрої. |
| Друкарські пристрої, наприклад, принтер. | |
| projection | Проектор. |
| screen | Екран монітора. |
| tv | Телевізор. |
Синтаксис
@media тип1 [, тип2] {
Опис стилю
}Значення
Після ключового слова @media йде один або декілька типів носія, перерахованих у табл. 1; якщо їх більше одного, то вони розділяються між собою комою. Після цього слідують обов'язкові фігурні дужки, всередині яких йде звичайний опис стилевих правил.
Приклад 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@media</title>
<style type="text/css">
@media screen { /* Стиль для відображення в браузері */
body {
font-family: Arial, Verdana, sans-serif; /* Рублені шрифти */
font-size: 0.9em; /* Розмір шрифту */
color: #000080; /* Колір тексту */
}
h1 {
background: #faf0e6; /* Колір фону під текстом */
border: 2px dashed #800000; /* Рамка навколо заголовка */
color: #a0522d; /* Колір тексту */
padding: 7px; /* Відступи навколо тексту */
}
h2 {
color: #556b2f; /* Колір тексту */
margin: 0; /* Позбавляємо відступи */
}
p {
margin-top: 0.5em; /* Відступ зверху */
}
}
@media print { /* Стиль для друку */
body {
font-family: Times, 'Times New Roman', serif; /* Шрифт з засічками */
}
h1, h2, p {
color: #000; /* Чорний колір тексту */
}
}
</style>
</head>
<body>
<h1>Метод ловлі лева в пустелі</h1>
<h2>Метод послідовного перебору</h2>
<p>Нехай лев має габаритні розміри LxWxH, де L — довжина лева від кінчика носа
до кисті хвоста, W — ширина лева, а H — його висота. Після чого пустельну місцевість розбиваємо на
ряд елементарних прямокутників, розміри яких співпадають з шириною і довжиною лева.
Враховуючи, що лев може знаходитися не строго на заданому відрізку, а одночасно на
двох з них, клітинку для ловлі слід робити збільшеної площі, а саме 2Lx2W.
Завдяки цьому ми уникнемо помилки, коли в клітинці опиниться вловлений лише половина
лева або, що гірше, лише його хвіст.</p>
<p>Далі послідовно накриваємо кожен з позначених прямокутників пустелі
клітинкою і перевіряємо, чи вловлений лев. Як тільки лев опиниться в клітинці, процедура
ловлі вважається завершеною.</p>
</body>
</html>У цьому прикладі вводяться два стилі — один для зміни вигляду елементів при їх звичайному відображенні в браузері, а другий — при друку сторінки. При цьому вигляд документа для різних носіїв може суттєво відрізнятися між собою.
Команда @media застосовується в основному для формування одного файлу стилів, який розділений на блоки за типами пристроїв. Іноді варто створити кілька різних CSS-файлів — один для друку, інший для відображення в браузері — і підключати їх до документу за потреби. У такому випадку слід скористатися тегом <link> з атрибутом media, значенням якого виступають ті самі типи, перераховані в табл. 1.
Приклад 2
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<link media="print, handheld" rel="stylesheet" href="print.css">
<link media="screen" rel="stylesheet" href="main.css">
</head>
<body>
<p>...</p>
</body>
</html>У цьому прикладі використовуються дві таблиці пов'язаних стилів, одна для відображення в браузері, а друга — для друку документа і його перегляду на КПК. Хоча на сторінку завантажуються одночасно два різних стилі, застосовуються вони лише для певних пристроїв.