Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0 + | 1.0 + | 9.2 + | 1.3 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
Значення за умовчанням | all |
---|---|
Посилання на специфікацію | http://www.w3.org/TR/CSS21/media.html#at-media-rule |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Правило @media дозволяє вказати тип носія, для якого буде застосовуватися зазначений стиль. Як типів виступають різні пристрої, наприклад, принтер, КПК, монітор та ін. В табл. 1 перераховані деякі з них.
Тип | Опис |
---|---|
all | Всі типи. Це значення використовується за умовчанням. |
aural | Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери. |
braille | Пристрої, засновані на системі Брайля, які призначені для сліпих людей. |
handheld | наладонних комп'ютери і аналогічні їм апарати. |
Друкуючі пристрої на кшталт принтера. | |
projection | Проектор. |
screen | Екран монітора. |
tv | Телевізор. |
Синтаксис
@media тип1 [, тип2] {Опис стилю}
Значення
Після ключового слова @media йде один або кілька типів носія, перерахованих в табл. 1; якщо їх більше одного, то вони поділяються між собою комою. Після чого йдуть обов'язкові фігурні дужки, всередині яких йде звичайне опис стильових правил.
Приклад 1
XHTML 1.0 CSS2.1 IE Cr Op Sa Fx
<!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.
Переглянути документ, у якого CSS встановлений як тип print можна, якщо роздрукувати певну сторінку. Або піти на хитрість і тимчасово замінити слово print на screen, щоб відобразити підсумок у браузері. Саме так було отримано рис. 2.
Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки по типу пристроїв. Іноді ж має сенс створити кілька різних CSS-файлів — один для друку, інший для відображення в браузері — і підключати їх до документа в міру необхідності. У подібному випадку варто скористатися тегом <link> з атрибутом media, значенням якого виступають ті ж типи, перераховані в табл. 1.
Приклад 2
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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>
В даному прикладі використовуються дві таблиці пов'язаних стилів, одна для відображення в браузері, а друга — для друку документа і його перегляді на КПК. Хоча на сторінку завантажуються одночасно два різні стилі, застосовуються вони тільки для певних пристроїв.