ЕСТЬ ПУТЕШЕСТВИЯ, которые требуют от человека всей его решительности и присутствия духа. Наше - как раз из таких. Это путь от традиционного веб-дизайна, каким мы его понимали последние шесть лет - до методик, по которым будут строить сайты в будущем. Причем это будущее уже здесь. В нем вы и варитесь.
Изначально мы делали все для того, чтобы наши сайты работали в любом броузере. В мире нестандартного HTML-дизайна мы пришпиливали каждое слово, каждую картинку к месту при помощи табличной верстки.
Мы решали одни проблемы, вместо них возникали новые. Netscape 4 игнорирует декларацию CSS {margin: 0;} ? Пригласим в тэг BODY "Четырех Всадников, Которые Никогда Не Пройдут Валидацию": LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT. IE4 не полностью поддерживает свойства границ? Сымитируем эти свойства с помощью вложенных таблиц. Вроде бы это не должно работать - но работает. Да и сайт должен был быть готов еще вчера. Что нам стоит дом построить? Нарисуем, будем жить.
Где мы были
Именно так конструировались сайты, начиная с 1995 года, и точно так же они строятся в наши дни. Это запутанное и утомительное занятие, недостаток логики в котором привел к возникновению рынка визуальных редакторов кода, наподобие Dreamweaver, GoLive и FrontPage. В то время как мы, пишущие код вручную, дико гордились собой. Гордились не качеством нашей работы, не соответствием стандарту, но неким высшим знанием того, какой нестандартный тэг или фрагмент на javascript решает ту или иную проблему отображения кода в том или ином идиотском броузере.
Мы ругали визуальные редакторы, но наш код был немногим лучше. Если мы не знали, как делается то или другое - вместо того, чтобы свериться со стандартами W3C или ECMA, мы обменивались разнообразными уловками в конференциях. А когда появлялся броузер, который действительно поддерживал стандарты, мы жаловались на то, как он портит наши HTML-документы и DHTML-код, ориентированный на определенные броузеры.
Подход сам по себе вполне идиотский. Но дела становились еще хуже, когда возникала необходимость сменить дизайн, ибо весь контент был пересыпан тэгами FONT и заперт в ячейках таблиц. Переводить его в новые шаблоны приходилось вручную, ячейка за ячейкой, страница за страницей.
Куда мы идём
Все мы знаем, что будущее - за веб-стандартами. А веб-стандарты - это отделение стиля от содержания, представления от структуры, дизайна от данных.
Все мы знаем, что новейшие броузеры более или менее поддерживают веб-стандарты. IE5, Netscape 6, и Opera 5 предлагают поддержку CSS, HTML, и JavaScript/ECMAScript вполне достаточную для того, чтобы мы могли позволить себе отказаться от неуклюжих и устаревших методик и освободить сеть от оков табличного HTML-дизайна.
Нам также известно, что миллионы людей путешествуют по сети с помощью броузеров, версия которых - 4 или старше. И это знание не позволяет нам перешагнуть черту и начать применять методы будущего уже сегодня.
Долгая дорога
Здесь, на ALA, я принял решение поддерживать стандарты (в том числе и W3C DOM), несмотря на то, что в старых броузерах такой ход неминуемо приводит к некачественному отображению. Это решение далось мне нелегко, но когда я его принял, оно воплотилось с неизбежностью падающего сейфа.
Это была долгая дорога.
Для меня это путешествие началось в 1997, когда Matt Haughey и я независимо друг друга составляли хронику ошибок реализации CSS в Internet Explorer 3. Или, может быть, в 1998, когда Glenn Davis отправил мне письмо, которое и привело к созданию объединения The Web Standards Project (WaSP).
Разговоры
Вернемся от древней истории к событиям месячной давности, когда Emily Cotler и Kelly Goto в процессе подготовки своей книги по веб-дизайну спросили меня, какое влияние оказывают стандарты CSS, HTML и XHTML на задачу обновления сайта и смены его дизайна.
Я обрисовал им нашу идеологию отделения стиля от содержания, в соответствии с которой оформление и контент не спят в одной постели, а обновление данных и смена дизайна реализуются редактированием одной единственной таблицы стилей. Но, так как дизайн и контент в настоящее время принято смешивать воедино в табличной HTML-верстке, - самая незначительная смена оформления превращается в капитальный ремонт. Уже не говоря о том, что сайт, содержащий разнообразные уловки редко когда проходит валидацию.
Потом я, как обычно, повздыхал о том, как было бы здорово, сумей я отделить стиль от содержания здесь, на ALA.
Как было бы здорово...
Каждую неделю, когда я и Nick выпускали новый номер, я замечал некоторые недостатки в существующей верстке и по возможности вносил косметические изменения, улучшая оформление недельного номера, в то время как остальной сайт оставался неизменным. Если проследить историю ALA - можно увидеть, что, по мере развития, сайт становился все более и более уродливым, сложным для чтения и неудобным в использовании.
Если бы весь дизайн заключался в одной таблице стилей, недельные обновления автоматически затрагивали бы сотни страниц сайта. Но, как и любой другой веб-дизайнер, живущий в реальном мире, я не мог переключиться на тотальную CSS-верстку, в то время, как тысячи наших читателей используют броузеры четвертых версий, которые не в состоянии адекватно поддерживать CSS и прочие веб-стандарты.
Как всё начиналось
Затем мне написал разработчик броузеров - разумный, хорошо понимающий в стандартах парень, чей продукт первым стал правильно поддерживать CSS-1. Он задал мне только один вопрос: почему ALA не полностью поддерживает веб-стандарты?
"Уж кто-кто, а Ваш сайт должен следовать правилам" - мягко пожурил он меня.
Несколько дней спустя B.K. DeLong из WASP реанимировал идею, которую в свое время предложила Dori Smith: я говорю об Инициативе по обновлению броузеров.
Простая идея
Кампания выглядит следующим образом: для начала веб-сайт - любой веб-сайт,- подвергается переделке с целью приведения к полному соответствию стандартам. Если броузеры посетителей адекватно поддерживают стандарты - ничего особенного не происходит. Если же нет, то вместо ожидаемой страницы пользователи обнаружат себя на странице Обновления, где они узнают о существовании броузеров, соответствующих стандарту, и получат возможность их скачать. Существует еще одна возможность - посетитель видит то, что он ожидал увидеть, плюс сообщение о том, что его броузер несовместим со стандартами - и опять же предложение скачать совместимый. Именно второй способ используется всеми страницами этого номера. Если сообщение не появилось, значит Ваш броузер поддерживает технологии, которые применялись при создании этого номера. Довод Dori Smith был прост: если люди будут использовать правильные броузеры, разработчики смогут создавать правильные сайты. Ну, так давайте же призовем людей к использованию правильных броузеров. И чем скорее, тем лучше. Мы сможем сделать это, используя стандарты так, как если бы все наши посетители уже установили у себя правильные броузеры - возглавив наших пользователей вместо того, чтобы подчиняться показателям наших логов.
Опасный бизнес
Как и все сильные идеи, Инициатива по обновлению броузеров кажется очевидной лишь на первый взгляд. Воплотить ее было несложно. Но тут нас подстерегала ловушка. Своего логичного завершения Инициатива достигла бы лишь при условии, что остальные разработчики начали бы использовать ее на своих сайтах. Но станут ли они рисковать посетителями?
Я решился.
Можно сказать, что это не я решил довести ALA до полного соответствия стандартам. События решили за меня. К несчастью, процесс оказался не таким уж простым.
В бездне
ФИЛЬМЫ УЖАСОВ учат нас не входить в темную комнату в одиночку. Перед тем, как твердо встать на новый путь веб-дизайна, я нашел несколько верных спутников для путешествия по темным углам.
Эти двое смелых - эксперты по CSS, непосредственно участвовавшие в создании стандартов. Так как они пожелали остаться неизвестными, я назову их Анонимный Донор #1 и Анонимный Донор #2.
Позже к нашей банде авантюристов присоединился David Eisenberg из ALA. Он занимался кросс-платформенными тестами и, в соответствии с их результатами, вносил тщательно обдуманные изменения в нашу таблицу стилей.
Стандарты против стандартов
Если вы задумаетесь, то поймете, что есть два способа создавать сайты, соответствующие стандартам. Можно следовать букве стандарта - или же его духу.
Буква
Безопасный, консервативный способ следования букве стандартов состоит в избежании ошибок валидации. Но железные цепи, сковывающие оформление и содержание, остаются неизменными.
Веб-сайт WaSP, например, всегда соответствовал стандарту и всегда использовал CSS для контроля над типографикой. Верстка, тем не менее, была реализована с помощью HTML-таблиц, дабы сайт работал в любом визуальном броузере. Преимущества такого подхода: как я уже только что сказал, ресурс отображается в любом броузере. Недостатки:
1. Смена дизайна означает редактирование вручную свойств тысяч и тысяч ячеек - их цвета, высоты, ширины- или создание новой табличной верстки, что предполагает долгий и дорогостоящий процесс.
2. Такой подход к верстке не имеет смысла в нетрадиционных (например, речевых) броузерах и, по мнению W3C, вреден - даже если страница проходит валидацию.
3. Страницы с такой версткой менее доступны людям и устройствам.
Дух
И существует также второй путь, путь к Святому Граалю стандартов Web: отделение стиля от содержания, использование структурной разметки для данных и CSS для всех видов визуальной разметки. Я использовал CSS с 1997 года, но ни разу не включал полный газ. Теперь, с дружеской помощью, я могу сделать это.
Резиновый завтрак
Традиционная верстка ALA была лабиринтом из бесконечных вложенных таблиц. В прошлом, при обновлениях сайта, даже я не мог вспомнить, для чего служат те или иные colspan и rowspan - несмотря на то, что сам их создал.
<!-- Dress left --&rt;
<table border="0" cellpadding="0"
cellspacing="0"&rt;
<!-- Your variable left margin --&rt;
<tr valign="top"&rt;
<td width="15%" bgcolor="#ffffcc"&rt;
</td&rt; <td width="75%" bgcolor="#ffffcc"
valign="top"&rt;
<!-- Your actual content --&rt;
Будьте добры - то же самое, но на человеческом языке. Я рыдал, как ребенок, при одной мысли о том, что можно заменить безумное количество таблиц на два-три чистых и незамысловатых DIV'а.
Обдумываем разметку
Сейчас самое время поговорить о пересмотре верстки при переходе от HTML к CSS. В прошлом дизайн ALA представлял собой верстку в три панели, он сжимался и растягивался в зависимости от разрешения вашего монитора. Я хотел, чтобы он и в CSS вел себя аналогичным образом, не особо заботясь о непременном сохранении всех трех панелей.
[Традиционная панель ALA]
ТРЕХПАНЕЛЬНАЯ ВЕРСТКА В CSS
Я быстро решил, что в верхней оранжевой панели с названием не было и нет никакой необходимости. С настоящего момента название вполне можно поместить в панель с контентом. Откровенно говоря, создание трехпанельной верстки в CSS казалось практически неосуществимым, так как подобные возможности только планируются для CSS-3 (вообще-то трехпанельная верстка относительно просто реализуется и в CSS, как видно из примеров Porter Glendinning и вашего покорного слуги. Но в то время, когда ALA переживал первую смену дизайна, проблемы выглядела неразрешимой).
В CSS несложно достигается абсолютное позиционирование, и поэтому большинство веб-дизайнеров обращаются именно к этой части стандарта. Но "резиновый" дизайн недостижим при позиционировании по точкам. Для того, чтобы сайт сжимался и растягивался, размеры элементов и их позиционирование должны быть заданы в относительных, а не в абсолютных единицах. Такой эффект элементарно реализовался с помощью таблиц, и это еще одна причина того, что они продержались так долго. Как сделать то же самое с помощью CSS?
Смена дизайна: теперь об этом можно рассказать
Очевидно, что первая моя мысль была о создании двух 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: #cc00000;
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:
В Strict режим вы переключитесь, начав вашу страницу с DOCTYPE, в котором будет указан релевантный адрес W3C:
Gecko броузеры (Mozilla, Netscape 6, and Konqueror), равно как и бета IE6, следуют тропой IE5/Mac. В этих броузерах вы можете с помощью DOCTYPE указывать, должен ли ваш сайт отображаться в соответствии со стандартом, или же следует эмулировать поведение старых, менее совместимых броузеров.
Суета вокруг прокрутки
Теперь вы понимаете, почему моя первая попытка смены оформления журнала привела к появлению полос прокрутки. Добавьте мои отступы и поля к процентному соотношению, которое я использовал. 75%+25%=100%. Плюс отступ в десять процентов слева и десять точек справа в слое с контентом. Плюс двадцать пять точек для слоя с меню. Я вообще удивляюсь, что все это хоть как-то работало.
Как же мне было разобраться с суровой точностью чисел и правил? Я же не мог просто написать в таблице стилей:
{width: 75% И ПРОШУНЕ ОБРАЩАТЬ ВНИМАНИЯ НА ОТСТУП}Если бы я задавал ширину в абсолютных единицах, я бы просто ее установил и ни о чем бы больше не беспокоился. Но в результате получилась бы статическая страница, которая для одних мониторов была бы слишком узка, а для других - чересчур широка. Поэтому я выбрал резиновую разметку. Однако, как только я начал вычисления, мне показалось совершенно невозможным смешивать проценты и абсолютные величины, ибо на выходе получались совершенно несуразные величины типа 103% или 104.25%.
В этот момент Анонимный Донор #1 разрешил проблему блочной модели. Он начал мыслить вне блока.
Cлои летающие и плавающие
Вместо того, чтобы представить верстку ALA, как страницу с контентом, справа от которого располагается слой с меню, Анонимный Донор #1 представил ее, как зеленую страницу, слева от которой располагается слой с контентом. Затем он применил редко используемое свойство "float", чтобы установить слой с контентом слева от меню:
#content { float: left; width: 67%; padding: 45px 10% 100px 15%; margin: 0 15px 0 0; border-right: 2px dotted black; border-bottom: 2px dotted black; }
Замечу, что gif, используемый в качестве фона в черновой верстке был заменен на свойства границы (2px dotted black). Также замечу, что ширина была изменена с 75% до 67%.
Вообще говоря, мы определили, что идеальная ширина должна быть еще меньше. При разрешениях 800х600 и ниже, область меню была недостаточно широкой. В результате пункты меню сползали в подвал страницы (картинка). Идеальная ширина, таким образом, была установлена в 52%. Не забудьте, 52% -- перед тем, как добавить поля и отступы. Вы можете пока выпить водички, а потом прочитать это еще раз.
Уместные вопросы
Почему эта проблема не возникала в старой верстке ALA? Потому что табличная верстка сильно упрощает такие проблемы. Если ваш слой с меню слишком узок, броузер просто подгонит пропорции таблиц. CSS-совместимый броузер не будет подгонять пропорции, чтобы охранить вас от вашей собственной глупости.
Если идеальная ширина - 52%, то почему же объявленная ширина для слоя с контентом - 67%? Все просто: 67% - это фальшивое значение, чтобы обмануть IE5/Windows и заставить отображать реальную ширину более-менее корректно.
Помните, IE5/Win неверно понимает блочную модель и не добавляет поля и отступы к общей ширине. 67% - это примерно то, как будут выглядеть 52% после того, как вы добавите поля и отступы.
То, что описано в одном небольшом разделе, я выяснял в течение четырнадцати часов. Вы можете идти нюхать клей. Как отойдете - перечитайте все с самого начала.
Следим за точностью
Из того, что было мною сказано, вы могли сделать вывод, что я и мои анонимные помощники решили создать средствами CSS верстку, которая работала бы корректно только на несоответствующем стандарту, но куда как широко используемом IE5/Win. Не совсем. Анонимный Донор #1 использовал декларацию CSS-2, чтобы установить правильную ширину:
body>#content { width: 52%; padding: 35px 5% 100px 10%; }
Несмотря на то, что body># выглядит как масонский символ, он таковым не является; это селектор CSS-2. Netscape 6, и Opera 5 понимают синтакс CSS-2; IE5/Windows - нет, и поэтому его пропускает. IE5/Win следует правилу, которое распознает - фальшивой ширине в 67%. Более совместимые боузеры следуют т.н. правилу большей специфичности. Что это такое, вы спросите?
Правило большей специфичности
В глобальной таблице стилей заявлено, что весь текст в на странице должен быть выведен шрифтом arial размером в 1em. Но параграфу определено отображаться шрифтом verdana размером .8em. Вы определили стиль для параграфа непосредственно, поэтому параграф будет выводиться именно так, а не наследовать стиль от. Если вы создадите специальный класс для параграфа - ну, например, "legalese" - и назначите ему размер в 10px, то большая специфичность выражения
даст вам шрифт в десять точек высотой, который мы все так любим.
Более специфичное правило одерживает верх над менее специфичным.
В причудливом мире CSS, слой с контентом, который содержится в тэге считается более специфичным, нежели слой с контентом, который объявлен сам по себе, даже если они объявлены совершенно одинаково. Умей IE5/Win читать синтакс CSS-2, как делают другие броузеры, наш бы трюк не прошел.
[От редактора: Что случилось, когда на сцене появилась бета-версия IE6? Скоро узнаете.]
Усключает броузера четвёртых версий
Итак, теперь у нас есть "резиновая" верстка, созданная исключительно в партикулярном CSS. Эта верстка будет корректно отображаться в CSS-совместимых броузерах, чего не скажешь о броузерах четвертых версий.
И вот тут на сцене появляется Инициатива по Обновлению Броузеров. Тогда же у Анонимного Донора #2 появилась великолепная идея использовать внутренние фреймы (iframes), чтобы намекнуть пользователям устаревших броузеров о необходимости их обновления.
К несчастью, последние версии XHTML не поддерживают iframe, поэтому мы решили заменить iframe на тэг OBJECT.
К несчастью, текст внутри невидимого тэга OBJECT показывается в поддерживающих стандарты броузерах (в режиме эмуляции) и устройствах типа Lynx и Palm PilotsT. Поэтому мы добавили JavaScript, который скрывал содержание тэга OBJECT в этих броузерах.
К несчастью, добавление JavaScript к тэгу OBJECT привело к тому, что IE5+/Windows стал скрывать заголовок страницы, а также время от времени выдавать фальшивый сигнал о нарушении безопасности (в зависимости от настроек).
В итоге, Анонимный Донор #1 придумал еще одну дьявольскую (но полностью соответствующую стандартам) уловку, которая подойдет для любого броузера. Но тут мы сдались. Мы просто упаковали наше сообщение в незамысловатый тэг
, и использовали CSS, чтобы его скрыть.
Этот сайт будет работать куда лучше в броузере, который поддерживает стандарты Web ,но он также доступен в любом другом броузере или Интернет-устройстве.
Как и почему это работает, объясняется на странице WaSP для разработчиков.
Защитим невинных
Надо было принять еще одно решение: позволять ли пользователям четвертых версий видеть, как странно их броузеры воспринимают документ с нашими стилевыми таблицами. Мы решили их защитить. Для этого есть много способов, основные - определение типа броузера с помощью JavaScript и включения на стороне сервера. Но мы решили использовать HTML. А именно, вместо включения внешней таблицы стилей обычным образом:
... мы подключаем ее так:
@import "/nucss.css";
Версии, начиная с пятой, понимают этот метод. Четвертые - нет. Дети, попробуйте это дома.
Используя метод @import с двойными кавычками, вы защищаете старые броузеры от самих себя и можете свободно использовать CSS так, как его следует использовать. Скажем так, теперь у вас есть полная свобода использовать стандарты Web в соответствии со спецификацией, не отвлекаясь на постоянный поиск обходных решений и компромиссов.
Для тех, кто делает сайты, иначе, как революцией, это не назовешь.
Оп-па...
Еще раньше по ходу пьесы мы выяснили, что IE4.5/Macintosh поддерживает метод URL/import. К тому же, как ни странно, он корректно понимает блочную модель. Но он не поддерживает селекторы CSS-2.
Таким образом, IE4.5/Mac отображает декларацию как написано, согласно спецификации CSS-1. К сожалению, декларация , как вы помните, была написана с использованием фальшивых значений, дабы заставить IE5.5/Windows корректно отображать нашу разметку. Поэтому IE4.5 замечательно проделывает работу по отображению неверной декларации, и наша верстка будет отображаться в нем, мягко говоря, неверно.
И финальный аккорд. После того, как ALA подвергся смене оформления с помощью методов, описанных выше, публике была представлена бета-версия IE6/Windows. Как IE5/Mac, она поддерживает переключение режимов с помощью DOCTYPE. Как IE5/Mac, Opera 5 и броузеры Gecko, она корректно понимает блочную модель. Но, в отличие от этих броузеров, она не распознает селекторы CSS-2. В результате, в точности как IE4.5/Mac, бета-версия IE6 проделывает виртуозную работу по отображению неверной декларации. Броузер , а вот разметка - нет.
К счастью, нам удалось решить эту проблему в ALA № 100 , который использует упрощенную таблицу стилей и слой, соединяющий все части воедино в любом CSS-совместимом броузере. Подробности смотрите в заметках к № 100.
7 апреля мы переделали верстку номера 99 (в том числе и статью, которую вы сейчас читаете), согласно обновленной таблице стилей и шаблону, дабы избежать проблем с бета-версией IE6 и IE4.5/Mac. Мы обновили также текст данной статьи. Почему? Да потому, что мы вас любим.
Праздные беседы
В последнюю неделю апреля веб-дизайнеры, эксперты и разработчики броузеров принимали участие в дискуссиях о наилучших способах создания CSS разметки, которая бы компенсировала различия в алгоритмах броузеров.
Основные выводы этих дискуссий были собраны участником по имени Eric Costello. В том числе, мы обсуждали плюсы и минусы блочной модели, созданного Tantek Celik, ведущим разработчиком IE5/Mac и соавтором CSS-2 и CSS-3. Не волнуйтесь, этот трюк гораздо проще, чем кажется на первый взгляд.
Приемы CSS, которые использует ALA начиная с номера № 100 базируются на различных подходах и они корректно работают в бета-версии IE6, IE5/Win, IE5.5/Win, IE5/Mac, Mozilla, Konqueror, Netscape 6, и Opera 5.
Возвращение блудного сына
Переход от табличной верстки к разметке средствами CSS - это хорошо для пользователей сети и веб-дизайнеров. Несмотря на то, что эта статья могла показаться вам бесконечной, она только поскребла по поверхности. С тех пор, как она была написана, появилось несколько отличных ресурсов на эту тему:
BlueRobot's CSS Layout Reservoir
Glish's CSS Layout Techniques
Owen Briggs's Little Boxes
Путешествие продолжается
Сегодня мы отделили стиль от содержания здесь, на ALA. Рано или поздно это произойдет на всех сайтах. Несмотря на то, что этот путь кажется чрезмерно революционным, тяжелым, опасным и недружественным пользователю - технологии будут развиваться именно таким путем. В конце концов, с самого начала web должен был работать именно так .
Тому, кто оценивает Web исключительно критериями графического дизайна, придется несколько расширить свой кругозор, но взамен он получит больший контроль и гибкость в управлении разметкой.
Возможно, вы начнете помогать нам закатывать камень на гору уже сейчас. Возможно вы предпочтете наблюдать со стороны за развитием событий. Но, вне зависимости от того, выберете вы место на сцене или в зрительном зале, сейчас самое время начать изучать, как работают эти стандарты и прикидывать, какую пользу они могут принести вашим сайтам.
Даже если вы решите проводить эксперименты с CSS и прочими стандартами в офф-лайне или для избранной аудитории, начинайте эти эксперименты сейчас. Потому что скоро, очень скоро весь Web будет основываться на этих принципах. Потому что, вне всяких сомнений, так строить сайты лучше, удобнее и проще.
Разумеется, если вы не желаете изучать CSS и прочие стандарты Web - при ресторанах MacDonald's есть отличные курсы менеджмента.
Увидимся на баррикадах.
Джеффри Зельдман
http://www.webmascon.com