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

Возвращаемся в действительность: что работает сейчас • 279

ном случае — добавить альтернативные стили. Их увидят все браузеры, но Firefox
и Webkit затем переопределят альтернативные стили новыми, использующими
модель гибкого поля.
Для того чтобы снова выстроить элементы формы в линию в браузерах, не поддер-
живающих модель гибкого поля, добавьте width: auto к правилу #form-newsletter
input[type=text] и display: inline к правилу #form-newsletter * rule:
#form-newsletter * {
display: inline;
margin-right: 3px;
}
#form-newsletter input[type=text] {
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
width: auto;
}

Мы восстановили стили, которые раньше применялись к этим элементам во всех
браузерах, и в Opera и IE 9 элементы формы снова вернулись на одну линию. Да, мы
могли бы вообще не трогать их с самого начала, однако удалив и вернув их обратно,
вы получили более четкое представление о происходящем.
Единственная проблема с линейными элементами формы по сравнению с блоками
заключается в переопределении модели гибкого поля: текстовое поле перестает
быть гибким. Для того чтобы вернуть эту функциональность, сохраните строку
display: inline в правиле #form-newsletter *, но ниже добавьте display: box
и эквиваленты для разных браузеров:
#form-newsletter * {
display: inline;
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
margin-right: 3px;
}

Значение box свойства display переопределяет предыдущее значение inline, вос-
станавливая модель гибкого поля и гибкость текстового поля. Браузеры, не понима-
ющие эту модель, не распознают значение box свойства display и проигнорируют
последующие объявления display. Следовательно, для них будет существовать
только первое, устанавливающее для элементов режим inline.
Благодаря наличию в коде таких стилей пользователи браузеров, не поддержи-
вающих модель гибкого поля, увидят вариант формы подписки, показанный на
рис. 7.20, — эти стили в главе 6 мы использовали для всех браузеров а остальным

www.trk.kg