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

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

Как правило, больше всего проблем доставляют старые версии «любимого» многими разработчиками браузера Internet Explorer (IE). Под старыми мы условно будет понимать все версии ниже 10 – 9, 8, 7, 6 и т.д. Дело в том, что в IE не предусмотрен автоматический апдейт версии при запуске программы (как это делается в том же Firefox или Chrome). Поэтому многие пользователи чисто по инерции сидят на старых версиях данного браузера. А старые версии обладают очень слабой поддержкой современных правил CSS (особенно CSS3), в результате чего правила, прописанные для современных браузеров, здесь попросту перестают работать. Если в коде таких правил не очень много и они играют второстепенную роль, то отсутствие поддержки CSS3 вряд ли как-то скажется на внешнем виде страниц и работе сайта в целом. Однако если дизайн практически целиком построен на новых правилах, то при просмотре сайта, к примеру, в IE7, могут наблюдаться очень большие отклонения от нормы. Что касается других браузеров (не IE), то здесь также могут поддерживать не все правила, однако различий значительно меньше.

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

Что же конкретно можно сделать? Во-первых, поставить страницу-заглушку с предложением сменить браузер на более современный (до момента смены браузера сайт будет показывать эту заглушку). Во-вторых, стараться реализовывать функционал с использованием минимального количества новых CSS-правил (к примеру, вместо селекторов nth-child или last-child использовать классы или id). В-третьих, создавать отдельные CSS-файлы со стилями для старых версий браузеров. Как правило, данные файлы подключаются уже после основных файлов CSS. Сама конструкция подключения выглядит так - . В квадратных скобках указывается название и максимальная версия старого браузера, а вместо слова «ссылка» - абсолютный или относительный путь к нашему файлу CSS. В самом файле сложные и замысловатые CSS-решения, предназначенные для современных браузеров, обычно заменяются на более простые и очевидные. К примеру, вместо анимированного показа блока используется статичный показ, вместо стандартных скругленных уголков используются скругленные уголки, выполненные при помощи графики и т.д. В-четвертых, добавлять к некоторым CSS-свойствам (которые в этом нуждаются) специальные префиксы – mos, o, webkit, ms. Данные префиксы отвечают за одинаковое поведение описываемого свойства в браузерах Firefox (mos), Opera (o), Chrome, Яндекс, Сафари (webkit), IE (ms). Примеры подобных свойств – transition, animation, border-raduis и т.д.

Проверка кроссбраузерности обычно выполняется вручную – при открытии страниц сайта в разных версиях браузеров (с упором на старые версии). Кроме того, можно воспользоваться онлайн-сервисами и программами - http://browsershots.org/, http://www.my-debugbar.com/wiki/IETester/HomePage, http://netrenderer.com/, https://spoon.net/browsers/. Принцип работы везде очень похожий – вы указываете адрес своего сайта, указываете проверяемые версии браузеров и запускаете проверку. По итогам проверки можно будет увидеть, что именно поддерживается и не поддерживается в той или иной версии.