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

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

Блок . Современные браузеры

В настоящее время популярными являются следующие браузеры: Internet Explorer (сокращенно IE, браузер от компании Microsoft, встроен в Windows), Opera (норвежский браузер), Mozilla (она же Firefox), Google Chrome (браузер от компании Google), Safari (браузер от Apple). Браузеры в мобильных устройствах: Android, IOS.

Блок . Движки браузеров

Кроме браузеров существует такое понятие, как движок браузера. Движок - это основа браузера, которая преобразует HTML и CSS в видимую на экране картинку. Движков существует намного меньше, чем браузеров и, как следствие, многие браузеры имеют одинаковые движки и поэтому одинаковые особенности и баги (проблемы).

Виды движков: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera до 14 версии). Trident (Internet Explorer).

Обратите внимание на то, что Opera, начиная с 14 версии, перешла на движок Webkit.

В настоящее время Webkit распался на два движка Blink от Google Chrome и Opera 14+ и движок от Safari. Эти два движка по-прежнему поддерживают префикс -webkit, однако, их разделение уже можно наблюдать на некоторых CSS свойствах, например, hyphens

Браузера Internet Explorer официально больше не существует, последняя его версия 11-тая. Однако, фактически, этот браузер сменил название (но не движок) и теперь называется Edge.

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

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

Как это выглядит, давайте посмотрим на примере свойства box-sizing (смена блоковой модели).

p {
	box-sizing: border-box;
}

Это свойство начало поддерживаться только с Firefox 29, однако уже с версии Firefox 2 оно было доступно с префиксом -moz:

p {
	-moz-box-sizing: border-box;
}

Остальные браузеры имеют аналогичные приставки: -moz - Mozilla/Firefox (движок Gecko), -webkit – браузеры на движке Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o – Opera до 13 версии включительно (движок Presto), -ms – IE с версии 8+.

Таким образом, наиболее кроссбраузерный вариант свойства box-sizing, с использованием вендорных префиксов, будет иметь следующий вид (с префиксом -ms его писать не нужно, IE сразу перешел на поддержку этого свойства):

p {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

В CSS многие свойства имеют аналогичную реализацию: с префиксом и без него.

Обратите также внимание на то, что Opera с версии 14 перешла на Webkit и теперь для нее будет использоваться префикс -webkit, а префикс -o останется только для старых версий (до 14-той).

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

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

Блок . Где посмотреть какие префиксы писать

Рекомендую специальный сервис caniuse.com, на котором можно посмотреть какие свойства уже можно использовать и нужно ли для них писать префиксы или нет.

Блок . Статистика по браузерам

Для того, чтобы знать, какой браузер следует поддерживать в настоящее время, а на поддержку какого следует забить, необходимо отслеживать статистику по браузерам в регионе сайта. Сделать это можно с помощью следующего сервиса: gs.statcounter.com — все браузеры с версиями по странам (english).

Блок . Как проверить сайт в разных браузерах

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

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

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

Существуют и другие подобные сервисы (гуглите).

Блок . Сброс стилей

По умолчанию браузеры добавляют отступы различным элементам: заголовкам h1-h6, абзацам p, спискам ol и ul и т.д.

Разные браузеры добавляют эти отступы по-разному, поэтому на стандартное поведение браузеров полагаться не стоит и следует создать так называемый файл сброса стилей reset.css.

Что должно входить в этот файл?

CSS Reset впервые был применен в 2004 году Эндрю Креспанисом (Andrew Krespanis). В своей статье он советовал использовать универсальный селектор (*) в начале CSS-файла, чтобы задать всем элементам нулевые отступы (margin и padding):

* {
	margin: 0;
	padding: 0;
}

Такой подход имеет ряд преимуществ и недостатков.

Преимущества:

  1. Простота.
  2. Небольшое количество кода CSS.

Недостатки:

  1. Не охватывает все свойства, которые нужно сбросить.
  2. В Mozilla для select появляется небольшой баг.
  3. Не сбрасывает padding для input.
  4. В некоторых браузерах оформление кнопок по умолчанию теряет свой вид (выглядят как текст с рамкой вокруг, например в Opera).
  5. Несколько замедляет рендеринг (отображение) страницы в Mozilla (актуально для крупных файлов css в тысячи строк кода. В других случаях эта задержка незаметна, исчисляется в микросекундах).

Более продвинутый подход — использование сброса стилей всех необходимых элементов (установка нужных значений) без использования универсального селектора. Одним из популярных сбросов стилей такого типа является сброс от Эрика Мейера (Eric Meyer), смотрите его тут: сброс стилей от Эрика Мейера.

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

Блок . Нормализация стилей

Кроме сбросов, существует так называемая нормализация - это когда значения свойств (например, margin и padding) не сбрасываются в ноль, а им указываются определенные удобные значения (чтобы во всех браузерах отступы по умолчанию были одинаковыми и удобными).

Советы и рекомендации

  1. Помните о том, что сброс стилей необходимо делать до подключения ваших стилей, а не после!
  2. CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.
  3. Не бойтесь модифицировать сам reset.css. Подстройте его под себя, заставьте его работать на себя. Изменяйте, перестраивайте, убирайте и добавляйте так, как это нужно в вашем конкретном случае.
  4. Имеет смысл добавить стили по умолчанию для h1-h6 (например, размер шрифта), для td (сделать text-align: center) и т.д.