Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного устройства. В табл. 4.1 перечислены некоторые типы носителей.
В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить стиль для элементов в зависимости от того, выводится документ на экран или на принтер. Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается. При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 4.1. Пример 4.1. Импорт стилевого файла В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и smart.css — при печати страницы и отображении на смартфоне. Браузер Internet Explorer до седьмой версии включительно не поддерживает типы носителей при импорте стилевого файла. Команда @media позволяет указать тип носителя для глобальных или связанных стилей и в общем случае имеет следующий синтаксис. После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 4.1, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил. В примере 4.2 показано, как задать разный стиль для печати и отображения на мониторе. Пример 4.2. Стили для разных типов носителей В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 4.1 и рис. 4.2.
Рис. 4.1. Страница для отображения в окне браузера
Рис. 4.2. Страница, предназначенная для печати Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу или воспользовавшись предварительным просмотром в браузере (). Или пойти на хитрость и временно заменить print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 4.2. Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <link> с параметром media, значением которого выступают все те же типы, перечисленные в табл. 4.1. В примере 4.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей. Пример 4.3. Подключение стилей для разных носителей В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на смартфоне. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств. Аналогично можно использовать и глобальные стили, добавляя параметр media к тегу <style> (пример 4.4). Пример 4.4. Стиль для смартфона В данном примере ширина для устройств типа handheld ограничена размером 320 пикселов. | |||||||||||||||||||
| Просмотров: 357 | Теги: | Рейтинг: 0.0/0 | |||||||||||||||||||
| Всего комментариев: 0 | |