Широке розвиток різних платформ і пристроїв змушує розробників робити під них спеціальні версії сайтів, що досить трудомістким і проблематично. Разом з тим, часи і потреби змінюються, і створення сайту для різних пристроїв є неминучим і необхідною ланкою його розвитку. З урахуванням цього в CSS введено поняття типу носія, коли стиль застосовується тільки для певного пристрою. У табл. 4.1 перераховані деякі типи носіїв.
| Тип | Опис |
|---|---|
| all | Всі типи. Це значення використовується за умовчанням. |
| aural | Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери. |
| braille | Пристрої, засновані на системі Брайля, які призначені для сліпих людей. |
| handheld | наладонних комп'ютери і аналогічні їм апарати. |
| Друкуючі пристрої на кшталт принтера. | |
| projection | Проектор. |
| screen | Екран монітора. |
| tv | Телевізор. |
В CSS для вказівки типу носіїв застосовуються команди @import і @media, за допомогою яких можна визначити стиль для елементів залежно від того, виводиться документ на екран або на принтер.
Ключові слова @media і @ import відносяться до пов-правилам. Така назва походить від назви символу @ — « пов » ;, з якого і починаються ці ключові слова. В рунеті для позначення символу @ застосовується усталений термін « собака » ;. Тільки ось використовувати вираз « собаче правило » язик не повертається.
При імпортуванні стилю через команду @ import тип носія вказується після адреси файлу. При цьому допускається задавати відразу декілька типів, згадуючи їх через кому, як показано в прикладі 4.1.
Приклад 4.1. Імпорт стильового файлу
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Імпорт стилю </title> <style> @import" /style/main.css" screen; /* Стиль для виведення результату на монітор */ @import" /style/smart.css" print, handheld; /* Стиль для друку і смартфона */ </style> </head> <body> <p> ... </p> </body> </html>
В даному прикладі імпортується два файли — main.css призначений для зміни виду документа при його перегляді на екрані монітора, і smart.css — при друку сторінки і відображенні на смартфоні.
Браузер Internet Explorer до сьомої версії включно не підтримує типи носіїв при імпорті стильового файлу.
Команда @media дозволяє вказати тип носія для глобальних або пов'язаних стилів і в загальному випадку має такий синтаксис.
@media тип носія 1 {Опис стилю для типу носія 1} @media тип носія 2 {Опис стилю для типу носія 2} Після ключового слова @media йде один або кілька типів носія, перерахованих в табл. 4.1, якщо їх більше одного, то вони поділяються між собою комою. Після чого йдуть обов'язкові фігурні дужки, всередині яких йде звичайне опис стильових правил. У прикладі 4.2 показано, як задати різний стиль для друку та відображення на моніторі.
Приклад 4.2. Стилі для різних типів носіїв
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Типи носіїв </title>
<style>
@media screen { /* Стиль для відображення в браузері */ BODY {font-family: Arial, Verdana, sans-serif; /* Рубаний шрифт */ font-size: 90%; /* Розмір шрифту */ color:#000080; /* Колір тексту */ } h1 {background: #faf0e6; /* Колір фону */ border: 2px dashed maroon; /* Рамка навколо заголовка */ 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: black; /* Чорний колір тексту */ }} </style>
</head>
<body>
<h1>
Як спіймати лева в пустелі </h1>
<h2>
Метод випадкових чисел </h2>
<p>
Розділимо пустелю на ряд елементарних прямокутників, розмір яких збігається з розміром клітини для лева. Після чого перебираємо отримані прямокутники, кожен раз вибираючи задану область випадковим чином. Якщо в даній області виявиться лев, то ми зловимо його, накривши кліткою. </p>
</body>
</html>
В даному прикладі вводиться два стилі — один для зміни виду елементів при їх звичайному відображенні в браузері, а другий — при виведенні сторінки на друк. При цьому вигляд документа для різних носіїв може сильно відрізнятися між собою, наприклад, як це показано на рис. 4.1 і рис. 4.2.
Переглянути документ, у якого CSS встановлений як тип print можна, якщо роздрукувати певну сторінку або скориставшись попереднім переглядом в браузері ( ). Або піти на хитрість і тимчасово замінити print на screen, щоб відобразити підсумок у браузері. Саме так було отримано рис. 4.2.
Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки по типу пристроїв. Іноді ж має сенс створити кілька різних CSS-файлів — один для друку, інший для відображення в браузері — і підключати їх до документа в міру необхідності. У подібному випадку варто скористатися тегом <link> з атрибутом media, значенням якого виступають усі ті ж типи, перераховані в табл. 4.1.
У прикладі 4.3 показано, як створювати посилання на CSS-файли, які призначені для різних типів носіїв.
Приклад 4.3. Підключення стилів для різних носіїв
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Різні носії </title> <link media="print, handheld" rel="stylesheet" href="print.css"> <link media="screen" rel="stylesheet" href="main.css"> </head> <body> <p> ... </p> </body> </html>
В даному прикладі використовуються дві таблиці пов'язаних стилів, одна для відображення в браузері, а друга — для друку документа і його перегляді на смартфоні. Хоча на сторінку завантажуються одночасно два різні стилі, застосовуються вони тільки для певних пристроїв.
Аналогічно можна використовувати і глобальні стилі, додаючи атрибут media до тегу <style> (приклад 4.4).
Приклад 4.4. Стиль для смартфона
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Різні носії </title>
<style media="handheld">
BODY {width: 320px; /* Ширина сторінки */ } </style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p>
</body>
</html>
В даному прикладі ширина для пристроїв типу handheld обмежена розміром 320 пікселів.
Питання для перевірки
1. Паша вирішив для свого сайту зробити версію для друку. Яку рядок йому варто використовувати в коді?
- <link media="printer" rel="stylesheet" href="print.css">
- @import" palm.css" print;
- @import url (" printer.css") printer;
- @media" palm.css" print;
- <style media="print">
2. В який момент підключається стиль для принтера?
- Під час друку документа.
- Відразу після завантаження сторінки.
- Як тільки браузер знайде в коді відповідний стиль або посилання на стильовий файл.
- Після виявлення комп'ютером принтера.
- Після того, як принтер повідомить браузеру про своє наявності.
3. В якому рядку коду міститься помилка?
@media hanheld {BODY {color:#080; background: #ffe;} - @media hanheld {
- BODY {
- color:#080;
- background: #ffe;
- }
Відповіді
1. @import" palm.css" print;
2. Під час друку документа.
3. }