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

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

•Позднейшие версии Internet Explorer и Netscape включают поддержку HTML 4.0 и CSS1, для создания большинства дизайнов проприетарные расширения больше не требуются.

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

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

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

Чтобы последовать этому примеру, вам может понадобиться знание HTML и JavaScript. Будем считать это куском HTML-кода: <div id="sample" style="position : absolute; top : 100px; left : 100px;">some text</div>

Этот код описывает блок текста, который должен отображаться на 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+.

Источник: http://www.contorra.ru/