WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

От оформительских трюков к стандартам: путешествие дизайнера

От таблиц к стилям за пять простых шагов
автор: 2000 A List Apart
перевод: Павел Филиппов

СМЕНА ДИЗАЙНА: ТЕПЕРЬ ОБ ЭТОМ МОЖНО РАССКАЗАТЬ

Очевидно, что первая моя мысль была о создании двух DIV'а: один для контента, другой для зеленого меню справа. И с первой же попытки мне удалось сделать почти всю работу. Стилевая таблица встроена в этот документ, так что вы сможете повторить весь процесс дома. Слой с контентом был объявлен следующим образом:

.content {width: 75%; padding-left: 10%; padding-right: 10px; padding-top: 10px;}

Этот слой занимал 75% от всей ширины страницы, плюс небольшой отступ для создания пространства между границей слоя и текстом. В то же время, слою с меню было предназначено занимать остальные 25% ширины (и 100% по высоте страницы).

.menu {position: absolute;
left: 75%;
top: 0px;
height: 100%;
width: 25%;
margin: 0;
padding-left: 15px;
padding-right: 10px;
padding-top: 10px;
background-color: #cc0;
background-image:
url(backgrounds/striperight.gif);
font: 10px/14px geneva, arial, helvetica, sans-serif;
color: black; }

В IE5/Windows это работало так, как я и ожидал. Но в броузерах, которые, как я полагал, куда лучше поддерживали стандарты, нежели IE5/Win, я получил горизонтальные и вертикальные полосы прокрутки (и вы их увидите в IE5/Mac, Netscape 6, и Opera 5).

Что стряслось? 100% высоты - это 100%, не так ли? 75% плюс 25% все еще равно 100%, правда? Почему эти броузеры так странно ошибаются?

Ответ, разумеется, состоял в том, что они ни в чем не ошибались. Ошибся я, потому что неверно понимал блочную модель CSS (равно как и IE5/Win).

БЛОЧНАЯ МОДЕЛЬ БЕЗ МАСКИ

Запомните: в блочной модели CSS, отступы и границы добавляются к общему размеру блока.

НЕВЕРНО:: Блок шириной 300 точек, с внутренним отступом в 20 точек в IE/Windows принимает ширину 300 точек. Вроде бы верно, но совершенно не соответствует спецификации CSS-1.

ПРАВИЛЬНО:: Блок шириной 300 точек, с внутренним отступом в 20 точек с каждой стороны принимает ширину в 340 точек в броузерах, корректно поддерживающих CSS (300+20 точек слева+20 точек справа). Согласно спецификации CSS-1, отступ прибавляется к общей ширине, несмотря на то, что он имеет место ВНУТРИ блока.

Многие веб-дизайнеры, которым приходилось сражаться с CSS, спрашивали - отчего IE и Netscape 6 по-разному поддерживают слои. Дело в том, что IE5/Mac и Netscape 6 (равно как и Opera 5), верно понимают блочную модель. IE5/Win понимает ее неверно. Я могу только мечтать о том, что с IE6 в этом смысле будет все в порядке.

[От редактора: После того, как эта статья была написана и оформлена, публике была представлена бета-версия IE6. Она поддерживала правильную блочную модель. Эта статья была переписана 7 апреля 2001 года, дабы соответствовать изменениям в броузерном королевстве.]

БЛОКИ И ТИПЫ ДОКУМЕНТОВ

Весь этот переполох с блочной моделью объясняет также, почему IE5 и Netscape 6 по-разному поддерживают свойства границы. Граница в десять точек корректно добавляется снаружи слоя, параграфа, или любого другого блочного элемента. Если вы заполните весь экран картинкой, и добавите к ней границу в десять точек, вы получите полосу прокрутки в броузере, правильно поддерживающем CSS, потому что теперь ваша картинка по ширине ровно на двадцать точек больше ширины экрана. В IE5/Win? Никакой прокрутки. Метод IE5/Win кажется во многом предпочтительнее остальных, но он неверен.

IE5/Mac эмулирует нестандартное поведение IE5/Windows в т.н. Quirks режиме, но в тоже время аккуратно поддерживает стандарт в Strict режиме. Quirks режим включается простым невключением в документ тэга DOCTYPE, или же созданием DOCTYPE без адреса W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

В Strict режим вы переключитесь, начав вашу страницу с DOCTYPE, в котором будет указан релевантный адрес W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Gecko броузеры (Mozilla, Netscape 6, and Konqueror), равно как и бета IE6, следуют тропой IE5/Mac. В этих броузерах вы можете с помощью DOCTYPE указывать, должен ли ваш сайт отображаться в соответствии со стандартом, или же следует эмулировать поведение старых, менее совместимых броузеров.

СУЕТА ВОКРУГ ПРОКРУТКИ

Теперь вы понимаете, почему моя первая попытка смены оформления журнала привела к появлению полос прокрутки. Добавьте мои отступы и поля к процентному соотношению, которое я использовал. 75%+25%=100%. Плюс отступ в десять процентов слева и десять точек справа в слое с контентом. Плюс двадцать пять точек для слоя с меню. Я вообще удивляюсь, что все это хоть как-то работало.

Как же мне было разобраться с суровой точностью чисел и правил? Я же не мог просто написать в таблице стилей:

{width: 75% И ПРОШУ НЕ ОБРАЩАТЬ ВНИМАНИЯ НА ОТСТУП}

Если бы я задавал ширину в абсолютных единицах, я бы просто ее установил и ни о чем бы больше не беспокоился. Но в результате получилась бы статическая страница, которая для одних мониторов была бы слишком узка, а для других - чересчур широка. Поэтому я выбрал резиновую разметку. Однако, как только я начал вычисления, мне показалось совершенно невозможным смешивать проценты и абсолютные величины, ибо на выходе получались совершенно несуразные величины типа 103% или 104.25%.

В этот момент Анонимный Донор #1 разрешил проблему блочной модели. Он начал мыслить вне блока. »

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока