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

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

пространство между разнесенными по бокам контейнера текстовой меткой и кноп-
кой subscribe (рис. 7.21). Даже если бы размер контейнера был фиксированным,
то увеличение или уменьшение размера шрифта или изменение размера кнопки и
текстовой метки все равно приводило бы к корректировке ширины текстового поля.

Рис. 7.21. Текстовое поле теперь растягивается и занимает все пространство между
текстовой меткой и кнопкой, не важно, насколько меняется размер формы
для подписки на рассылку

Этот эффект отлично подходит для оформления полей поиска в заголовке. Текстовая
метка, текстовое поле, кнопка отправки, даже ссылка на страницу расширенного
поиска — все это может находиться на одной строке, а текстовое поле будет сжи-
маться или растягиваться, занимая доступное пространство. Выравнивать элементы
формы тоже иногда бывает не так просто, как хотелось бы, но свойства box-align
и box-pack значительно упрощают и эту задачу.
Альтернативные стили для не поддерживающих данную возможность
браузеров
Форма подписки на рассылку теперь смотрится намного лучше в Firefox и браузерах
на базе Webkit, но искажается в Opera и IE 9 — браузерах, поддерживающих медиа-
запросы, но не поддерживающих модель гибкого поля. Каждый элемент формы
выводится на отдельной строке (рис. 7.22).

Рис. 7.22. В браузерах, не поддерживающих модель гибкого поля (таких как Opera 10.6, в
котором сделан снимок экрана), каждый элемент формы выводится
на отдельной строке, а не в ряд

Несмотря на то что мы не можем передать этим не поддерживающим браузерам
отдельные стили без гибких полей, скрытые от Firefox и Webkit, мы можем — в дан-

www.trk.kg