Блог студии 77

CSS-верстка

28 августа 2011

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

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

Сегодня профессиональное создание сайта – это труд нескольких разноплановых специалистов. Веб-дизайнеры разрабатывают макет страниц сайта и вместе с фотографом готовят иллюстрационные материалы. Верстальщик переводит макет в HTML-код и следит за тем, чтобы сайт одинаково хорошо отображался на мониторах всех возможных пропорций и размеров в любом популярном браузере. Результат работы верстальщика переходит к программистам, которые собирают воедино HTML, Php, MySql, JavaScript, Ajax, JQuery, Smarty, XML и прочие технологии, делающие сайты такими, какими мы их привыкли видеть. Когда в одном проекте используется такое большое количество технологий, разработчикам очень важно соблюдать порядок и придерживаться стандартов. Создаваемый код должен быть удобочитаемым для других специалистов, позволять максимально просто вносить дополнения и изменения.

В девяностых было обычным явлением, когда созданием сайта для крупной организации занимался один-единственный человек. В его задачи входило написание HTML-страницы и публикация ее в сети интернет. Умение использовать JavaScript – большой бонус специалисту, т.к. его сайты под новогодние праздники украшались падающими снежинками.

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

В 1997 году Дэвид Сигел изменил Web, когда написал о технике создания визуально наполненных web-страниц на основе таблиц (используя элементы HTML – Table). Хотя данный тег был создан, прежде всего, для представления обычной табличной информации, ему нашлось более широкое применение – с его помощью удалось воспроизводить на веб-страницах традиционные для печатной продукции разметки. Верстка и создание дизайна на основе таблиц позволила отойти от сухой линейной подачи информации. Она дала толчок к появлению большого количества визуально красиво наполненных сайтов.

И хотя просматривать такие сайты стало значительно приятнее, разработчики понимали, что бесконечные таблицы приводят к ужасно запутанному коду. Многие специалисты, включая Дэвида Сигела, были категорически настроены против использования таблиц для разметки страниц, но, в отсутствие какой-либо рабочей альтернативы, все продолжали их использовать.

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

Смешивание дизайна и контента создает огромные трудности для людей с ограниченными возможностями (по статистике, таковыми являются 19% активных пользователей интернета), использующих программы считывания с экрана, текстовые браузеры, и прочие альтернативные устройства. Информация в табличной верстке всегда идет категорично последовательно – сверху вниз, слева направо, что может противоречить семантической логике. Например, в разметке с тремя колонками есть левая, средняя и правая колонка, первые две отведены на рекламные блоки и дополнительные функции, а правая – непосредственно под информационный материал. У обычного пользователя данная разметка не вызовет никаких сложностей – он произвольно перемещается по странице и сам определяет степень важности опубликованных материалов. Но при просмотре таких страниц в текстовых браузерах или с помощью программ считывания информации с экрана, пользователь будет вынужден ознакомиться полностью сначала с содержимым левой колонки, затем средней и только потом правой. По такому же принципу сайт просматривается поисковыми системами. Последовательно просматривая огромное количество кода, поисковый робот может просто не дойти до важной информации, тем самым не проиндексировав наш сайт нужным образом.

Табличная верстка

К счастью, вскоре появилась удачная альтернатива табличной верстке – CSS верстка. В современных сайтах принято использовать разметку на базе каскадных таблиц стилей (CSS). С помощью CSS мы можем убрать все элементы кода, отвечающие за стилизацию, и переместить их в отдельный служебный файл. Такое разделение моментально повышает читаемость кода, т.к. теперь код, отвечающий за визуальное оформление, информационные материалы и программные скрипты не пересекаются. При таком подходе подавляющее большинство изменений в оформлении всего сайта можно делать только лишь из каскадных таблиц стилей. Например, определяя тип устройства посетителя и автоматически меняя CSS-файлы, дизайн сайта будет при необходимости отображаться в виде мобильной версии.

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

Несмотря на все преимущества, до сих пор многие разработчики по причине своих некрепких знаний в работе с CSS делают свои сайты на основе таблиц. Тем не менее, следует ожидать, что в очень скором времени табличная верстка окончательно вымрет, вместе с Internet Explorer 6. А применение современной спецификации CSS (на данный момент согласованная версия CSS 2.1 и разрабатывающаяся CSS 3) является правильным выбором с ориентиром на удобство, кроссплатформенность, функциональность и гибкость.

CSS-верстка

Другие статьи автора: