Кроссбраузерность сайта | Как создать свой сайт

Вы еще не знаете, что такое кроссбраузерность сайта?

Мар-26-2010 Автор: VeryOldMan

Все, кто создает сайт самостоятельно, рано или поздно сталкиваются с загадочным выражением —кроссбраузерность сайта.  А загадочного здесь ничего нет… Кроссбраузерность (от англ. cross-browser)сайта это одинаковое отображение вашего сайта в разных браузерах. То есть, если Ваш сайт сверстан кроссбраузерно, то он будет одинаково выглядеть и правильно функционировать в разных браузерах. А если нет –то наоборот…

Откуда пришла на нас эта напасть? А из 90-х годов. В это время меду фирмами, производителями браузеров развернулась жестокая конкуренция, сильно смахивающая на войну. Которую, кстати, так и назвали – «война браузеров». В ходе этой войны, разработчики стали включать в свои программные продукты, так называемые «нестандартные возможности». Естественно, это вылилось в то, что сайт, который был создан под какой-то браузер, некорректно отображался в другом. Не работали некоторые функции, «сбивалась» верстка и.т.д.

Вообще-то, существует консорциум под названием W3C (World Wide Web Consortium). Его задача создание стандартов в языках. По идее, все кто создает сайты, какие-то программы, должны делать это с соблюдением этих стандартов. Втом числе и фирмы, создающие браузеры. Так должно было быть по идее. Но проблема в том, что эти фирмы не только по-разному интерпретируют коды, но и не горят желанием сотрудничать с W3C. Все это выливается в то, что одна и та же страница сайта, в разных браузерах может отражаться по-разному. Это «по-разному» может быть разным. От несоответствия мелких деталей и до того, что сайт разваливается совсем. И это свинство, является головной болью всех, кто занимается созданием сайтов.

К сожалению, лидирует в этом «чемпионате» по несоответствию стандартам самый популярный браузер — Internet Explorer. Да и остальные не безгрешны.

Как же добиться того, чтобы  кроссбраузерность сайта была выдержана хотя бы в самых популярных браузерах? Сначала, давайте определимся, кто тут у нас самый популярный. Перечисляю поименно, по степени популярности в русском Интернете: Internet Explorer, Firefox, Safari, Chrome, Opera, Netscape:

что такое кроссбраузерность сайта

По данным Net Applications на 11 января 2009 года

Какими методами можно обеспечить кроссбраузерность сайта:

Прежде всего, обычными средствами css. И если этого не достаточно, то на помощь могут прийти так называемые хаки. Хаки – это обыкновенное форматирование элемента страницы, но с точным указанием браузера, для которого это форматирование выполняется. Для каждого браузера имеются свои собственные хаки, с помощью которых можно добиться практически полной кроссбраузерности. Сами хаки можно найти в Интернете. Ресурсов, посвященных хакам и их применению вполне достаточно.

Для укрощения Internet Explorer применяют так называемые условные комментарии. Условные комментарии действуют только в Internet Explorer совместно с операционной системой Windows. Они великолепно подойдут для написания специальных команд адресованных Internet Explorer. Эти команды поддерживаются, начиная с версии Internet Explorer 5 и выше.

Выглядят условные комментарии так:

<!—[if IE 6]>Инструкции для IE 6<![endif]— >

Как видите, их основная структура такая же, как и принятая, в html комментариях:

(<!–– ––>)

Вследствие этого остальные браузеры будут принимать условные комментарии за простые комментарии и будут их полностью игнорировать.

Internet Explorer, надо полагать, был запрограммирован на распознание специального синтаксиса <!––[if IE]>, на решение условия if и и на то, чтобы парсить содержимое условного комментария таким образом, как если бы это было содержанием обычной страницы.

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

О слове парсить. Может не все понимают о чем идет речь. Есть такие программы или функции –парсеры. Их назначение разбор текста на составляющие элементы. Процесс разбора и есть парсинг. К примеру, самый обычный текст можно разобрать на абзацы, предложения, а так же на слова и знаки препинания. Текст html можно разобрать на теги, атрибуты тегов, имена тегов и атрибутов и так далее.

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

Проверка кроссбраузерности сайта

Для начала установите на своем компьютере браузеры Mozilla Firefox и Opera. Браузер Internet Explorer должен быть у Вас однозначно, в составе операционной системы Windows.

Если Вы делаете сайт в редакторе Dreamweaver – зайдите в основном меню в: Редактировать – Установки – Просмотр в браузере. В окошке Браузеры, с помощью кнопок + и – установите в это окошко, выше указанные браузеры. Обязательно сделайте по умолчанию, основным браузером Internet Explorer.

что такое кроссбраузерность сайта

В процессе верстки в редакторе страницы сайта – проверяйте результаты работы в Internet Explorer, а затем в Mozilla Firefox и Opera.

что такое кроссбраузерность сайта

  • Если Вы увидите в процессе верстки, что какие-то элементы страницы отражаются в одном из браузеров не корректно — ищите другое решение, применяйте другие теги, стили и.т.д.
  • Не усложняйте сайт. Подумайте, так уж необходим Вам на странице тот или иной элемент? А если он «криво» отражается каким-либо браузером – откажитесь от него.
  • Если какие-то элементы страницы сайта не очень правильно отражаются каким-либо браузером – подумайте, а стоит ли этим заморачиваться? Ведь посетителю Вашего сайта, в первую очередь важна информация, размещенная на сайте. И так ли уж важно, если какие-то надписи или рисунки будут в одном из браузеров сдвинуты на пару пикселей по сравнению с другим?

Ну а если уж «очень надо», то хаки и условные комментарии Вам в руки!  Немного настойчивости и кроссбраузерность сайта Вам покориться…






4 комментария
  1. Elena Пишет,

    Спасибо! Как раз бьюсь с этой кроссбраузерностью, а тут ваша рассылка пришла!

  2. Barter Пишет,

    Все лаконічно і ясно. Дякую…

  3. Ekatserina Пишет,

    Я с этой несовместимостью неоднократно сталкивалась, это надо пройти.

    А вот что и как надо и ненадо делать чтоб сайт везде гляделся одинаково — целую статью написать можно!

  4. Katerina Пишет,

    сайт отображается везде хорошо, но когда открываю кго в Dreamweaver верстка съезжает и некоторые картинки не отображаются. С чем это может быть связано?

Добавить комментарий