Кроссбраузерная верстка

Кроссбраузерная верстка

При разработке сайта особое внимание должно быть уделено верстке макета. Необходимо, чтобы дизайн сайта соответствовал заявленному макету во всех современных браузерах. Дело в том, что разные браузеры используют свои движки, которые могут по-разному обрабатывать HTML-код страниц сайта. Чтобы HTML содержимое правильно предоставлялось пользователю, необходимо «обучить» все браузеры, как нужно отображать страницу.

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

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

Проблем с различным отображением элементов в браузерах в зависимости от спецификации HTML удалось избежать с разработкой и внедрением технологии HTML5! Теперь спецификация всего одна, что позволяет делать сайты более кроссбраузерными. В HTML5 появились новые теги, такие как footer, header, section, article, video, nav. Их использование позволяет сделать верстку более семантичной, а также код становится читаемым. Так как старые браузеры не поддерживают HTML5, то все эти теги прописываются в начале CSS файла с указанием того, как нужно отображать элемент на странице. Обычно в качестве отображения используется свойство display со значением block. Таким образом, все неизвестные теги браузер обрабатывает как div.

Незаменимым инструментом для верстальщика станет browsershots.org. Сервис позволяет создавать скриншоты сайта более чем в 100 браузерах, управляемых несколькими операционными системами (Windows, Macintosh, Linux). Скриншоты выполняются в порядке очереди. Обычно на сайте очень много пользователей и очереди достигают до 30 минут. Среднее время для создания 50 скриншотов 20-25 минут. Сервис поддерживает также устаревшие браузеры, но они тем не менее используются пользователями, а следоваетельно информация будет для вас полезна.