| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #73, ДЕКАБРЬ 2006 г. |
специи по вкусу
ВЯЧЕСЛАВ БАЕВ
Спецвыпуск: Хакер, номер #073, стр. 073-010-4
height: 401px;
}
.just-for-IE {
display: none;
width: 1px;
margin-left: -1px;
}
* html .just-for-IE, * html .valign-center {
display: inline-block;
vertical-align: middle;
}
* html .valign-center {
width: 100%;
}
* html .just-for-IE {
height: 100%;
}
* html .just-for-IE, * html .valign-center {
display: inline;
}
[задача.]
Разберемся в том, как оформлять текст при выводе на экран, принтер и подобные девайсы.
[решение.]
Каждый тип устройства, определенный спецификацией CSS, имеет набор свойств, которые можно использовать для форматирования документа, выводимого на это устройство. Агент пользователя, который поддерживает определенный тип устройств, должен уметь использовать все свойства, применяющиеся к данному типу.
- ALL – ДЛЯ ВСЕХ УСТРОЙСТВ;
- AURAL – ДЛЯ РЕЧЕВЫХ СИНТЕЗАТОРОВ;
- BRAILLE – ДЛЯ УСТРОЙСТВ ЧТЕНИЯ АЗБУКИ БРАЙЛЯ;
- EMBOSSED – ДЛЯ ПЕЧАТИ АЗБУКИ БРАЙЛЯ;
- HANDHELD – ДЛЯ ПЕРЕНОСИМЫХ ПОРТАТИВНЫХ УСТРОЙСТВ (НЕБОЛЬШИЕ МОНОХРОМНЫЕ ЭКРАНЫ С ОГРАНИЧЕННОЙ ПОЛОСОЙ ЧАСТОТ);
- PRINT – ДЛЯ СТРАНИЧНЫХ НЕПРОЗРАЧНЫХ МАТЕРИАЛОВ И ДЛЯ ДОКУМЕНТОВ, ПРОСМАТРИВАЕМЫХ НА ЭКРАНЕ В РЕЖИМЕ ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА ПЕЧАТИ;
- PROJECTION – ДЛЯ НАСТЕННЫХ ПРЕЗЕНТАЦИЙ, НАПРИМЕР, ДЛЯ ПРОЕКТОРОВ ИЛИ ДЛЯ ПЕЧАТИ ПЛАКАТОВ;
- SCREEN – ДЛЯ ЦВЕТНЫХ ДИСПЛЕЕВ;
- TTY – ДЛЯ УСТРОЙСТВ, ИСПОЛЬЗУЮЩИХ НАБОР СИМВОЛОВ С ФИКСИРОВАННОЙ ШИРИНОЙ, НАПРИМЕР ТЕЛЕТАЙПОВ, ТЕРМИНАЛОВ ИЛИ ПОРТАТИВНЫХ УСТРОЙСТВ С ОГРАНИЧЕННЫМИ ВОЗМОЖНОСТЯМИ ОТОБРАЖЕНИЯ;
- TV – ДЛЯ УСТРОЙСТВ ТИПА ТЕЛЕВИЗОРА (ДЛЯ КОТОРЫХ ХАРАКТЕРНЫ НИЗКОЕ РАЗРЕШЕНИЕ, ЦВЕТНОЕ ИЗОБРАЖЕНИЕ, ОГРАНИЧЕННАЯ ПРОКРУТКА НА ЭКРАНЕ, ВОЗМОЖНОСТЬ ПЕРЕДАЧИ ЗВУКА).
Названия типов устройств не зависят от регистра. Из-за быстрого изменения технологий в CSS2 не представлен список конкретных типов устройств, выступающих в качестве значений для правила @media. В будущих версиях CSS список устройств, возможно, будет дополнен. Разработчикам не стоит полагаться на названия типов устройств, которые еще не определены в описании CSS.
Существует два способа построения аппаратно-зависимых таблиц стилей:
1 Задать целевое устройство с помощью правил @media или @import:
ЛИСТИНГ
@import url("loudvoice.css") aural;
@media print {
/* далее идет таблица стиля для печати */
}
2 Задать конечное устройство в языке документа. Например, в HTML 4.0 атрибут «media» элемента LINK указывает конечное устройство для внешней таблицы: стилей:
ЛИСТИНГ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Связь с конечным устройством</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>Основное тело документа
</BODY>
</HTML>
[задача.]
Создать таблицу из трех колонок шириной в 100px, 70% и 30% соответственно. Все колонки должны иметь поля в 10px. Дополнительные условия: минимум HTML, максимум CSS. В тестировании участвуют Internet Explorer 6, Mozilla FireFox 1.5 и Opera 8.
[решение.]
CSS:
ЛИСТИНГ
table { border-collapse: collapse; width: 100%; }
td { padding: 10px; }
td#one { background: red; width: 100px; }