Совместимость сайта с браузерами: не забываем о кроссбраузерности...

Важным свойством сайта является его кроссбраузерность. Кроссбраузерность — свойство web-сайта отображаться во всех браузерах идентично и функционировать одинаково. На сегодня существует достаточно большое количество браузеров для просмотра интернет-сайтов, большинство которых основаны на разных «движках» и по разному обрабатывают код страницы для отображения конечному пользователю. Данную проблему усугубляет и то, что алгоритмы работы браузеров меняются с версиями, поэтому новые работают иначе, чем старые. Как результат, некроссбраузерный сайт может отображаться совершенно неюзабильно (т.е. непригодно для пользования) для его посетителя.
Прежде всего, для будущего сайта следует определить с какими браузерами и их версиями он должен быть полностью совместим. Обычно для стран СНГ эти требования будут иметь следующий вид:
- Internet Explorer 9 +
- Opera 12 +
- Mozilla Firefox 18
- Google Chrome 23 +
Из других браузеров встречаются Chromium, Safari, Netscape Navigator (больше не развивается), Maxthon. Все они имеют определенные различия: границы и отступы тегов по умолчанию, определенные элементы каскадных списков стилей (CSS) не поддерживаются, или наоборот имеют свои особые элементы, клиентские скрипты (Javascript) могут вести себя по-разному.
Что касается разницы в тегах, то эта проблема довольно легко решается - все те из них, которые могут иметь различные свойства в разных браузерах, следует переопределить для всего сайта с помощью CSS.
Чтобы обойти стили CSS, которые имеют разные названия в разных браузерах, следует прописывать их все, например, закругленные границы и тень:
-Webkit-border-radius: 6px;
-Moz-border-radius: 6px;
border-radius: 6px;
-Moz-box-shadow: 2px 2px 15px 1px # 333;
-Webkit-box-shadow: 2px 2px 15px 1px # 333;
box-shadow: 2px 2px 15px 1px # 333;
Особенностью Internet Explorer является наличие у него CSS-фильтров, которые лучше не использовать, ведь они не будут работать под другими браузерами. Для отдельных случаев следует использовать «CSS-хаки», которые позволят применять определенные стили в зависимости от браузера. Обычно их используют для старых версий Internet Explorer. Для примера рассмотрим селекторы:
*: First-child + html. Class {} / * Для IE 7 и ниже (first-child) * /
* + Html. Class {} / * Для IE 7 * /
*: First-child + html. Class {} / * Для IE 7 * /
html> body. class {} / * Для IE 7 и НЕ-IE браузеров * /
Также можно воспользоваться условиями (Conditional comments):
<! - [If IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <! [Endif] ->
/ * Таблица стилей для IE6 * /
<! - [If IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <! [Endif] ->
/ * Таблица стилей для IE7 * /
<! - [If IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <! [Endif] ->
/ * Таблица стилей для IE8 * /
Что касается разного поведения клиентских скриптов, то лучшим выходом из ситуации является использование JQuery - кросс-браузерной библиотеки, значительно расширяющей возможности Javascript.
Большей трудностью, чем совместимость с различными браузерами, станет задача непротиворечивости с их старыми версиями. Примером в данном случае будет CSS3 - последний на данный момент стандарт каскадных списков стилей. Среди многих новых возможностей в нем появилась поддержка теней, градиентов, поворотов объектов, которые значительно облегчают стилизацию сайтов. С большинством браузеров CSS3 работает прекрасно, но в Internet Explorer его частичная поддержка появилась только в 9-й версии, а полная - в 10-й. Поэтому, если нужна совместимость с IE 8 -, то следует такие вещи делать старым и времязатратным способом.
Относительно формата изображений PNG, то стандартными средствами просмотра - Internet Explorer 6 и ниже - прозрачность отображена не будет.
Заказчику следует заранее определить, какие именно браузеры должны поддерживаться или поручить этот выбор разработчику. Но следует помнить, чем большее количество браузеров и их версий будет поддерживаться, тем выше цена сайта.