Основы кроссбраузерной верстки

Почему кроссбраузерность сайта так важна

Представьте вы зашли на сайт, а он весь кривой и половина его функционала не работает — вы останетесь на нем или закроете? В общем если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования — отсюда вы просто, на просто теряете посетителей (а это ваши деньги), которые будут уходить с него, не просмотрев и одной страницы. А из этого вытекает еще пару SEO проблем, которые тянут сайт в низ: увеличится показатель отказов (довольно весомый поведенческий фактор ранжирования сайтов) и падают конверсии.

При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:

сохранить структуру;
не допустить развала верстки;
избежать наложения текста на текст, изображения;
сохранить читабельность информации.

Главное, чтобы клиенту было удобно читать, просматривать изображения и совершать действия на сайте с того браузера, которым он привык пользоваться.

Признаки правильной вёрстки

Структура страницы составлена в HTML, в то время как стили вынесены в style.css. В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.
У хорошего сайта при просмотре кода отображается только вёрстка. Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.
Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.
Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.
Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.
Обязательно соблюдайте кроссбраузерность. Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.
Используйте заголовки H1, H2, …, H6.
Заполняйте атрибуты элементов: <title>, <alt>, <description>.
Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.

Инструменты для кроссбраузерного тестирования

IE тестер. Если вы разработчик, которому нужен инструмент, который просто поддерживает Internet Explorer, тогда этот инструмент для вас. IETester — бесплатное веб-приложение, которое позволяет вам видеть веб-страницы с помощью Internet Explorer 5.5, 6, 7, 8 и 9. Его интерфейс напоминает интерфейс MS Word 2007.
Виртуальная лаборатория разработчиков DotMobi. Это бесплатный веб-инструмент, который позволяет проверять ваши сайты на реальных устройствах, включая iPhone, с использованием технологии удаленного доступа. Чтобы воспользоваться этой услугой, вам необходимо предоставить документ, удостоверяющий личность, например, кредитную карту. Это делается для предотвращения злоупотребления устройствами.
Sauce Labs. Это инструмент для тестирования вашего сайта в различных версиях браузеров и операционных систем. Он был особенно рекомендован Adobe Systems после того, как они закрыли свою Adobe Browser Lab. Sauce Labs предлагает тестирование более 250 различных версий браузеров и устройств. Также они предоставляют инфраструктуру тестирования, которая включает средства тестирования Selenium, JavaScript, Mobile и Manual. Вам не придется настраивать виртуальную машину вручную. Просто выберите свою операционную систему и все браузеры, которые вы хотите протестировать.
CloudTesting. Этот инструмент позволяет веб-разработчикам просматривать веб-сайты с помощью любого из веб-браузеров, перечисленных ниже: Internet Explorer 6, 7, 8, Mozilla Firefox 3, 3.5, 3.6, Apple Safari 3.2, 4.0, 5.0, Google Chrome, Опера 9,6. Его могут использовать как веб-разработчики и тестеры, так и менеджеры сайтов.
Browser Photo. Предоставляет вам реальные фотографии того, как ваши веб-страницы будут выглядеть в разных веб-браузерах и платформах.
Browsera. Этот инструмент проверяет кроссбраузерную компоновку вашего сайта. Также Browsera в автоматическом режиме уведомляет вас о возможных проблемах, которые инструмент обнаруживает при тестировании вашего сайта. Вместо проверки каждого снимка экрана вы получите отчет, в котором будет подробно рассказано, на каких страницах вашего сайта есть проблемы.
CrossBrowserTesting. Тестирует ваш сайт с помощью браузера и удаленного VNC. С помощью него вы можете протестировать свой AJAX, JavaScript и Flash на любом браузере. Вам просто нужно указать URL, выбрать браузер и запустить программу. Поддерживаемые браузеры: Chrome от 5 до 8, Firefox от 1.0 до 4 бета, Internet Explorer 5.0 до 9 бета, Safari Mobail, Mozilla 1.7, Opera. Поддерживаемые операционные системы и устройства: Android, IPad, iPhone 3GS, Iphone 4, Mac OSX 10.5.7, 10.5.8 и 10.6, Ubuntu 8.10, Windows 7, 98 SE, XP (SP2 и SP3), Vista. Инструмент платный, имеет три плана на выбор и бесплатную пробную версию.
TestingBot. TestingBot предлагает тестирование для более чем 100 различных комбинаций браузера и операционной системы. Инфраструктура тестирования основана на Selenium. Тесты могут быть выполнены вручную или автоматически. Для использования TestingBot необходимо создать учетную запись. Они предлагают бесплатную версию с ограниченным функционалом. В целом, это хороший инструмент для тестирования вашего сайта на разных устройствах и браузерах.
Microsoft Expression Web SuperView. Это новая технология, созданная для облегчения жизни разработчиков. Автономная версия этого программного обеспечения поддерживает только веб-браузеры IE, в то время как полная версия может поддерживать браузеры Mozilla Firefox и Apple Safari.

Почему же все такие проблемные?

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

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

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

Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то , Safari, или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.

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

Что такое кросс-браузерное тестирование?

Кросс-браузерное тестирование — это практика обеспечения уверенности в том, что веб-сайты и веб-приложения, которые вы создаёте, работают в приемлемом количестве браузеров. Обязанность веб-разработчика быть уверенным, что проект работает не только у вас, а у всех ваших пользователей, независимо от браузера, устройства, или других вспомогательных инструментов, которые они используют. Вы должны думать о:

Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.
Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и «умных» телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.
Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).

Поймите, что вы — не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей — нужно сделать много тестов!

Примечание: Статья сделаем веб доступным для всех предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.

Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, «работающих кросс-браузерной», на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.

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

Когда мы говорим «приемлемое количество браузеров», мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. ), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.

Примечание: Мы разберём defensive coding позже в этом модуле.

Я с лёгкостью положил КОНЕЦ своим мучениям с вёрсткойтеперь просто наслаждаюсь от того, насколько мне легковерстать даже самые сложные сайты. И я хочу показать Вам,что Вы тоже так можете!

Вам уже надоело то, что Вы знаете HTML и CSS (если даже не знаете, то читайте дальше и поймёте, как узнать), выучили уже множество тегов, но не знаете, как применить их для вёрстки даже простого сайта? Допустим, у Вас есть такой дизайн:

Вы представляете, как эту картинку перевести в код HTML+CSS? То есть, чтобы это было не картинкой, а чтобы был текст, ссылки, выпадающие меню и всё остальное. Если Вы прекрасно знаете, как и что Вы будете делать, чтобы превратить эту картинку в HTML-страницу, которая при этом будет кроссбраузерная и адаптированная под разные разрешения, а код при этом будет чистым, читабельным и валидным, то можете дальше не читать… Только думаю, что 99% из Вас не могут похвастаться такими знаниями.

Замучились справляться с тем, что Вы не знаете, как разбить страницу на блоки, какие свойства надо применить к нему, как сделать закруглённые углы, красивые текстовые поля, кнопки и прочее. Вы отчаялись добиваться того, чтобы картинка в Photoshop совпадала с тем, что Вы видите в браузере, отчаялись пытаться добиться одинаково хорошего отображения в разных браузерах (то есть кроссбраузерности), устали от того, что при разных разрешениях ломается вся вёрстка? В конце концов, Вы утомились от того, что даже, порой, не знаете, как приступить и с чего начать?

Ну тогда, то, что я сейчас Вам скажу, станет для Вас бальзамом на душу…

Я собираюсь показать Вам, как НАУЧИТЬСЯ верстать сайты любой сложности, при этом делать это с валидным и чистым кодом, кроссбраузерно и с адаптированием под разные разрешения экрана.

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

Меня зовут Михаил Русаков, и я Вам немного расскажу о своей бывшей проблеме.

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

Сначала я пытался передавать вёрстку другим людям, которые называли себя «спецами». Вы себе представить не можете, сколько людей, через меня прошло. И ни один «специалист» не мог сверстать хорошо. Так, чтобы HTML-страница хотя бы примерно напоминала дизайн. Я уже молчу про то, что кроссбраузерность так хромала, что на сайт нельзя было смотреть без слёз. Про адаптирование под разные разрешения экрана, я уже просто молчал.

Тоже самое касается и всяких компаний, только они дерут ещё втридорога! Впрочем, неудивительно, ведь сами сайты этих компаний свёрстаны безобразны, как они своим клиентам могут сделать лучше?

Hard skills верстальщика

Расстрою ленивых — одними HTML и CSS вы не обойдётесь. Полезных технологий и инструментов много, однако есть must have для любого верстальщика. Перечислю всё необходимое.

Основы дизайна. Верстальщик должен владеть базовыми концепциями UX/UI. Например, понимать, почему 12-й размер шрифта слишком маленький, а светло-серый цвет на белом фоне смотрится так себе. Для начала можно прочитать книгу Стива Круга про веб-юзабилити «Не заставляйте меня думать». Это бессмертная классика для всех, кто работает с вебом.

Кадр: фильм «Волк с Уолл-стрит»

Препроцессоры. С препроцессорами вёрстка идёт удобнее и быстрее. Например, c SASS можно использовать переменные и функции в CSS, а с Pug — то же самое, только в HTML. Кроме того, с Pug можно создавать вложенные конструкции без скобок и даже взаимодействовать с JavaScript-кодом.

Пример кода Pug. Скриншот: предоставлен автором

Pug не расширяет язык, но позволяет использовать фишки, которых нет в HTML, например циклы. Представим, что нужно вывести 5 карточек товаров на статичном сайте. Способ в лоб: сверстать на HTML одну карточку, скопировать её 5 раз и в каждой копии изменить данные. А если карточек не 5, а 100? В Pug можно создать шаблон карточки, чтобы не пришлось выполнять одну и ту же работу много раз.

SASS решает аналогичные задачи. Например, у нас есть шаблон кнопки — он представляет собой набор стилей, который наследуют другие элементы button на странице. Без препроцессора нам пришлось бы копировать все стили и создавать отдельный класс для каждой кнопки. А с SASS мы лишь переопределим некоторые свойства класса. Можно даже сделать миксин — такой шаблон, который мы назовём button и будем вызывать каждый раз, когда понадобится очередная кнопка.

Пример миксина в SASS. Скриншот: предоставлен автором

Ещё один пример. Допустим, дизайнер создал 50 иконок с пятью размерами — и для каждой нужно создать отдельный класс. Можно действовать прямолинейно: 50 раз скопировать селектор и во всех копиях поменять название. А можно создать массив в SASS и в нём сделать 50 иконок. В общем, гораздо проще запрограммировать препроцессор, чем писать всё вручную.

Bootstrap и другие фреймворки. В Bootstrap все настройки находятся в одном файле _variables.scss, что значительно упрощает код и его понимание. В этом же файле указаны все цвета, параметры закругления кнопок и элементов, шрифты и отступы — их легко установить с помощью одной переменной.

Пример кода Bootstrap. Скриншот: предоставлен автором

Рекомендую изучить хотя бы один популярный фреймворк — ведь в коммерческой разработке вы неизбежно с ними столкнётесь. А зная один фреймворк, вы уже относительно быстро разберётесь с другими — как с документацией, так и с кодом. Учтите, что в документации Bootstrap описаны только основные моменты, освоить его по-настоящему можно только в процессе разработки.

JavaScript. Как минимум, нужно умение подключать сторонние библиотеки или настраивать слайдер. Верстальщик не только работает со стилем, но и создаёт базовые функциональные элементы, проверяет, как ведут себя кнопки и отправляются данные. В проектах я часто пишу что-то несложное на JavaScript: слайдеры, переключатели и простенькую анимацию. Всё это собирается на ванильном JS — и это must have. А если в команде пишут на React, то и его придётся освоить на базовом уровне.

Сборщики (например, Webpack). Если научитесь запускать их по инструкции, этого будет достаточно. Начинающему верстальщику не нужно глубоко понимать сборщики, потому что на проекте с ними, как правило, работают фронтендеры.

Виртуальные окружения. Хватит умения разворачивать и настраивать их, прокидывать пакеты, переустанавливать переменные.

Кроме того, вам наверняка пригодятся и дополнительные инструменты:

Git — чтобы хранить проекты и управлять ими.
Docker — чтобы упаковывать проекты со всеми окружениями и зависимостями (если Docker используют в компании).
Командная строка Linux или macOS — чтобы автоматизировать работу.
Node.js — чтобы устанавливать, обновлять и удалять npm-пакеты.

Остальное зависит от того, какие технологии используют в конкретной компании. Где-то пишут на PHP, а где-то на Ruby или Python. Например, у нас в Hexlet верстальщики даже иногда копаются в Ruby и строят бизнес-логику под компоненты, которые верстают. Но это скорее исключение, чем правило.

Видимость сайта в Internet Explorer

Возвращаясь к статистике StatCounter, мы обнаруживаем, что, в мире, браузер Microsoft Internet Explorer, занимает третье место, по использованию. А это значит, что игнорировать это браузер со всеми его версиями нельзя.

Проверить видимость сайта в Internet Explorer можно очень просто. Есть специальный инструмент – проверка кроссбраузерности сайта во всех версиях Internet Explorer, сервис netrenderer.com. Далее его описание, позаимствованное с сайта сервиса.

IE NetRenderer позволяет вам проверять, как веб-сайт отображается многочисленными версиями Microsoft Internet Explorer. Особенно старые версии веб-браузеров Microsoft известны своим неожиданным поведением и несоблюдением интернет-стандартов W3C. Поэтому для каждого веб-дизайнера нужно обязательно регулярно проверять свои веб-сайты на совместимость с этими веб-браузерами. Просто введите URL-адрес проверяемой веб-страницы в поле и нажмите кнопку «Render». Через несколько секунд вы получите скриншот страницы. Попробуйте, это бесплатно!

Сервис IE NetRenderer работает быстро. В отличие от других служб скриншотов, мы можем обрабатывать большое количество захваченных заданий параллельно и в реальном времени. Скорость рендеринга должна быть сопоставимой, если не быстрее вашего локального браузера. Наши двигатели IE имеют гарантированную пропускную способность интернета в 200 Мбит/с.

Для чего подходит

Этот инструмент веб-рендеринга идеально подходит для веб-дизайнеров, работающих на рабочих платформах Apple iMac и Linux. Он позволяет проверять веб-проекты изначально на всех популярных версиях Internet Explorer, без необходимости выделять несколько физических или виртуальных ПК с Microsoft Windows для этой цели. Перед каждым заданием рендеринга мы очищаем кэш Internet Explorer. Это позволяет сразу увидеть эффект от всех изменений, внесенных во время веб-разработки.

Обычно IE Netrenderer показывает только самую верхнюю часть любой веб-страницы. Если вы хотите увидеть части страницы ниже, введите вертикальное значение смещения пикселя в поле справа на URL. Затем рендеринг начинается с указанной позиции вертикального пикселя.

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

Снимок экрана всегда соответствует 100% оригинального размера и точности картинки вплоть до пикселя. Пользователь отмечает максимальную ширину видимого просмотра на экранах 800×600 и 1024×768 с учетом ширины полосы прокрутки браузера.

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

Можете использовать его в качестве приблизительной оценки, скорости загрузки веб-сайта людьми в Центральной Европе. Вы также можете использовать IE NetRenderer для просмотра веб-сайтов анонимно. Посетив веб-сервер вы не оставите никаких следов ни о вашем IP-адресе, ОС, версии браузера, плагинах или файлах cookie.

Что нужно для кроссбраузерной верстки – инструменты

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

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

Общие знания о верстке;
Знания в области особенностей верстки под те или иные браузеры;
Несколько браузеров на одном компьютере;
Проверка в сервисе browsershots.org

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

Отдельный фронт работ нужно провести с заказчиком. Ему нужно объяснить, что в мире web-дизайна нет ничего идеального, и что некоторыми моментами придется пожертвовать. Задачей команды дизайнеров и программистов становится создание сайта, который должен соответствовать следующим пунктам:

Максимальное соответствие исходному макету и пожеланиям заказчика;
Максимальное корректное отображение во всех популярных браузерах;

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

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

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

Когда создаётся сайт, то важным в плане обеспечения его эффективности является кроссбраузерная верстка. Что это такое? Как её можно сделать? Какие подводные камни существуют?

ЗаключениеСкопировать ссылку

Здесь описаны далеко не все приёмы, а лишь дан общий обзор основных способов вёрстки. Они предназначены для обхода недостатков CSS при раскладке элементов. Этих методов явно недостаточно, но они дают возможность использования неочевидных приёмов, и позволяют полнее раскрыть возможности браузеров.

Уже на подходе модули, которые прямо предназначены для сложного оформления. Модуль CSS Flexible Box Layout, близкий к выпуску на момент написания статьи, позволяет гораздо более гибко выравнивать элементы и распределять доступное пространство между ними.

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