Книга: HTML: Популярный самоучитель

11.11. Создание CSS для различных устройств

11.11. Создание CSS для различных устройств

При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы его сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц стилей, которые используются, если просмотр производится с помощью заданного устройства.

Сами таблицы стилей создаются как обычно, то есть в CSS?файле или внутри HTML?элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).

Атрибут media может принимать в качестве значения список из одного или более следующих строковых идентификаторов:

• all – таблица подходит для любого устройства;

• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);

• braille – таблица применяется для устройств, генерирующих последовательность символов алфавита Брайля (предназначенного для людей с ослабленным зрением);

• handled – таблица используется для устройств с небольшим экраном, имеющим также ограничения по цветопередаче и прочим параметрам (карманные ПК и прочие портативные устройства);

• print – таблица применяется при выводе страницы на печать, а также при выводе в окне предварительного просмотра;

• projection – таблица используется при просмотре документа с помощью проектора или другого сходного устройства;

• screen – таблица применяется при отображении на экране стандартного монитора (используется по умолчанию);

• tty – таблица используется при выводе на устройства с ограниченными возможностями отображения (телетайпы, терминалы и др.);

• tv – таблица применяется при отображении на экране телевизора или сходного по возможностям устройства.

Теперь рассмотрим небольшой пример документа, который по?разному отображается, например, на экране монитора и при выводе на печать (самые доступные режимы при применении только ПК) (пример 11.8).

На экране монитора документ выглядит так, как показано на рис. 11.12 (используется таблица со значением атрибута media равным screen).

Рис. 11.12. Страница в окне браузера

При выводе на печать (в окне предварительного просмотра) используется таблица стилей со значением media=print, что видно из рис. 11.13.

Рис. 11.13. Страница в окне предварительного просмотра

Конечно, даже при выводе на печать может потребоваться гораздо больше работы при создании таблицы стилей, чем показано в приведенном здесь примере. Однако думается, что даже в этом простом случае хорошо заметна потенциальная мощь CSS в подготовке документов для различных устройств.

Оглавление книги