А каким браузером вы пользуетесь? Стойте, дайте угадаю, Mozila FireFox, или  Opera? Google Chrome, а может Internet Explorer? Угадал? Притом, почти наверняка есть среди них тот единственный, что нравится вам больше всего. Его вы считаете самым удобным и готовы защищать с пеной у рта, доказывая  преимущества, закрывая глаза на его недостатки.

 Зачем вам другой браузер, если этот так хорош?

 А теперь представьте, что решили создать собственный сайт, прочитали массу литературы по HTML и CSS, в совершенстве освоили PHP и прочие интересные штуки. И вот, наконец, изливаете это всё в виде нового сайта. Работаете над ним, редактируете в своём любимом браузере (а зачем вам другой?), верстаете дизайн и занимаетесь продвижением.

 Но вот однажды получаете письмо от какого-нибудь неравнодушного посетителя, что дескать «шапка съехала», фон «идёт поверх текста», меню «уехало в сторону» и вообще весь сайт «развалился». Вы в недоумении, как так, ведь вот он сайт — красивый и ровненький, и всё на нём в порядке. И только потом оказывается, что тот посетитель-то просто зашёл на сайт через другой браузер. Вы кидаетесь проверять — точно, всё совсем не так, как должно быть.

 Отчего же это  происходит?

Браузерные войны

 Давным давно, в одной очень далёкой галактике…

Это началось аж в 1996 году (ой, а я тогда был совсем маленьким), и виновата во всём как всегда оказалась злая Империя — империя Microsoft. В тот год, в комплекте с новой Windows 95 начал поставляться браузер Internet Explorer версии 3.0. Лидером по популярности на тот момент был Netscape Navigator, но довольно скоро он был задавлен в неравной схватке. Как говорит мой друг: «Полубокс — это когда бьют только тебя». Что-то подобное случилось и на этот раз. За счёт бесплатного статуса, Internet Explorer быстро завоевал весь рынок.

 Однако на краю гибели, Netscape нанёс Microsoft удар, который как оказалось станет фатальным для IE — код браузера Navigator был выпущен под свободной лицензией. Хорошие коды, как известно, долго не залёживаются, поэтому довольно скоро, после окончательной гибели Netscape Navigator (1999 год) на свет появилось семейство Mozila, которое продолжает наращивать популярность до сих пор. Кроме того, в 2000-х добавилась Opera, изначально созданная как браузер для мобильных телефонов и Google Chrome.

 Теперь становится понятно, почему разные браузеры могут совершенно по разному показывать одну и ту же страницу сайта. Стандарты отображения HTML и CSS-файлов, разных скриптов и прочего могут существенно различаться, что особенно заметно при использовании старых версий браузеров.

 Конечно, W3C — Консорциум Всемирной паутины пытается выработать единые правила и стандарты для всех, и результаты этой работы заметны. Однако остаётся ещё слишком много несоответствий и разногласий, чтобы можно было не обращать внимание на то, как отображается ваш сайт в разных браузерах.

Кроссбраузерность — королева красоты

 Итогом непрекращающейся и по сей день холодной  войны между разработчиками браузеров стало рождения понятия «кроссбраузерность».

 Я смог найти вот такое определение: «Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.

 По сути, довольно точно и понятно. Однако остаётся нерешённым главный вопрос — как её достичь и что для этого надо сделать?

 Однако прежде давайте разберёмся, как нам распознать проблему, чтобы знать, с чем бороться. Самый простой и удобный вариант — установить на свой компьютер самые популярные браузеры, штук 6-7 и каждый раз в них во всех просматривать сайт, проверяя, всё ли в порядке. Этот путь вполне подойдёт не очень крупным сайтам, посетителей у которых не слишком много.

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

 Я предлагаю использовать этот сервис: Проверить кроссбраузерность (browsershots.org). Главное — не забудьте, что результаты проверки появятся не сразу, поэтому просто сворачивайте окно программы и занимайтесь своими делами. А уже минут так через 10 можно проверять.

Как добиться кроссбраузерности

 Самое вкусное напоследок. Наверное, вы ждёте, что я сейчас назову вам уникальный рецепт, который позволит вмиг всё привести в порядок.

 Не надейтесь! Его просто не существует.

 Я могу лишь указать на некоторые вещи, с которыми я сам сталкивался, да привести общие решения классических проблем. Обиделись на меня? А зря. Ведь требования браузеров не так хорошо изучены, проблемы кроссбраузерности обычно решаются лишь по мере возникновения, к тому же о них мало кто пишет подробно.

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

 Вот проблема, с которой я столкнулся буквально на днях. оказалось, что Opera, в отличие от FF и Chrome несколько иначе воспринимает вложенные блоки при div-ной вёрстке, делая родительскими зачастую не те блоки, что приводит к различным сдвигам и потере размеров. Кроме того, для меня до сих пор остаётся, почему при указании позиции relative для блока, в FF он нормально встаёт на своё место, а в Google Chrome и Opera может сдвинуться на один пиксель. Пришлось немного править всю вёрстку, чтобы добиться идеального соответствия.

Пару слов о том, когда проще добиться кроссбраузерности, при самостоятельной вёрстке шаблона или при использовании готового шаблона. Безусловно, верстая шаблон вы сами полностью его контролируете и можете настроить всё, что угодно. Однако не все имеют достаточно опыта и мастерства в этом деле. Для них я советую использовать готовый шаблон, так как с точки зрения кроссбраузерности он впереди «сырого» свёрстанного кое как (чур не обижаться, такие попадаются в сети). Шаблоны для популярных CMS обычно делают достаточно профессионально и многие вещи в них заложены с самого начала. Например, те же хаки, о которых вы, надеюсь, прочитали.

Что же делать?

 Если вы задались таким вопросом — это уже хорошо . Значит вам не наплевать на посетителей своего сайта, а это очень верный подход. Что тут можно посоветовать рядовым «самодельщикам» сайтов вроде меня? Наверное, только набраться терпения и регулярно проверять то, как отображается сайт в разных браузерах. а все проблемы решать по мере возникновения, благо чаще всего они бывают вызваны всякой ерундой.

 Да. вот, вспомнил, что не сказал про JS-код, который зачастую может становится камнем преткновения при достижении кроссбраузерности. В целом, я вообще советую поменьше использовать его на страницах сайтов, так он, кроме всего прочего, ещё и «утяжеляет» их. Хорошая новость в том, что современное поколение браузеров вроде как начало одинаково воспринимать большую часть различных скриптов и прочих штуковин. осталось запретить всем пользоваться старыми версиями.

___