214-697-723 |
info@mainsource.ru |
(812) 946-31-81
Все контакты
Автор статьи Голубовская Ольга
Web-вёрстка по стандартам
Прошло уже более 15 лет с начала войны браузеров, первый этап которой закончился полной победой Internet Explorer,
занявшим более 95% IT рынка в 1998 году. Каждый производитель программ web-обозревателей стремился сделать своё детище
уникальным, снабжая браузер нестандартными возможностями, такими как поддержка JavaScript и другими,
что приводило к серьёзным различиям в отображении сайтов в разных браузерах, и это явление стало называться кроссбраузерностью.
Однако производителей браузеров захлестнула новая волна борьбы за клиента, которая длится до сих пор,
даже несмотря на введение web-стандартов в том же 1998 году, которые были призваны остановить гонку вооружения браузеров
нестандартными технологиями. В связи с этими обстоятельствами и по сей день можно встретить невалидную вёрстку на многих
сайтах с посещаемостью более 1000 человек в сутки. Один из учредителей web-стандартов Джеффри Зельдман (Jeffrey Zeldman)
полагает, что причиной такого подхода к вёрстке является ни что иное как застрявший в прошлом ум web-дизайнеров,
которые привыкли к некорректному отображению кода в разных браузерах и на разных платформах.
В 1990-х годах единственным выходом из такого положения было либо игнорирование части аудитории, а значит и потенциальных
клиентов сайта, когда сайт разрабатывали под конкретный браузер, что вело к потере значительной части прибыли,
либо написание кода под каждый отдельный браузер и его версии, а также каждую конкретную платформу, что требовало уйму
времени и расходов не только на разработку, но и на обслуживание таких быстро устаревавших сайтов.
Помимо всего прочего излишние мегабайты кода давали большую нагрузку на web-сервер, что снова увеличивало расходы компании
на оплату услуг хостинг-провайдера. Несмотря на то, что эти времена отсутствия единых web-стандартов уже канули в лету,
некоторые web-дизайнеры до сих пор используют устаревшие приёмы, такие как теги <font>, <center>,
которые по сути являются оформлением сайта и должны быть описаны средствами CSS, или ещё хуже оформление за счёт html-скриптов
(см. книги Lynda Weinman и David Siegel), карты изображений, фигурные нарезки,
таблицы для разметки страницы, что также стало совсем неактуально вследствие появления таких элементов вёрстки как
<div> и <span>. Каждая новая версия CSS становится более совершенным инструментом
оформления web-страниц и этим надо уметь пользоваться.
В своей книге «Вёрстка по стандартам» Джеффри Зельдман называет трёх китов стандартизированной вёрстки:
Структура в виде текстовых данных, структурированных в логическом порядке «заголовок-абзац-список»,
которую рекомендуется реализовывать за счёт XHTML, XML или HTML;
Внешний вид, который необходимо описывать средствами CSS2, CSS3 отдельно от структуры в другом файле;
Поведение, которое также рекомендуется расписывать в отдельном файле при помощи ECMAScript
(стандартизованный JavaScript) и объектной модели DOM.
Из этого следует, что структура web-страниц становится логичнее и проще, а значит меньше вероятность ошибки браузера,
а также уменьшается количество кода при отделении оформлении от структуры, что существенно снижает трафик,
нагрузку на сервер и все расходы, связанные с разработкой и обслуживанием сайта. Однако всё выглядит достаточно просто,
пока концепция web-стандартов не реализуется на практике, поскольку до сих пор между основными лидирующими браузерами
множество несоответствий, которые приходится обходить часто за счёт громоздкого кода и даже иногда при помощи двух таблиц
стилей для одного и того же сайта. Ситуация усложняется, когда мы вспоминаем про статистику, которая сообщает нам,
что даже в 2010 году многие пользователи сети до сих пор работают на старых браузерах типа IE6
(июль, август — 7.2% в мире, 49% из 54% всех версий IE в Рунете), в котором разница отображения страницы
существенна по сравнению со многими современными браузерами. Некоторые разработчики и по сей день пишут скрипты для
определения версии браузера пользователя, чтобы иметь возможность обойти кроссбраузерность, используя условные
комментарии для IE, либо загромождая код очередными скриптами под определённые версии браузеров.
Впрочем, скоро этой практике придёт конец. Новая версия IE9, выходящая в свет в сентябре, перестанет воспринимать
условные комментарии, зато будет обладать более полной совместимостью с современными web-стандартами,
что существенно может упростить веб-разработку. Кроме того, скрипты определения версии браузера часто создают ошибки и
не справляются со своей задачей.
Поскольку старые браузеры всё ещё используются, некоторые web-дизайнеры считают обратную совместимость
наиболее рациональным подходом. Однако, обеспечивать совместимость сайта со старыми версиями браузеров неоправданно,
так как стоит многих денег, поскольку сайт будет тяжёлым из-за вариативности кода под каждый браузер,
что серьёзно перегружает сервер и может стать причиной переплаты хостинг-провайдеру за превышение трафика.
Вместе с тем, абсолютно неверным считается ориентация на один конкретный браузер при разработке сайта, так как это
означает потерю потенциальных клиентов, и соответственно, прибыли компании.
Что же такое валидный написанный по стандартам код? Это код на котором реализуется принцип GIGO
(garbage in — garbage out) — «мусор на входе и мусор на выходе», из которого следует,
что чем больше замусорен код, чем меньше в нём логики и больше всяких уловок, взаимоисключающих правил для разных браузеров,
тем хуже результат — ошибки браузеров, сложности с обновлением, дорогостоящее обслуживание сайта и не всегда
безупречное отображение в браузерах.
Web-дизайнеры мира предлагают такие средства улучшения кода, как разделение оформления и структуры,
а также использование метаструктурных элементов (созданных с помощью общих структурных элементов и определённых атрибутов).
В этих целях W3C рекомендует использовать такие механизмы формирования структуры, как <div>,
<span>, "id" и "class". Однако не стоит злоупотреблять метаструктурными элементами.
Необходимо обращать своё внимание на стандартные элементы html также призванные организовать структуру документа —
<h1>, <ul>, <p> и прочие. Код можно сделать практически невесомым,
если хорошо продумать не только структуру, но и последовательность расположения элементов на странице,
так, чтобы она соответствовала логике браузера, и чтобы не пришлось дополнительно позиционировать каждый элемент в потоке.
Чтобы отображение было везде одинаковым, следует использовать файл сброса стилей по умолчанию «reset.css»
(см. Eric Meyer’s Global Reset, Christian Montoya's initial CSS file, Mike Rundle's initial CSS file,
Ping Mag's initial CSS file). Сокращённые варианты записи цвета, отступов, границ и шрифтов также способствуют
похудению кода. Однако сделать код можно сделать ещё легче, используя принципы наследования, контекстных или наследуемых
селекторов и группирования элементов со схожими стилями оформления в CSS. Многие другие полезные правила,
избавляющие web-дизайнера от необходимости писать лишний код, можно найти в этой статье:
.
Из всего вышеизложенного можно с уверенностью утверждать, что при разработке сайтов соблюдение web-стандартов
важно как для увеличения прибыли компании, так и для обычных посетителей информационных сайтов,
чтобы тщательно разработанный дизайн одинаково красиво выглядел во всех браузерах независимо от их производителя и
версии и при этом не нарушалась юзабилити сайта. Именно поэтому целостный подход к web-дизайну основан на следовании
web-стандартам.
В целом очень интересно. Но есть некоторые замечания:
...что серьёзно перегружает сервер и может стать причиной переплаты хостинг-провайдеру за превышение трафика...
Обычно для поддержки кроссбраузерности используется js который работает на клиентской стороне и не может нагружать сервер. Да еще так чтобы пришлось доплачивать хостеру :)
Так js все равно скачивается же с сервера и тем самым увеличивает общий трафик.
Также все равно приходится увеличить html-код за счет какой-то подстройки к конкретному браузеру.
Тем самым увеличивается нагрузка на сервер из-за дополнительных скачиваний. А также если ресурс популярный либо очень интенсивно используется, то хостеру за большие объемы доплачивать придется 100%
214-697-723 |
info@mainsource.ru |
(812) 946-31-81
