Типы носителя
Введение
Одним из важнейших свойств таблиц стилей является то, что они специфицируют представление документа на различных носителях информации: на экране, бумаге, в речевом синтезаторе, в брайль-устройстве и т.п.
Некоторые свойства CSS созданы для конкретных носителей (например, свойство "'cue-before'" - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство "'font-size'" используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.
Спецификация таблиц стилей, зависимых от типа носителя
В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:
-
Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import.
@import url("loudvoice.css") aural; @media print { /* здесь идёт таблица стилей для печати */ } -
Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ( " [HTML40] " ) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> <BODY> <P>Тело документа... </BODY> </HTML>
Правило "@import" определено в главе о "каскадах" .
Правило @media
Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}