Браузер для пользователя веб-дизайнера

3.

Верстка

Больной удар по монополизму Netscape (выход четвертой версии которого пришелся на тот же 1997 год). Вплоть до третьей версии (1996 год) IE не пользовался особой популярностью в силу ограниченной функциональ­ности и в силу того, что слава Netscape уже была слишком велика. В чет­вертой версии были немного упорядочены сложные взаимоотношения со стандартами Консорциума W3C и введены некоторые новшества. Но если еще во время выхода этой версии соотношение используемых браузеров было явно не в пользу IE, то после выхода его пятой версии (1999 год) Netscape надолго ушел в забвение и использовался лишь преданными фа­натами. Дело в том, что по сравнению с IE 5.0 браузер Netscape позволял верстать только очень простые страницы. Проблемы проявлялись в чте­нии CSS, в интерпретации ссылок в виде изображений, в нежелательном размножении фоновых изображениях таблиц по ячейкам, в ошибочных интерпретациях размеров ячеек таблиц, в принципиальном отсутствии возможности точного позиционирования объектов средствами CSS (для этого существовал специфический тэг <layer>, не поддерживавшийся другими браузерами). Один тот факт, кто IE 5.0 уже достаточно приемлемо работал с таблицами стилей, позволил снискать ему расположение мно­гих веб-дизайнеров. Шестая (2001 год) и седьмая (2006 год) версии значи­тельно усовершенствованы с этой точки зрения.

И тут на сцену выходят еще два игрока, а именно — браузеры Mozilla и Opera. Mozilla использовал «движок» (механизм чтения и от - рисовки веб-страниц в окне браузера, Rendering Engine) под названием Gecko, который впоследствии стал основой для множества браузеров; в этот механизм были включены фрагменты кода, написанного для Mosaic. Так что генетическое родство браузеров IE, Netscape «старого» и «нового» (версии которого, начиная с 6, выходят на основе Gecko) и Mozilla прослеживается, несмотря на все различия. Браузер Opera, на­против, содержит абсолютно оригинальный код, не несущий тяжкого наследия патриархов, что позволяет ему при богатой функциональнос­ти оставаться очень компактным. Первая версия этого браузера (1993 г.) разрабатывалась для внутреннего пользования норвежской компании; с пятой версии (2000 г.) браузер стал условно-бесплатным (бесплатным при условии показа баннеров). Множество ошибок в интерпретации разметки было исправлено к версии 6 (2001 г.), но до этой версии вклю­чительно не поддерживалось абсолютное позиционирование объектов, да и вообще интерпретация CSS была весьма ограниченной. Седьмая версия (2003 г.) явилась прорывом в будущее, но только восьмая (2005 г.) по-настоящему вывела Opera на уровень браузеров, достойно подде­рживающих стандарты. В девятой версии (2005 г.) исправлены некото­рые мелкие ошибки; сейчас развитие браузера идет в основном по пути наращивания функциональности.

На основе Gecko было разработано несколько браузеров, в частнос­ти, популярный Firefox (к выходу этой книги ожидается третья версия),

206

Браузер для пользователя...

3.5

Версии Netscape, начиная с шестой, пакет приложений SeaMonkey, брау­зеры K-Meleon, Flock (на основе Mozilla Firefox), Galeon и Epiphany (для Linux), Camino — бывший Chimera (для MacOS), японский Kazehakase (с поддержкой других механизмов отображения) и другие. На основе близкого к Gecko «движка» KHTML (а точнее, на основе механизма WebKit на базе KHTML) разработаны популярный в среде MacOS X бра­узер Safari (вероятно, к выходу этой книги он будет портирован и под Windows), совмещенный браузер и файловый менеджер Konqureror в операционной системе Linux, а также браузер Swift для Windows.

На всякий случай еще можно помнить, что есть браузеры Voyager (операционная система QNX), Dillo с ограниченным функционалом, текстовые Links и Lynx, российский Ariadna без поддержки JavaScript, Net Positive для операционной системы BeOS, Amaya — фирменный браузер консорциума W3C — и множество других...

По данным статистики SpyLOG, на период с 7 июня по 31 июля 2007 года процентное соотношение пользователей различных браузеров разных версий было таким:

Microsoft Internet Explorer 6 — 56,2913%

Microsoft Internet Explorer 7 — 13,217%

Firefox 2 — 12,0777%

Opera 9 — 10,0911%

Firefox 1 — 2,4749%

Opera 8 — 2,3043%

Microsoft Internet Explorer 5 — 1,4346%

Mozilla 5 — 0,5962%

Mozilla 1 — 0,4993%

Opera 7 — 0,4925%

Браузер не был определен — 0,2212%

Microsoft Internet Explorer 4 — 0,0883%

Netscape Navigator 7 — 0,0634%

Firefox 0 — 0,0345%

Konqueror 3 — 0,0321%

Opera 6 — 0,0320%

Netscape Navigator 4 — 0,0258%

Opera 5 — 0,0041%

Не определенные браузеры на основе Gecko — 0,002%

Netscape Navigator 6 — 0,0012%

Galeon 2 — 0,0011%

Mozilla 0 — 0,001%

Netscape Navigator 3 — 0,0009%

Microsoft Internet Explorer 3 — 0,0009%

Firefox 3 — 0,0008%

Nutscrape 1 — 0,0006%

Браузер для пользователя...

3.5

Браузера несколько сайтов) впервые появилась в Опере, и лишь затем перекочевала в Firefox, Safari и — лишь к седьмой вер­сии — в Internet Explorer. Идея импорта и экспорта закладок (в терминологии IE — «Избранное»), очищения кэша, истории посещенных страниц и конфиденциальных данных также была заимствована Firefox’ом и Safari из Оперы. Встроенное средство для поиска также впервые появилось в браузере Opera... Оста­лись мелочи: когда производители остальных браузеров сдела­ют аналоги «корзины» для вызова случайно закрытых страниц, мгновенный кэш, управление «жестами мыши», отключение изображений в браузере и вызов настроек по одной клавише, индивидуальные настройки каждой веб-страницы, средства заметок и управление голосом, подгонку слишком широкой страницы под окно браузера, эмуляцию вида страницы для экранов карманных компьютеров, встроенные (без существен­ного увеличения размера программы) полноценные почтовый клиент, RSS-агрегатор, менеджер загрузок, клиент BitTorrent и некоторые другие вещи, по умолчанию существующие в Opera, и уместят это в дистрибутив размером 4 Мб, тогда можно будет про него забыть. Частично некоторые из этих функций реали­зованы в других браузерах (например, чтение RSS есть почти во всех современных версиях браузеров), но все вместе встреча­ются, только если оснастить браузер десятком надстроек.

Вопрос второй. Что дает такое многообразие веб-дизайнеру?

Ответ первый: постоянно опасение, что, если даже он сделает сайт, который будет работать в большинстве распространенных браузеров, то очередная версия популярного обозревателя сведет на нет многие из его усилий. Так, во многих сайтах, сверстанных не на таблицах, а на основе блоков <div>, и замечательно отображавшихся в IE 6, возникли про­блемы, когда их стали тестировать в IE 7.

Ответ второй: такое многообразие дает веб-дизайнеру необходи­мость постоянного тестирования в нескольких программах, возмож­ность тренировать свою память запоминанием таблиц несовмести­мостей и бессонные ночи в попытках исправить те несовместимости, которые были открыты и запатентованы непосредственно во время ра­боты над проектом.

Рассмотрим основные моменты, на которые нужно обращать внимание при верстке веб-страниц и тестировании в различных брау­зерах.

Первая группа отличий касается интерпретации HTML-тэгов.

У всех браузеров при интерпретации блочных элементов (аб­зац <p>, цитата <blockquote>, заголовки <h1> и далее по ряду, блок

209

Верстка

<div>, форма <form> и т. п.) и таблиц сильно различаются точные зна­чения отступов и интерлиньяжа (так что для достижения максималь­ной схожести облика текста нужно применять CSS-поправку: значения margin, padding и line-height; следует, однако, учитывать, что старыми браузерами эти поправки будут игнорироваться или тракто­ваться неточно).

Элемент <hr> (в стиле XHTML — <hr />) в каждом браузере выглядит по-разному, так как производители разных браузеров по-раз­ному имитируют объемность. Чтобы осталась простая горизонтальная черта без имитации объема, стоит писать комплекс <hr size="1" color="black" noshade> (в стиле XHTML — <hr size="1" color="black" noshade="noshade" />) либо использовать средс­тва CSS.

Разные размеры и разный внешний у элементов <input> различ­ных типов; к единообразию их можно привести при помощи CSS (в IE, начиная с версии 5, в Netscape с версии 6 и Opera с версии 7).

Подчеркивание ссылок загадочно ведет себя в разных версиях разных браузеров: то появляется, то пропадает (вопреки стилевым ука­заниям), особенно если в стилевых таблицах разные классы ссылок то имеют, то не имеют подчеркивание. В частности, этому подвержен бра­узер Opera 6.

Тэги <layer> (позиционируемые слои) и <blink> (мигающий текст) поддерживается только Netscape 4 и поздними в порядке обрат­ной совместимости.

Тэги <bgsound> (фоновый звук) и <marquee> (бегущая строка) поддерживаются браузером Internet Explorer; тэг бегущей строки в ста­рых браузерах игнорируется, но в современных Gecko-браузерах и Opera он уже поддерживается, хотя и не в чести у веб-дизайнеров.

Поддержка тэга <iframe> (плавающий фрейм) отсутствовала в четвертой версии Netscape. Тэги <button> (кнопка без отправки за­проса, в отличие от <input type="submit" />) <fieldset> (на­бор полей в форме) также сравнительно свежие. Это говорит о том, что, если есть вероятность просмотра сайта в старых версиях браузеров, то для тэгов <iframe> и <button> следует придумать замену или ими­тацию (так, <layer> в Netscape 4 по функциональности очень похож на <iframe>).

Маркеры элементов ненумерованного списка (тэг <li>) в раз­ных браузерах выглядят то как кружки, то как квадраты, то как ромбы; отступы смысловой части слева тоже различные. CSS и это исправит.

Вторая группа разночтений — это особенности в интерпретации параметров тэгов.

Так, различные браузеры по-разному справляются с чтением раз­меров ячеек таблицы. Допустим, нам нужна таблица с тремя колонками, левая и права из которых занимают каждая ширину, равную двумстам

210

Браузер для пользователя...

3.5

Пикселям. Ширина самой таблицы при этом равна ширине рабочей об­ласти окна браузера, то есть <table width="100%">. Естественно, что среднюю ячейку приходится оставлять без указания размеров, потому что экраны у всех разные, и мы смело надеемся на то, что браузер сам все пос­читает. В Opera 6 и Netscape 4, а также некоторых других браузерах при таких указаниях окажется, что боковые колонки слегка разъедутся, и их ширина будет произвольной, но более двухсот пикселей. (В качестве ре­шения, идущего вразрез со здравым смыслом, но действительно помогаю­щим, можно использовать такое: приготовить прозрачный файл в форма­те GIF размером 1 на 1 пиксель и поставить его в боковые колонки в виде распорки, задав ширину в 200 пикселей, чтобы ширина не оказалась уже, а средней колонке задать непропорционально большую ширину, напри­мер, 3000px (в указаниях размеров в HTML и CSS единицы измерения пи­шутся после чисел без пробелов) — в этом случае средняя колонка растя­нется максимально и будет равна ширине рабочей области окна браузера минус 400 пикселей, тогда как боковые будут фиксированной ширины).

Изредка нужно, чтобы таблица занимала 100% окна по высоте: например, чтобы отцентрировать какой-нибудь элемент (единствен­ный на веб-странице) по вертикали — форму для поиска, загрузочное изображение, рекламу. Простое <table height="100%"> поможет только в части браузеров — там, где высота элемента body расценивает­ся как видимая часть рабочей области окна браузера; в Opera же высота body — это высота совокупности высот элементов на странице. Поэто­му элементы все равно будут группироваться вверху. Выход в том, чтобы в таблице стиле задать для body высоту: body {height:100%}. Как видим, опять CSS — панацея от бед HTML и неосмотрительности со­здателей браузеров.

Модемные соединения еще не ушли в прошлое; это значит, что многие пользователи экономят трафик и отключают загрузку изображе­ний на веб-страницах. В этом случае, если размеры у изображений зада­ны явно, то Internet Explorer отобразит прямоугольники с пиктограммой изображения, тогда как Firefox отобразит только альтернативные над­писи, а Opera условное пространство под изображение, не совпадающее с указанными размерами. Если изображения — это иллюстрации, то это не так страшно. Но очень часто дизайнеры и верстальщики используют графику как строительный материал, на основе которого строится ком­позиция страницы. Естественно, что при потере графикой указанных размеров композиция рушится. Сохранить ее можно несложным спо­собом: для ячеек таблицы или блоков нужно прописывать высоту и ши­рину (или один, принципиальный для верстки параметр), совпадающие с высотой и шириной включаемого изображения, а также указывать па­раметры align и valign (если используются средства CSS, то text - align и vertical-align), чтобы альтернативный текст располагался в нужном месте ячейки или блока.

Браузер для пользователя...

3.5

Элементы форм). Apple-разработчики слишком дорожат внешним ви­дом кнопок в стиле Aqua.

Есть еще некоторые мелочи. Например, в более или менее длин­ном списке <select> в IE будет возникать полоса прокрутки, а в других браузерах нет. А если поставить рядом две и более последовательности <button>кнопок</button>, то в IE между ними не будут возникать пробелы, а в других браузерах будут. А в старых браузерах этот тэг вооб­ще будет игнорироваться.

В тэге <link> обязательным является параметр href, задающий связи с внешними файлами. Браузер Netscape 4 вместо параметра href использует src; для кроссбраузерности без использования серверных технологий в тэг можно добавлять оба параметра (но с точки зрения чистоты кода это неправильно).

Если ссылка является изображением, то при наведении мыши всплывающей подсказкой в Internet Explorer будет содержимое парамет­ра alt тэга <img />, в N etscape и Opera — содержимое параметра title тэга <a>, а если такового нет, то седьмая Opera будет показывать URL, на который ведет ссылка. В качестве выхода можно (например, с помо­щью сценария, чтобы не писать вручную) прописывать одинаковое со­держимое для параметра alt тэга <img> и параметра title тэга <a>.

Во всех браузерах есть более или менее существенные различия отображения блочных и линейных элементов в кегле (размере) и гар­нитуре (начертании) текста, интерлиньяже, отступах внутри элемента и отступах от других элементах, цвете, стилях (курсивный, полужирный, подчеркнутый и т. п.) и других параметрах. Практически все эти раз­личия в современных браузерах (IE с версий 4, желательно 5, Netscape с версии 6, Opera с версии 7, отчасти 6, максимально в 8, Firefox, Safari, SeaMonkey и Konqueror любых версий) можно свести к минимуму средствами CSS. Однако с интерпретацией CSS в различных браузерах тоже не все гладко; эти проблемы составляют третью группу.

Самое больное место среди отображения стилевых директив — это границы и доступ к объектам. В четвертом Netscape вообще невоз­можно разнообразить цвета и тип линий границ элементов при помо­щи стилевых таблиц. Пятый IE не всегда воспринимает пунктирные и штриховые линии. В шестой (и седьмой) Opera поддержка таких ди­ректив более стабильна, чем в пятом IE. Если вы задали цвета и стили границ таблицы (или ячейки), но не поставили никакого содержимого, то в некоторых браузерах эти границы не будут отображаться; нужно либо поставить неразрывный пробел, либо однопиксельный прозрач­ный GIF-рисунок. Возможно, вы решили создать вертикальные линии при помощи ячеек таблиц, залитых цветом при помощи CSS или HTML: если в этих ячейках не будет содержимого, то в Netscape и в некоторых случаях в Opera 6 они вообще не будут отображаться, если цвета заданы при помощи CSS. Наиболее корректная поддержка стилевых директив

3.

Верстка

Проведена в IE 5 и выше, в Netscape 6 и выше и в Opera 7 и позже, а так­же в Safari и прочих Gecko - и KHTML-базированных браузерах.

Под доступом к объектам имеется в виду вот что: какие свойства каких объектов можно задавать с помощью CSS. Например, фон стра­ницы. Поскольку при точном позиционировании фонового изображе­ния есть center, который отвечает за вертикальное размещение, и есть center, отвечающий за горизонтальное, то Internet Explorer 4 их просто путает и может начать отображать фон с середины страницы по верти­кали, разрезав ее на верхнюю и нижнюю половинки, вместо того чтобы разместить фон по центру. В разных браузерах фон то способен оставать­ся на месте с прокруткой содержимого, то не способен. Только в IE вер­сий 5 и позже есть практически полный контроль над элементами форм (цвета, размеры, но не всегда отступы), тогда как хуже всего он в Opera 6 и ниже и Netscape 4. Только в IE начиная с версии 5.5 и Opera 8+ есть контроль над цветом полосы прокрутки (не только боковой, для всей страницы, но и для элементов типа <iframe>), что, несомненно, удоб­но для дизайнеров, так как позволяет обеспечить максимальную цвето­вую совместимость элементов на странице. Контроль вида текстовых ссылок (вид и наличие подчеркивания, цвета) есть почти во браузерах, но в Netscape только начиная с версии 6, а в Opera полноценно — с вер­сии 7, т. к. до этого была частичная поддержка свойств, и цвета прихо­дилось задавать в <body>. Псевдокласс :hover для определения вида ссылки при наведении на нее курсора работает в Netscape только с 6 версии, а в 4-м игнорируется. В Opera 6 при наличии нескольких клас­сов для ссылок браузер иногда начинает «путать» эти классы.

Особого упоминания при разговоре о совместимости свойств CSS заслуживает возможность точного позиционирования объектов на странице. В Netscape 4 она реализована при помощи тэга <layer top=... left=...>, в остальных его версиях и в остальных браузерах с 4-5 версий — при помощи тэга <div> и стилевых директив (div style="position:absolute; left:30px; top:100px"). В пер­вом случае объект может позиционироваться только абсолютно (и здесь не идет речь о стилях, здесь авторский HTML от компании Netscape; кстати, внутрь этого тэга можно было вставлять целый отдельный доку­мент, т. е. это аналогия SSI). Во втором — и абсолютно (т. е. относительно края страницы), и относительно другого (родительского или соседнего) объекта. Для Internet Explorer возможность такого позиционирования (с 4 версии; в Opera начиная с версии 7) достаточно удобна в силу того, что позволяет отказаться от вложенных таблиц как средства верстки. Есть особый вид позиционирования (position:fixed), который позволя­ет элементу оставаться на одном месте относительно окна браузера (а не края документа) при прокрутке длинного документа; это дает воз­можность располагать в таких элементах меню и прочие нужные вещи без помощи длинных сценариев. Этот вид позиционирования есть

214

Браузер для пользователя...

3.5

В Opera и Netscape с 6-х версий, а в Internet Explorer нужно прибегать к трюку, полноценно имитирующему такое поведение элементов. Пол­ностью стилевые указания для блока (на его месте может быть любой элемент, способный быть точно позиционированным) звучат так:

<div style="width: 200px; height:100px; position: fixed; top: 100px; left:200; //position: absolute; top: expression(document. getElementsByTagName( 'body' )[0].scrollTop < 850 ? 100 + document. getElementsBy TagName('body')[0].scrollTop : '' + 'px'); z-index: 1000">Текст<^^>

Важно также в стилях написать: body {background: url ('1.gif') no-repeat; background-attachment: fixed} (вмес­то 1.gif может быть любая фоновая картинка, в данном случае про­зрачная). Это, как ни странно, влияет на то, чтобы в Internet Explorer не было «дрожания» блока при прокрутке страницы. В IE 7 позициони­рование position:fixed работает и без таких ухищрений.

Четвертую группу составляют различия в интерпретации объект­ной модели документа (DOM, или Document Object Model).

В целом стоит сказать, что теоретически с помощью языков ак­тивных сценариев можно получить доступ к любому свойству любого элемента страницы. На деле не все так радужно.

В частности, браузеры 4-го поколения и Opera 6 фактически не позволяли изменять (и даже проверять) свойства форм и их элемен­тов. Со свойствами точного позиционирования тоже были сильные проблемы. Не были доступны все типы линий и все параметры рас­положения фонового изображения. Нельзя было строить при помощи DOM новые элементы на странице (правда, Internet Explorer 4.0 уже был способен на это, но вразрез со спецификацией W3C, при помощи собственных технологий), а новые свойств существующих элементов можно было определять очень ограниченно. Фактически, полноценная поддержка DOM появилась в IE с 5-й версии, в Netscape с 6-й (когда он «перешел» на Gecko; соответственно, более или менее последова­тельная реализация объектной модели документа есть во всех Gecko - и KHTML-браузерах), в Opera становление полноценной поддержки про­изошло где-то в промежутке между 7 и 8 версиями (на заметку: с 1 по 3 версию использовался малофункциональный оригинальный «движок», с 4 версии «движок» Electra, с седьмой версии Presto, с девятой версии Merlin; размер установочных файлов увеличивается несущественно, но функциональность прибавляется).

Доступ к элементам в IE 4 версии и выше осуществляется при помощи следующей директивы: document. all["id элемен - та"].style. свойство="значение" (или просто id элемента.