Технологии
При выборе технологий верстки я руководствуюсь двумя принципами:
- идти в ногу со временем, используя все существующие возможности HTML, CSS и JavaScript.
- осматриваться назад и не оставлять на произвол судьбы браузеры-ветераны, которыми до сих пор пользуются в государственных учреждениях. По умолчанию в своих проектах я поддерживаю работу старых версий браузеров, в частности Internet Explorer 6.
Таким образом, верстая сайты, я выбираю наиболее оптимальные решения. Использую красивые возможности CSS3 (закругленные уголки, тени, градиенты и другие), не забываю при этом о более дружелюбном с браузерами CSS2. Экспериментирую с HTML5 (элементы уровня блока, семантические элементы уровня текста, элементы мультимедиа и др. ) и продолжаю работать с надежным HTML4. Придаю динамику и скорость сайту с jQuery и его возможностью асинхронной загрузки данных.
Блочная верстка
Что касается наболевшей темы DIV против Table, могу смело сказать, что таблицами для разметки структуры страницы не пользуюсь уже давно. Для этого существует специальный тег <div></div> – блок. Отсюда и название верстки – блочная. Таблицы использую только для верстки табличных данных. На практике пока не встречал макетов, которые невозможно реализовать без помощи таблиц. Как правило, блочная верстка легче табличной, в ней меньше кода, блочная верстка намного понятнее и более гибкая, чем верстка табличная.
Семантическая верстка
В то же время, блочная верстка не предполагает использование только тега <div></div>. Многие начинающие верстальщики не правильно применяют этот тег и используют его там, где не нужно. У каждого тега есть свое применение, свой смысл. Заголовки, списки, таблицы, абзацы, цитаты, ссылки, изображения и другие теги придуманы не с проста. Каждый из них несет свой смысл, а между собой теги образуют смысловые отношения. Верстка, которая наделена смыслом, которую может читать не только человек, но и компьютер, называется семантической версткой. Семантика (фр. s?mantique от др.-греч. — обозначающий). Почему я использую в работе семантическую верстку? Потому что она легче, она понятнее, она дает возможность видеть страницу по HTML коду, быстрее вносить изменения в код, тем самым экономить время и деньги.
Проверить семантическая верстка или нет можно отключив CSS в HTML документе. Если верстка семантическая, то мы должны увидеть документ напоминающий книгу, где ко всем элементам будут применены CSS стили по умолчанию. В семантической верстке должны четко выделяться заголовки разных уровней (h1-h6), расположенные по порядку, списки нумерованные (ol), маркированные (ul) и список определений (dl), таблицы (table), картинки (img), абзацы (p), выделение текста жирным (strong), курсивом (em) и другие элементы.
Кроссбраузерная верстка
С появлением новых браузеров и выпуском очередных версий старых у верстальщика появляется еще больше работы. Значение кроссбраузерности нельзя недооценивать, так как основная задача верстальщика – это передать замысел дизайнера конечному пользователю, предоставить ему возможность просматривать страницу с любого устройства, с любым разрешением, с различной скоростью подключения к интернету, сделать его работу удобной и приятной.
Самым проблемным браузером, как правило, является IE6, поэтому я к нему пишу отдельный CSS файл, который подключаю через условный комментарий. Таким образом все другие браузеры этот стиль не увидят и будут применять к HTML документу общие стили. Как правило, для других браузеров не приходится писать какие-либо хаки, т.к. в 95% случаев при возникновении проблем с кроссбраузерностью в современных браузерах, первым делом стоит искать ошибку у себя в коде.
Сверстанный мной макет одинаково выглядит во всех популярных браузерах (Internet Explorer 6.0 +, Mozilla Firefox 2.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +). Проверить кроссбраузерность можно через специализированные сервисы.
Валидная верстка
В первом сверстанном мной сайте я нашел более 100 ошибок валидации. Тогда я подумал: “Наверное эта профессия не для меня, я закопаюсь, разбирая все эти ошибки”. Но со временем я понял, что все не так страшно. Чтобы разобраться с ошибками валидации и не допускать их при верстке, первое что бы я посоветовал – это почитать спецификацию HTML и CSS. Макет сделанный по спецификации будет проходить валидацию с первого раза и радовать глаз верстальщиков зеленым цветом и надписью: “This document was successfully checked as HTML5!”. Как правило, все документы, которые я верстаю проходят валидацию без дополнительных поправок. Но несмотря на это, каждую верстку я проверяю на наличие HTML и CSS ошибок.