Кроссбраузерность сайта: просмотр сайта в разных браузерах и исправление багов

Здравствуйте, уважаемые читатели! Подумал и решил, что настало время посвятить пост такой важной составляющей оптимизации и раскрутки сайта как кроссбраузерность, которая означает корректность отображения ресурса в наиболее популярных обозревателях; кроссбраузерность сайта можно оценить с помощью просмотра в разных браузерах.

Я не исключаю, что в недалеком будущем поисковые системы Яндекс и Гугл будут поощрять проекты, отличающиеся корректностью css и html кода, а также оптимальной кроссбраузерностью, добавлением определенной величины тИЦ и ПР (PR) сайта, которые являются отражением трастовости проекта. По-моему, это было бы справедливо, ведь данная работа отнимает много времени и сил.

Кроссбраузерность web сайта

Вообще, при раскрутке своего ресурса надо постоянно держать руку на пульсе и отслеживать изменения в алгоритмах ранжирования поисковых систем и оперативно на них реагировать, особенно это касается важнейших аспектов, таких как, например, использование nofollow noindex при закрытии ссылок или кусков текста от индексации в Yandex и Google, корректное применение анкора ссылки. Сюда же относится и кроссбраузерность.

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

Ведь мы получаем посетителей на свои сайты, которые пользуются совершенно разными браузерами, к тому же совершенно различных модификаций. Например, в данное время еще очень большой процент посетителей пользуется старыми версиями Internet Explorer (8,7 и даже  6), несмотря на то, что уже давно вышла обновленная 9 версия. Это касается и других популярных браузеров: Firefox, Google Chrome, Opera и Safari. Вот я и перечислил те браузеры, к которым следует адаптировать сайт или блог WordPress, поскольку остальные занимают очень маленькую долю.

Я думаю, вы знаете, что если сайт красиво и правильно отображается в браузере, в котором вы с ним работаете, это совершенно не означает, что также он будет выглядеть в остальных. Наиболее  выделяется наличием багов (bug — ошибка, англ.) IE, особенно его старые модификации. Это получается потому, что различные браузеры по-разному интерпретируют код html и правила каскадных таблиц стилей css.

Резюмируя вышесказанное, необходимо отметить, что кроссбраузерность была и пока остается одной из наиболее острых проблем в веб-разработке. Само по себе следование веб стандартам, в том числе html и css, дает достаточно высокий уровень совместимости, однако это касается только опытных вебмастеров, которые верстают сайт ”с нуля”. В современных условиях подавляющее большинство пользуется передовыми разработками, такими как CMS (Content Management System — система управления контентом) Joomla, WordPress и другими.

А это оборачивается определенными минусами в виде багов, поскольку в большинстве своем вебмастера пользуются уже готовыми шаблонами, а также применяют в своей работе многочисленные плагины, которые не всегда содержат корректный html или соответствующий принятым международным стандартам css код.

И последнее. Особняком стоят старинные версии IE (6,7,8), которыми пока пользуются некоторые посетители, соответственно мы не можем ими пренебрегать, однако с ними проблем больше всего. Дело в том, что даже если html и css коды прописаны корректно и сайт красиво и одинаково выглядит во всех популярных браузерах (кстати IE9 тоже относится к их числу, поскольку в последнее время Microsoft прилагает немало усилий, чтобы вернуть потерянные позиции в борьбе с конкурентами, в том числе путем более внимательного отношения к применению международных стандартов касательно использования html и css), тем не менее в вышеупомянутых вариациях IE часто возможны искажения.

Ниже мы рассмотрим некоторые варианты, которые позволяют достичь оптимальной кроссбраузерности. Хочу только сказать, что при иcпользовании CMS (например, WordPress) в качестве ”помощника” в построении вашего ресурса желательно время от времени проверять, как он выглядит в популярных браузерах, которыми пользуются посетители.

Просмотр и проверка сайта в разных браузерах

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

Кстати, в одной из своих конкурсных работ я анализировал отзывы о сервисе Userator, который предоставляет услуги по накрутке этих самых поведенческих факторов. Лучший, на мой вкус, сервис по оценке кроссбраузерности — BrowserShots. Работа с ним предельно проста. Вводите на главной странице в поле «Enter URL Here» адрес вашего проекта:

Ввод url сайта на главной странице сервиса BrowserShots

Выбираете из списка нужные версии браузеров (все вводить нет смысла, поскольку совсем старые версии используются мизерным  числом пользователей); причем заметьте, что можно выбирать также браузеры, используемые разными операционными системами:

Выбор браузеров для проверки кроссбраузерности на сервисе BrowserShots

При желании выберите определенное разрешение экрана и глубину цвета из выпадающего меню «Screen Size» и «Color Depth»:

Выбор разрешения и цвета при проверке кроссбраузерности на сервисе BrowserShots

Также, если хотите, можете включить (enable) или выключить (disabled) JavaScript, Java или Flash; кроме того, можно выбрать конкретную версию JavaScript:

Выбор Java, JavaScript и Flash в настройках сервиса BrowserShots

После описанных выше телодвижений нажимаете кнопку «Submit» и ждете результата. Процесс формирования скриншотов может занять некоторое время (в зависимости от числа отмеченных для проверки браузеров от 3 минут до получаса, возможно даже больше), так что можно выпить чашечку кофе или зеленого чая. После этого получите результат:

Скриншоты отображения сайта в различных браузерах на сервисе BrowserShots

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

Как я уже говорил, соблюдение стандартов (валидности) в использовании кодов html и css обеспечивает кроссбраузерность ресурса. Можно осуществить проверку сайта на ошибки html кода, а также проверку валидности css w3c валидатором. Но я также отмечал, что в старых версиях Internet Explorer использовались невалидные коды, поэтому, пока значительная часть потенциальных читателей пользуется не обновленными модификациями этого браузера, приходится как-то выкручиваться для достижения кроссбраузерности сайта.

Для этого создаются так называемые хаки — CSS конструкции, которую понимают некоторые браузеры, в то время как другие игнорируют. Опытные вебмастера утверждают, что использование хаков говоритт о непрофессиональности верстки. Однако бывают случаи, когда без этого ни в коем случае не обойтись. И опять приходят на ум старые вариации  IE.

Эти хаки позволяют добиться более-менее приемлемой кроссбраузерности сайта применительно к некоторым прежним версиям Internet Explorer, хотя некоторые элементы, отмеченные зеленой рамкой, не соответствуют валидности. Однако, как я уже отмечал, иногда приходится чем-то жертвовать, в данном случае тем, что 2 элемента не проходят валидацию.

Но в скором времени старые варианты Internet Explorer уйдут в небытие, а начиная уже с 9 версии проблем возникнуть не должно, соответственно уменьшится необходимость использования хаков и, как следствие, большее число css элементов верстки будут обладать необходимой валидностью. Видите, как тесно переплетены понятия валидности и кроссбраузерности. Здесь очень важно выбрать любимое мной правило ”золотой середины”, которым я очень часто пользуюсь не только в профессиональной деятельности, но и в жизни.

А теперь о технических деталях. Для того, чтобы использовать хаки, необходимо по моему примеру создать текстовый файл (назвать его, скажем, как в моем случае, ie.css)  в корневой папке вашей темы ваш_сайт/public_html/wp-content/themes/название_вашей_темы (путь примерно такой). Затем прописать следующую css конструкцию:

/* IE Hacks
*******************************/
html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
* html hr {margin: 0; /* IE6 */}
*+html hr {margin: 0; /* IE7 */}
.zoom,
#header,
#main,
#content .post,
#recent,
#footer,
#content .postdata{ zoom:1; }
.clear { display: inline-block }
.clear { display: block }
* html .clear{ height: 1% }
*+#header .search input.button {height:18px;}

Обращаю внимание на то, что эти хаки созданы для моей темы, но, возможно, подойдут и вам. Если вам не понравился вид вашего сайта при использовании этой конструкции, всегда можно его удалить без каких-либо последствий. Для того, чтобы хак начал работать, необходимо прописать условный комментарий. Для этого откройте файл header.php вашей темы и добавьте следующую запись:

<!—[if IE ]>
<link type="text/css" rel="stylesheet" media="screen" 
href="http://ваш_сайт/wp-content/themes/ваша_тема/ie.css"/>
<![endif]—>

Не забудьте вместо ваш_сайт и ваша_тема вставить соответствующие названия сайта и темы. Эту строчку необходимо прописать до закрывающего тега </head>, например, так, как сделал я:

Условный комментарий для хака IE в файле header.php

Теперь можно увидеть этот комментарий в коде страницы, для этого нажимайте правую кнопку мышки и выбирайте «Просмотр кода страницы» из контекстного меню (либо нажав комбинацию клавиш Ctrl+U), если используете в качестве основного браузера Google Chrome. В случае других браузеров: если вы пользователь Internet Explorer выбираете «Просмотр HTML кода», Firefox — «Исходный код страницы», Opera — «Исходный код»:

Условный комментарий в коде страницы при использовании хака для браузера IE

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

С этим все. Это был еще один шаг к достижению кроссбраузерности сайта. Напоследок я все-таки хочу еще дать информацию о том, как производить незначительные изменения в коде css, чтобы исправить те или иные несоответствия в различных браузерах. Поясню на собственном примере. Мне не понравилось, к примеру, как выглядела форма комментариев в Мазиле (скачать браузер Mozilla Firefox бесплатно), в то время как в основном браузере Google Chrome, в котором я работаю с блогом, была вполне приемлемой:

Форма комментариев блога в различных браузерах

Чтобы понять, какие элементы css отвечают за форматирование того или иного стиля, можно воспользоваться замечательной, на мой взгляд, опцией, которая существует практически во всех новейших версиях популярных браузеров (Opera, Internet Explorer). В Mozilla Firefox эта опция реализуется с помощью плагина Фаербуг (Firebug — как скачать, установить и пользоваться одним из лучших расширений для браузера Firefox).

Чтобы вызвать эту функцию в случае, если работаете в браузере Google Chrome, нажимаете правую кнопку мыши и выбираете из контекстного меню «Просмотр кода элемента» (также можно воспользоваться клавишей F12); для Opera — из контекстного меню «Проинспектировать элемент», для IE9 выбирайте из верхнего меню «Сервис»→«Средства разработчика» (либо опять же F12), для Mozilla Firefox, как я говорил, необходимо установить Firebug (при этом в верхней панели инструментов браузера будет отображаться значок  ”жучка” ). Мне кажется, это наиболее удачное решение, хотя я пользуюсь подобной опцией Хрома, поскольку он является моим рабочим браузером.

При вызове этой опции окно браузера будет поделено на 2 основные части, в нижней из которых можно экспериментировать с элементами страницы. Нижняя часть разделена еще на две, в левой представлены элементы html кода, в правой — css. Причем, внося изменения в css код, например, не бойтесь что-то испортить, потому что эти изменения не вступят в силу до редактирования файлов css вашей темы. Будет только наглядно показано, как будет выглядеть элемент после внесения изменений. Так очень удобно, кстати, получать какие-то  знания по основам языков html и css, так как теоретические познания тут же подкрепляются практикой.

Элемент "Поле комментариев" в коде HTML и CSS страницы

Итак, что же изменил в элементах моей формы комментариев для улучшения кроссбраузерности? Я изменил значение элемента width, который отвечает за ширину поля комментариев (textarea). Чтобы подогнать к виду в браузере Мозилла Файрфокс, я немного увеличил ее значение (с 600 до 650 пикселов). Чтобы выбрать элемент для редактирования, надо кликнуть по нему в области html кода, в данном случае элемент textarea располагается в контейнере <div id=”toolbar”>. Если кликнуть по этому элементу, он окрасится в синий цвет, соответственно область поля комментариев — в синий муар (это очень удобно!).

В правой части, соответствующей коду css, для изменения значения (ширины поля комментариев) надо кликнуть прямо по значению 600px. Строчка также окрасится в синий цвет, после чего ее можно редактировать, проставив необходимое значение (в моем случае я изменил на 650):

Редактирование ширины поля комментариев с помощью изменения значения атрибута width в коде CSS

Для того, чтобы изменения вступили в силу, нужно внести соответствующие коррективы в файл style.css текущей темы:

Редактирование элемента textarea в коде файла style.css

После этого не забывайте нажать «Обновить файл». Затем можно посмотреть измененные параметры в тестируемых браузерах (в этом примере, напомню, Мозилла и Гугл Хром):

Достижение кроссбраузерности путем изменения ширины поля комментариев блога

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Елена

    Почему то в BrowserShots при проверке сайта иногда показывает пустые скриншоты в некоторых браузерах, что это может значить? Кто-нибудь сталкивался?

    Ответить
    1. Игорь Горнов автор

      Елена, если это старинные версии браузеров, то ничего страшного, процент пользователей ими невелик.

      Ответить
      1. Юрий

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

        Ответить
  2. Лиана

    Молодец хороший блог! Добавляю в избранное.

    Ответить
  3. Polina

    Ничего себе.Спасибо огромное.Очень важная и нужная статья. В HTML не разбираюсь, но все так понятно разъяснили, попробую разобраться.

    Ответить
    1. Игорь Горнов автор

      Пожалуйста, Polina.

      Ответить