Интернет-технологии развиваются, и вместе с этим растет число платформ, на которых разработчики создают свои разнообразные сайты. Различные устройства, могущие выходить в сеть, требуют для себя определенной, специальной среды разработки, и CSS это тоже касается напрямую. По этой причине в CSS и было введено понятие типа носителя. Используя такие типы, таблицы стилей пишутся под конкретные платформы отдельно.
Вот список наиболее часто применяемых в CSS типов носителей:
- Screen — монитор компьютера.
- Print — вывод для печати.
- Handheld — наладонные устройства.
- TV — вывод на экран телевизора.
- All — все типы устройств, используется по умолчанию.
- Braille — устройства для слепых, на основе системы Брайля.
- Aural — программы, устройства и браузеры для речевого воспроизведения текста.
В CSS для определения типа носителя используют команды @media и @import.
При задании стилей через @import тип носителя пишется после указания адреса файла:
<html> <head> <title>Задание стиля через @import</title> <style type="text/css"> @import "/style/base.css" tv; @import "/style/little.css" handheld, print; </style> </head> <body> ... </body> </html>
По первой строке будут задаваться (точнее — импортироваться) стили для вывода на телевизионный экран. Вторая строка показывает задание стилей для наладонных устройств и вывода на печать. Как видите, можно указывать сразу несколько типов носителей, записывая их черерз запятую.
А вот команда @media используется не только для подключения внешних таблиц стилей, но пригодна и для использования в стилях глобальных. Но сначала посмотрим как с помощью @media привязать к веб-странице внешние файлы стилей. Это делается с помощью теге LINK:
<html> <head> <title>Задание стиля через @import</title> <style type="text/css"> @import "/style/base.css" tv; @import "/style/little.css" handheld, print; </style> </head> <body> ... </body> </html>
Типы носителей использован тот же что и в примере с выводом CSS при помощи @import.
Теперь о глобальных стилях:
<html> <head> <title>Задание стиля через @import</title> <style type="text/css"> @import "/style/base.css" tv; @import "/style/little.css" handheld, print; </style> </head> <body> ... </body> </html>
Синтаксис записи стилевых правил такой же, как и при использовании CSS обычными методами.
Не думаю, что многие веб-мастера задают стили для разных типов носителей, но знать, что это вообще существует надо всем, кто хочет течь в современной струе развития интернет-технологий.
