@media
Оновлено: 09.01.2023
@media
Правило @media дає змогу вказати тип носія, для якого застосовуватиметься зазначений стиль. Як типи виступають різні пристрої, наприклад, принтер, монітор тощо. У табл. 1 перелічено основні з них.
Табл. 1. Типи носіїв та їхній опис
| Тип | Опис |
|---|---|
| all | Усі типи. Це значення використовується за замовчуванням. |
| Принтери та інші друкувальні пристрої. | |
| screen | Екран монітора. |
| speech | Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери. |
Наступні типи є коректними, але застарілими і не дають жодного результату (табл. 2).
Табл. 2. Застарілі типи носіїв
| Тип | Опис |
|---|---|
| braille | Пристрої, засновані на системі Брайля, які призначені для читання сліпими людьми. |
| embossed | Принтери, що використовують для друку систему Брайля. |
| handheld | Кишенькові комп'ютери та аналогічні їм апарати. |
| projection | Проєктори. |
| tty | Пристрої з фіксованим розміром символів (телетайпи, термінали, пристрої з обмеженнями дисплея). |
| tv | Телевізори. |
Синтаксис
@media <тип носія> {
<стильові правила>
}
Значення
Після ключового слова @media йде один або кілька типів носія, перелічених у табл. 1; якщо їх більше ніж один, то їх розділяють між собою комою. Після чого йдуть обов'язкові фігурні дужки, усередині яких пишуться стильові правила.
Приклад
<!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 { /* Style to display in the browser */
body {
font-family: Arial, Verdana, sans-serif; /* Chopped font */
font-size: 0.9em /* Font size */
color: #000080; /* Text color */
}
h1 {
background: #faf0e6; /* Background color under text */
border: 2px dashed #800000; /* Border around title */
color: #a0522d; /* Text color */
padding: 7px /* Margin around text */
}
h2 {
color: #556b2f; /* Text color */
margin: 0; /* Remove padding */
}
p {
margin-top: 0.5em; /* Top padding */
}
}
@media print { /* Print style */
body {
font-family: Times, 'Times New Roman', serif; /* Serif font */
}
h1, h2, p
color: #000; /* Black text color */
}
}
</style>
</head>
<body>
<h1>The method of catching a lion in the desert</h1>
<h2>Sequential iteration method</h2>
<p>Let the lion have overall dimensions LxWxH, where L is the length of the lion from the tip of the nose
to the tassel of the tail, W is the width of the lion, and H is its height. Then we divide the desert into
a series of elementary rectangles, the size of which coincides with the width and length of the lion.
Considering that the lion may not be strictly on a given area, but at the same time on
two of them, the cage for catching should be made with an increased area, namely 2Lx2W.
Thanks to this, we will avoid the error when only half of the
a lion or, worse, only his tail.</p>
<p>Next, successively cover each of the marked rectangles of the desert
cage and check if the lion is caught or not. Once the lion is in the cage, the procedure
the capture is considered complete.</p>
</body>
</html>Переглянути документ, у якого 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>У цьому прикладі використовуються дві таблиці стилів, одна для відображення в браузері, а друга - для друку документа. Хоча на сторінку завантажуються одночасно два різні стилі, застосовуються вони тільки для певних пристроїв.