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

18.06.2019

Среди всего разнообразия существующих на данный момент браузеров таких как Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox и, конечно же браузер Амиго, который имеет способность самопроизвольно устанавливаться на компьютеры, стоит только посмотреть на ссылку. И у любого из браузеров имеется большое количество версий, выходящих одна за другой. Поэтому каждая новая версия каждого браузера имеет свои собственные особенности. И для корректной работы сайта в каждом из них необходимо использовать кроссбраузерную верстку .

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

Самым «веселым» из браузеров, конечно же является браузер Internet Explorer, хотя при всем при этом большинство пользователей до сих пор используют этот браузер. Так если сайт предварительно проверялся на Chrome, а потом его открывают в Explorer, и, о, ужас. Блоки перепутаны, кнопки меню наезжают друг на друга, картинки отображаются некорректно, в общем, полный хаос.

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

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

Причины проблем с отображением сайта.

Теперь давайте разберем, почему происходят такие неприятности с восприятием кода в разных браузерах.

Верстка не соответствует некоторым стандартам HTML.
/i>Постоянно обновляются и появляются новые библиотеки и правила CSS. Они прекрасно воспроизводятся обновленными версиями браузеров, но могут некорректно отображаться старыми версиями.
Internet Explorer . Самый странный браузер, который не понимает половину всех правил и поэтому постоянно придумываются новые хаки, чтобы обойти эти проблему IE.
Значение атрибутов по умолчанию . В каждом браузере это значение может быть разным. Атрибуты – это цвета элементов, шрифты, их размер. Все это должно быть описано в таблице стилей, в противном случае браузер будет самостоятельно проставлять значения, указанные во свех из них по умолчанию. Поэтому в каждом из них сайт будут отображаться по разному.

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

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

Совет 2. Установите все популярные браузеры на свой рабочий компьютер, а также все версии браузера Internet Explorer. Так как установить сразу несколько версий на один компьютер без особых танцев с бубном непросто, то можно установить Internet Explorer Tester. Эта программа дает возможность проверять сайт сразу же на нескольких версиях браузера.

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

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

Для Chrome на сайте getfirebug.com
Для Opera на официальном сайте Opera
Для Mozila на сайте addons mozila
Для IE на оф. сайте Microsoft

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

Изучайте кроссбраузерную верстку и спасибо за внимание.

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

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

Кроссбраузерная верстка - подход к разработке html-кода (верстка), который обеспечивает корректное отображается во всех существующих браузерах

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

Firefox
Chrome
Opera
Opera mini
Safari
Internet Explorer

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

Кроссбраузерная верстка хорошо знакома тем, кто работал с браузером Internet Explorer 6 – он подпортил немало нервов верстальщикам за счет своей уникальности. А уникальность эта выражалась в том, что этот браузер не поддерживает очень многие правила и стандарты. В результате выходило так, что сверстанный макет смотрелся в Firefox и Opera просто великолепно, разваливаясь в IE6 в абсолютную кашу.

Причины нарушения корректного отображения страниц

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

Также не стоит забывать, что постоянно появляются новые версии браузеров и было бы очень не плохо, чтобы на новых версиях сайт также корректно работал.

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

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

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

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

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

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

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

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

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

Заключение

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

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

Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют "кроссбраузерной версткой HTML". Умение верстать такой код - весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.
Почему сайт выглядит по разному в различных браузерах?

Существует несколько причин возникновения различного вида сайта на различных обозревателях.

1. Использование нестандартных возможностей HTML.

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

Всегда проверяйте написанный вами код на соответствия стандарту.

Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.

Hello world

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

В данном случае, ошибка не велика, так как атрибут height у тега понимают большинство современных браузеров. (Лишь InternetExplorer 4, не распознает этот атрибут). Но в других случаях, пренебрежение стандартом может привести к более плачевным результатам. Наверняка, все из нас бывали на сайтах, на которых какой-либо элемент съезжал либо вбок, либо вниз. Каждый из нас, скорее всего, в душе думал, что сайт делал не профессионал. Хотя, скорее всего, сайт просто не был протестирован на основных типах браузеров. Как правило, сайты создают и тестируют только в InternetExplorer, так как это наиболее популярный браузер среди пользователей. Поэтому, в следующий раз, будем снисходительны, зная, почему происходит потеря внешнего вида.

Правильное решение для примера с табличной - это использование стилей. Вот как может выглядеть "правильный" код:

Hello world

Данный вариант будет (или, по крайней мере, должен) отображаться одинаково во всех типах браузеров.

2. Значения атрибутов по умолчанию.

У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.

Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости "додумывать" значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
background-color: white;
}

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

3. "Особенности" некоторых браузеров.

Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.

Поскольку основной виновник проблем несовместимости со стандартом - это Internet Explorer, то было придумано множество возможных обходных путей, как заставить сайт в IE выглядеть так же, как и в других браузерах.

Самый распространенный способ - это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.

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

Данный термин был впервые использован в 90-х годах, когда наблюдался самый разгар соперничества браузеров. В те времена кроссбраузерными считались ресурсы, одинаково работающие в Netscape Navigarot (браузер прекратил свое существование в 2007 году) и в Internet Explorer. Со временем производители приложений начали реализовывать функции, характерные только для одного из браузеров. В результате этого они стали отличаться друг от друга способами отображения страниц и их работой.

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

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

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

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

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

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

Тестируя веб-ресурс на кроссбраузерность, необходимо применять самые новые версии популярнейших браузеров:

Google Chrome.
Mozilla Firefox.
Opera.
Internet Explorer.
Netscape.
Safari.

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

Как сделать сайт кроссбраузерным?

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

Применение CSS хаков

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

На заметку. Хаки – не самый лучший способ исправления ошибок в коде, так как они делают его некрасивым и неправильным. Однако он продолжает выполнять свои функции.

Внедрение универсальных элементов

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

Проверить, какие теги какой версией движка поддерживаются, можно с помощью сервиса caniuse.com , который доступен совершенно бесплатно.

Вендорные префиксы

Они являются пережитком браузерных войн, особенно WebKit. Этот метод эффективнее и «чище», чем применение хаков.

Любому браузеру характерны уникальные свойства, имеющие вендорный префикс. Рассматривая случай с Google Chrome, элемент border-radius представлен здесь свойством -webkit-border-radius. А в Mozilla Firefox добавляется префикс -moz-. Подобные свойства изменяют функции элемента только в конкретном браузере, и никак не влияют на другие браузеры.

Сервисы проверки кроссбраузерности

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

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

№1. CrossBrowserTesting

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

Проверить сайт на соответствие различным браузерам можно следующими способами:

«Живой» тест. Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
Тест Selenium. Подразумевает автоматическую проверку в соответствии со скриптом, сделанным предварительно. Разрешается записывать результаты в формате видеофайла.
Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

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

№2. Browsershots

Еще один онлайн сервис, где есть возможность сохранять скриншоты сайта, который проверяется на кроссбраузерность, со многих браузеров и их сборок (более 200 штук), в числе которых устаревшие и малопопулярные.

Тут доступна как бесплатная, так и платная версия. В бесплатной плохо то, что ваш запрос становится в очередь, и скриншоты начнут подгружаться на сервер поочередно после высвобождения сайтов. Данная процедура может занять от 10 минут до 2-3 часов, что довольно долго.

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

№3. IE NetRenderer

Подразумевает бесплатную проверку, доступную в онлайн режиме. Сервис отличается тем, что проверять соответствие сайта можно только для Internet Explorer, начиная от версии 5.5, и заканчивая 11-й. Указать здесь можно только версию браузера и адрес тестируемого ресурса.

№4. IE Tester

Является специальным браузером, где можно проверять различные версии IE. Это локальное приложение, которое доступно для использования после установки на компьютер. Основные функции приложения – имитация функционирования выбранной версии браузера и заработок в сети на просмотре интернет-страниц.

№5. Browserling

Посредством данного сервиса вы получаете возможность работать с проверяемым ресурсом не в эмулируемом, а в реальном окне браузера, который установлен в виртуальной машине программы. Проверку возможно осуществлять для 5 популярнейших браузеров (Chrome, Opera, IE, Safari, Firefox), для 5 версий ОС Windows и 4 версий ОС Anrdoid. Можно настраивать разрешение экрана и создавать скриншоты. Все функции сервиса платные, бесплатные только первые 3 минуты тестирования, с разрешением 1024x768 и ОС Windows Vista.

№6. Spoon Browser Sandbox

Предлагает проверку совместимости сайта с точными версиями Chrome, IE, Opera, Safari и Firefox. Последние версии браузеров тестируются бесплатно, но если вы захотите проверить старые версии, вам придется заплатить определенную сумму.

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

№7. MultiBrowser

Платная программа проверки кроссбраузерности. Она работает со всеми доступными на сегодняшний день версиями Firefox и Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов с самыми разными разрешениями экранов.

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

Благодаря разнообразию режимов, вы сможете:

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

Для начала можно установить демо-версию программы, доступную в течение 2 недель.

№8. Sauce Labs

Онлайн сервис тестирования кроссбраузерности. Пробная версия у него довольно ограниченная, а вот при оформлении платной подписки станет доступна автоматическая проверка. Здесь есть около 700 комбинаций браузеров, разрешений и устройств.

№9. Browsera

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

№10. Litmus

Онлайн приложение, пользоваться бесплатно которым можно только первые 3 дня. Поддерживает многие новые версии популярных браузеров и мобильные устройства.

№11. Equafy

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

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

Посмотреть скриншоты можно в списке страниц готового отчета, нажав на стрелку Show в крайней колонке.

№12. Browserstack

Платное приложение, демо-версию которого можно опробовать в первые 30 минут. Тестирование кроссбраузерности сайта можно производить с 7 современными браузерами различных версий, изобилием эмулированных смартфонов и планшетов, а также с установленным на компьютере ПО.

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

№13. Viewlike.us

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

Помимо проверки кроссбраузерности, вы также узнаете скорость загрузки и удобство использования ресурса. Поможет Viewlike.us узнать и размер элементов HTML кода и изображений, а также число статических ресурсов.

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

№14. Ghostlab

Бесплатно-платная многофункциональная программа тестирования. Первые 7 дней доступна триал-версия.

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

Заключение

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

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

Александр Овсянников ака Интернет Мажор

Занимаюсь продвижением и заработком на сайтах с 2009 года.

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

Предисловие. Почему так получилось

После появления в 1994 году одного из первых удачных браузеров Netscape Navigator, созданных на основе первого браузера с графической оболочкой Mosaic, копания Microsoft решила сделать свой браузер и назвать его Internet Explorer. Первая и вторая версия IE поставлялись вместе с пакетом Microsoft Plus!, дополняющим возможности Windows, но широкого распространения не получили. Тогда Microsoft решили разработать радикально отличающийся от IE 1.0 и 2.0 браузер, для чего компания наняла программистов из Spyglass, которые разработали новый браузер на основе Mosaic. Так в 1996 году появился Internet Explorer 3.0. Однако разработчики ввели в браузер несовместимые со стандартами расширения HTML, которые впоследствии сохранялись от версии к версии. Последующее параллельное развитие IE и Netscape Navigator привели к захвату IE 95% рынка. Застой в развитии IE с 4.0 до 6.0 версии, с плохой поддержкой стандартов, низкой скоростью работы и отображения страниц, привел к возрождению Netscape в версии 6.0, который был написан на новом движке Gecko. Обновленный Netscape Navigator не смог добиться былых вершин и со временем компания Netscape объявила о прекращении поддержки своего браузера.
Однако движок Gecko послужил основой для создания в 2004 году современного браузера Mozilla Firefox. В 1996 году появилась Opera, которая добилась своих успехов скоростью и простотой использования. В 2003 году компания Apple выпустила свой браузер Safari на движке WebKit, отказавшись от IE, ранее использовавшийся в Mac OS. В 2008 году Google также решил вступиться в гонку браузеров, выпустив Google Chrome, основанный на том же движке что и Safari.
Таким образом, каждый из браузеров имеет свою историю, имеет свои версии, которые в свою очередь различаются поддержкой Javascript, HTML и CSS.

На сегодняшний день доля мирового рынка браузеров составляет: 45% для IE, 31% Firefox, 15% Chrome, 5% Safari и 2% Opera.
Отдельно хочется порадоваться о снижении доли на рынке самого «старого» и проблемного браузера IE6, который сейчас занимает всего 6%.

Кроссбраузерность

Под кроссбраузерностью понимается одинаковое отображение и работа сайта в разных браузерах. В данном топике я не буду рассматривать проблемы работы JavaScript в разных браузерах, а остановлюсь на верстке.

Есть два основных способа добиться одинакового отображения сайта в браузерах:

Разделение стилей с помощью условных комментариев

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

Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.

Можно задать стили, которые увидят все браузеры кроме IE:

Также есть возможность идентификации версии IE пользователя:
для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии
для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).

Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:

И используя их в дальнейшем в общем стиле для каждой версии:
.ie6 .elementstyle {
background: #123;
}

Плюсом данного метода является валидность его использования.

CSS-хаки

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

Для IE6:
.elementstyle {
_background: #123;
}
или:
.elementstyle {
-background: #123;
}
или валидно:
* html .elementstyle {
background: #123;
}

Для IE7:
*+html .style {
background: #123;
}
или валидно:
*:first-child+html . elementstyle {
background: #123;
}

Для IE8:
.elementstyle {
background: #F12\3/;
}

Для Firefox:
@-moz-document url-prefix() {
.elementstyle {
background: #123;
}
}

Для Safari и Chrome(один движок, помните?):
@media screen and (-webkit-min-device-pixel-ratio:0) {
. elementstyle {
background: #123;
}
}
или
body:last-child:not(:root:root) .elementstyle {
background: #123;
}

Для Opera все сложнее. CSS-хаки для Opera понимают Safari и Chrome, поэтому нужно использовать совместно хак для Opera и для Safari\Chrome, чтобы переопределить стиль обратно:
@media all and (min-width:0px) {
head~body .elementstyle {
background: #123;
}
}
body:last-child:not(:root:root) .elementstyle {
background: #fff;
}
Альтернативой этим двум хакам может служить интересный способ определения стилей для Opera с помощью встроенного объекта «opera» в JavaScript:

Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.

Заключение

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

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

Теги: html-верстка, css-хаки