Правило @media дозволяє вказати тип носія, для якого застосовуватиметься вказаний стиль. Як типи виступають різні пристрої, наприклад, принтер, монітор та ін. У табл. 1 перераховані основні з них.
| Тип | Опис | ||
|---|---|---|---|
| all | Всі типи . Це значення використовується за замовчуванням. | Принтери та інші принтери. | |
| screen | Екран монітора. | ||
| speech | Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери. class="data"> | ||
| embossed | Принтери, які використовують для друку систему Брайля.> | handheld | Налагоджені комп'ютери та аналогічні апарати. |
| projection | Проектори. | ||
| tty | Пристрої з фіксованим розміром символів (телетайпи, термінали, пристрої з обмеженнями дисплея). | ||
| tv | Телевізори. |
Синтаксис
<code>@media <тип носія> { <стильові правила> } Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
Після ключового слова @media йде один або кілька типів носія, перерахованих у табл. 1; якщо їх більше одного, то вони поділяються між собою комою. Після цього слідують обов'язкові фігурні дужки, всередині яких пишуться стильові правила.
Приклад
<code data-language="html"><!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>У цьому прикладі вводиться два стилі — один для зміни виду елементів при їхньому звичайному відображенні в браузері, а другий — під час виведення сторінки на друк. При цьому вигляд документа для різних носіїв може сильно різнитися між собою, наприклад, як показано на рис. 1 та рис. 2.
Мал. 1. Сторінка для відображення у вікні браузера
Мал. 2. Сторінка, призначена для друку
Переглянути документ, у якого CSS встановлено як тип print, можна, якщо роздрукувати певну сторінку. Або піти на хитрість і тимчасово замінити слово print на screen, щоб відобразити результат у браузері. Саме так було отримано рис. 2.
Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки типу пристроїв. Іноді має сенс створити кілька різних CSS-файлів — один для друку, інший для відображення у браузері — і підключати їх до документа за необхідності. У такому разі слід скористатися елементом <link> з атрибутом media, значенням якого виступають ті ж типи, перераховані в табл. 1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>@media</title> <link media="print" rel="stylesheet" href="print.css"> <link media="screen" rel="stylesheet" href="main.css"> </head> <body> <p>...</p> </body> </html>
У цьому прикладі використовуються дві таблиці стилів, одна для відображення в браузері, а друга — для друку документа. Хоча на сторінку завантажуються одночасно два різні стилі, застосовуються вони тільки для певних пристроїв.