Кроссбраузерная совместимость. История и практика.

Кроссбраузерное тестирование – это комплекс работ, направленных на поддержку и корректное (полное? адекватное?) отображение веб-сайта, веб-приложения или скрипта со стороны клиента рядом браузеров (обозревателей Интернет).

Термин “кроссбраузерный” вошел в обиход во время “браузерных войн” в конце 90-х. Этот термин относился к вебсайтам и кускам кода, работающим как в Internet Explorer, так и в Netscape Navigator. В ходе этих войн в браузеры добавляли новые фичи без всякой координации между продавцами. Часто это приводило к тому, что, хотя оба браузера поддерживали некую фичу, были различия в том, как она работает, от легких внешних нюансов до глубоких концептуальных различий.

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

• Позднейшие версии Internet Explorer и Netscape включают поддержку HTML 4.0 и CSS1, для создания большинства дизайнов проприетарные расширения больше не требуются.
• Рынок браузеров расширился, и чтобы похвататься кроссбраузерной совместимостью, современный вебсайт должен корректно отображаться в браузерах Mozilla Firefox, Opera и Safari (в дополнение к Internet Explorer и Netscape).
• Произошло изменение отношения к совместимости в целом.

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

Пример кроссбраузерного кодинга

Чтобы последовать этому примеру, вам может понадобиться знание HTML и JavaScript. Будем считать это куском HTML-кода:
some text

Этот код описывает блок текста, который должен отображаться на 100 пикселей вниз и вправо от верхнего левого угла в окне браузера. В браузере Netscape Navigator 4+, чтобы подвинуть его вправо, вам нужен следующий код JavaScript: document.layers[sample].left = 200;

Чтобы сделать то же самое в Internet Explorer 4, понадобится вот это: document.all[sample].style.left = 200;

А чтобы код работал в обоих браузерах, т.е. считался кросс-браузерным, он должен выглядеть вот так: if (document.all) document.all[sample].style.left = 200; else if (document.layers) document.layers[sample].left = 200;

Следующий код, использующий DOM-метод стандарта W3C работает в браузерах Mozilla, последних версиях Internet Explorer и некоторых других браузерах, соответствующих стандарту W3C: document.getElementById(sample).style.left = 200px;

Наиболее часто вебсайты тестируют в браузерах: Internet Explorer 5.0+, Mozilla Firefox 1.0+, Opera 7+, Safari 1.0+.