Page 294 - Сила CSS3 Освой новейший стандарт

294 • Глава 7. Вспоминаем навыки верстки

в этот режим, чем предыдущие версии. Фактически от вас требуется использовать
старое или грамматически неправильное объявление DOCTYPE, от чего страдают
любые браузеры. Плюс, если уж вам удастся включить режим совместимости, то
нужно будет также проверить, что модель border-box используется на всех стра-
ницах сайта без исключения; в противном случае одни поля будут выглядеть в IE 7
и более ранних версиях правильно, а другие искажаться.

Последний вариант обходного пути для браузеров, не поддерживающих box-
sizing, — прибегнуть к помощи сценария. Сценарий IE7 автора Dean Edwards (http://
code.google.com/p/ie7-js) заставляет box-sizing работать в IE, но для этого нужно
обязательно выбрать версию IE8.js или IE9.js. Недостаток данного сценария, как и
любых других, состоит в том, что для его использования требуется JavaScript. И сно-
ва, свойство box-sizing слишком важно для каркаса и внешнего вида страницы,
поэтому полагаться на JavaScript может быть в данном случае слишком рискованно.

Будущие СиСтемы управления макетом
Модель гибкого поля — не единственная система управления макетом в CSS3.
В настоящее время существует еще две: шаблонный макет (template layout) и сетка
расстановки (grid positioning). Обе находятся на начальных этапах разработки (осо-
бенно сетка расстановки); их не поддерживает ни один из браузеров, и в ближайшем
будущем внедрения улучшения ситуации не предвидится. Тем не менее для того
чтобы вы знали, чего ожидать, я дам основную информацию по обеим системам.
Шаблонный макет
Шаблонный макет CSS3 (ранее известный под названием «продвинутого макета»
(advanced layout)) позволяет размещать содержимое в «слотах» макета страницы.
Для определения слотов нужно в свойстве display задать сетку букв — что-то вроде
рисунка символами ASCII. Например, сетка может выглядеть так:
body {
display: "aaa"
"bcc";
"ddd";
}

Затем вы определяете, какие блоки div попадут в каждый из буквенных слотов:
#header { position: a; }
#content { position: b; }
#sidebar { position: c; }
#footer { position: d; }

Разумеется, все может быть намного сложнее — к примеру, мы не указали ширину
слотов, высоту строк и размер промежутков между элементами. Однако главная
идея заключается в том, что любой div-блок, определенный где угодно в коде HTML,
можно переместить в любую визуальную точку на странице, а также с легкостью

www.trk.kg