Типы носителей в таблицах стилей.

Из предыдущих страниц мы знаем что каскадные таблицы стилей можно использовать тремя способами:
1)<body style="background: green image.gif"> - инлайн стили.
2)<STYLE type="text/css">
BODY{background: green image.gif}
</STYLE> - глобальные стили.
3)<LINK href="style.css" type="text/css"> - внешние стили.
И не один из этих вариантов не есть абсолютно правильным, потому что не указан тип носителя для которых написаны эти стили.

Зачем указывать тип носителя в CSS? Если тип носителя не указывается то данные стили распространяются на все носители и это может в некоторых случаях вызывать ошибки, или как минимум потеря времени и трафика, например для звуковых таблиц стилей нет необходимости использовать графику и другие объекты, а для страничных носителей нет смысла задавать звуковые иконки, в версии для печати не нужны звуки и фоны(background), и таких примеров можно привести тысячи. Так вот чтобы избежать ошибок тип носителя задавать рекомендуется.

Как задать тип носителя в каскадных таблицах стилей? Для инлайн стилей типы носителей не задаются, это и есть одна из причин не использовать инлайн стили. А для глобальных стилей и внешних стилей нужно задавать атрибут MEDIA :
1)<STYLE type="text/css" MEDIA="типы носителей">
</STYLE> - глобальные стили.
2)<LINK href="style.css" type="text/css" MEDIA="типы носителей" > - внешние стили.

Список типов носителей:
MEDIA="all" - значение по умолчанию, для всех типов носителей.
MEDIA="screen" - для непрерывных носителей, например визуальных браузеров.
MEDIA="tty" - для визуальных ограниченных в выводе символов, например телетайп или матричный принтер.
MEDIA="tv" - для телевизора.
MEDIA="projection" - для проектора.
MEDIA="handheld" - для устройств с маленькие экранами, поддерживающих только растровую графику и/или частотные ограничения, например мобильных телефонов.
MEDIA="print" - для лазерных и струйных принтеров.
MEDIA="braille" - для брауль-устройств(звуковых браузеров).
MEDIA="aural" - для звуковых ситезаторов.
MEDIA="telnet" - для ТелНета.
В будущем возможно этот список расширится.

За один раз можно указать несколько типов носителей:
<LINK href="style.css" type="text/css" MEDIA="screen, print" > в данном случае таблицы стилей применяются для визуальных типов носителей(браузеров и принтеров).
В данном варианте типы носителей указываются через запятую.

AT-правило @import и @media.

Правило AT(@) используется в скриптовых языках для подавлелия ошибок и каскадные таблицы стилей не исключение.

Правило @media используется в глобальных таблицах стилей и в файлах(style.css) внешних стилей для определения правил конкретным типам носителей:
<STYLE type="text/css">
@media print {
BODY { font-size: 14pt }
}
@media screen {
BODY { font-size: 12pt }
}
общие правила для всех носителей.
</STYLE>

Правило @import используется для импорта внешнего файла таблиц стилей.
<STYLE type="text/css">
@import "style.css";
@import url("style.css");
общие правила для всех носителей.
</STYLE>
Сначала правила импортируются, а потом уже пишутся правила для всех носителей, в том числе @media-правила.
При необходимости можно затать тип носителя или список:
@import "style.css" print, screen;

В чем преимущества правила @import перед тегом LINK? Все дело в том что некоторые браузеры, не поддерживают каскадные таблицы стилей и если при обработке документа они обнаруживают CSS, то просто начинают "виснуть", а некоторые просто закрываются от критической ошибки, вот в этих случаях если браузеры обнаруживают символ @, то просто игнорируют строку. Кстати браузер НескапеНавигатор-4.08 сразу закрыватся если встретит даже елементарное правило COLOR

Смотрите также: