Брутальное руководство по эффективному использованию CSS

Владимир Синельников

Спецвыпуск: Хакер, номер #067, стр. 067-018-4

[практика] Для успешного освоения CSS-верстки нужно усвоить особенности реализации блочной модели в различных браузерах. В соответствии со стандартной моделью, ширина блока не включает в себя отступы (padding) и границы (borders). Эта модель поддерживается во всех современных браузерах за исключением Internet Explorer (до версии 6), который имеет собственное мнение по данному вопросу. В блочной модели IE ширина отступов и границ включается в ширину блока за счет уменьшения размера области контента, как показано на иллюстрации. Такая же модель используется и в бродилках Netscape 4 и Opera 7.

Грядущая спецификация CSS3 вводит свойство «box-sizing», позволяющее выбирать нужную модель, указывая значение «content-box» для использования стандартной модели, и «border-box» — для использования модели IE. Браузер Mozilla, поддерживающий черновые рекомендации CSS3, уже поддерживает это свойство под собственным именем «-moz-box-sizing». Разработчики также ввели еще одно, на данный момент нестандартное значение (и еще одну блочную модель) — «padding-box», которым подразумевается, что ширина блока равна ширине области контента и отступов, исключая границы.

Хороший и правильный (X)HTML-код начинается с правильного указания типа документа (DOCTYPE). Эти сведения необходимы браузеру для выбора режима рендеринга документа. Если тип не декларируется либо при его объявлении допущены ошибки, документ рендерится в особом «режиме несоответствия стандартам» (quirks-mode) и руководствуется при этом не логикой рекомендаций W3C, а собственным разумением. Хотелось бы обратить внимание web-девелоперов на необъяснимый глюк в IE6: верстая в XHTML 1.0 Transitional, нельзя указывать пролог (<?xml version="1.0"?>), так как он приводит к рендерингу документа в quirks-mode, несмотря на то, что все сделано правильно. К счастью, пролог является необязательным элементом и его можно смело удалить.

Для CSS справедливы «правила хорошего тона», которыми программеры пользуются при написании кода. Аккуратность, выверенная логика, привычка комментировать код и стремление к оптимизации сослужат тебе хорошую службу. Код, подобный приведенному ниже, запросто может быть оптимизирован на 20%-30%, приобретя при этом приятную чистоту и прозрачность. Нужно ли говорить о том, насколько благотворно это отразится на быстроте загрузки файла со стилями?

Было

P {

color: #336699;

border-style : solid;

border-width : 1px;

border-color : #ff0000;

font-weight : bold;

line-height : 1.3em;

margin-bottom : .7em;

margin-left : .4em;

margin-right : 1.3em;

margin-top : .7em;

border-color: #c06565;

}

Стало

P {border: 1px solid #f00;

font-weight : bold;

color: #369;

line-height : 1.3em;

margin: .7em 1.3em .7em .4em}