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

Альтернативы модели гибкого поля • 291

позднее вы захотите, например, поменять ширину забивки пустыми символами, то вам
придется также отредактировать функцию calc.
К сожалению, на момент написания этой главы ни один браузер не поддерживает функцию
calc. Версия Firefox 4, которая должна появиться в ближайшем будущем, должна под-
держивать не только calc, но также функции min и max, однако эти функции еще даже не
перешли на стадию общедоступных бета-версий. Подробнее об их реализации в Firefox
рассказывается на странице http://hacks.mozilla.org/2010/06/css3-calc; там же вы найдете
несколько примеров использования calc в целом. Официальное описание W3C вы найдете
на странице http://www.w3.org/TR/css3-values/#calc.

Вернув значение width, равное 30%, добавьте к правилу .feature свойство box-
sizing и его версии с префиксами -moz- и -webkit-:

.feature {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
margin: 0 4.5% 0 0;
padding: 130px 15px 5px 15px;
border: 1px dashed #3C9;
background-color: hsla(0,0%,100%,.3);
background-repeat: no-repeat;
background-position: top center;
}
Версия с префиксом -moz- используется в Firefox, версия с префиксом -webkit-
предназначена для Safari и Chrome, а версия без префикса — для Opera и IE 8 и бо-
лее поздних версий. Теперь каждое поле занимает 30% ширины окна, и в эти 30%
помещается не только содержимое, но также рамка и забивка пустыми символами.
Таким образом, область содержимого каждого окна занимает 30% — 32 пиксела.
Следовательно, все три поля всегда остаются на одной строке (рис. 7.29).

Таблица 7.5. Поддержка свойства box-sizing в браузерах

IE Firefox Opera Safari Chrome
Да, начиная Да, с префиксом Да Да, с префиксом Да, с префиксом
с версии 8 -moz- -webkit- -webkit-

www.trk.kg