Как тестировать кроссбраузерность сайта: лучшие сервисы для проверки

image

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

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

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

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

Что, естественно, сказывается на внешнем облике страниц.

И как следствие, ваш сайт может выглядеть по-разному, это будет зависеть от браузера, которым пользуется человек, посещающий ваш сайт. Например, в Mozilla Firefox все может выглядеть как надо, красиво и ровно, а если откроешь IE, то блоки сайта съезжают один на другой, а фоны вообще куда-то подевались…

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

Ни в коем случае не пренебрегайте этим этапом в создании сайта!

Эту проверку следует проводить ориентируясь, по крайней мере, на пятерку самых распространенных браузеров — это Mozilla Firefox, Safari, Internet Explorer, Opera и Google Chrome. Причем, каждый из этих браузеров имеет множество версий.

А версии Internet Explorer вообще настолько отличаются друг от друга, что интерпретируют html теги совершенно по-разному, поэтому для них нужно проводить отдельное тестирование. Для браузера Internet Explorer существует даже специальная программа IEtester, которую вы можете всегда бесплатно закачать с интернета.

На что нужно обращать внимание в процессе проверки своего сайта на кроссбраузерность?

Недостаточно просто просмотреть на сайт в разных браузерах.

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

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

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

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

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

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

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

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

А потому, делайте определенные выводы и если есть вопросы — задавайте их в комментариях.

Успехов вам, дорогие читатели!

Автор статьи: Елена Лощилова.

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

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

Browsershots — как проверить кроссбраузерность верстки

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

Косяк может вылезти в любом браузере, хотя, конечно же, рекордсменом по этой части является Internet Explorer, особенно версии 6 и ниже. Происходит это из-за того, что различные браузеры немного по-разному интерпретируют один и тот же код HTML и правила CSS.

С этим ничего нельзя поделать и надо научиться с этим жить — проверять корректность отображения своего ресурса во всех доступных браузерах (кроссбраузерность) и вносить при необходимости коррективы в код. Но для этого, как минимум, нужно установить кучу обозревателей различных версий или же, что намного проще, воспользоваться сервисом Browsershots.

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

Например, если у вас на компьютере стоит Opera 10, то для того, что бы посмотреть вид вашего сайта в Opera 8, вам нужно будет либо переустановить обозреватель, либо установить его более старую версию, например, на виртуальной машине. Оба эти способа чудовищно не удобны и поэтому упомянутый выше сервис придется нам очень кстати.

Работа с онлайн сервисом Browsershots предельно проста:

  1. вводите на главной странице проекта в поле «Enter URL Here» адрес вашего сайта
  2. выбираете из списка, расположенного ниже, нужные вам версии браузеров
  3. если нужно, то выбираете определенное разрешение экрана и глубину цвета из выпадающих списков
  4. в трех последующих списках можете отключить или включить (можно еще выбрать конкретную версию) показ JavaScript, Java и Flash
  5. все, теперь жмем кнопку «Submit» и ждем завершения процесса создания скриншотов для каждой выбранной версии браузера (данный процесс может занять от 3 до 50 минут, поэтому в это время можно заняться другими делами, но не закрывать этой страницы в браузере)
  6. полученные в результате работы онлайн сервиса скриншоты можно посмотреть прямо там же (щелчок по скриншоту для его увеличения) или же скачать одним файлом к себе на компьютер (под скриншотами поищите ссылку «скачать»)

Программа для записи разговоров по Skype, ICQ и QIP

Мне показалась довольно интересной возможность записи разговора (имеется в виду голосового разговора), который вы ведете по Скайпу (сейчас правда тоже самое можно проделывать и в Аське, и в QIP Infium).

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

Программка называется VoiceSpy, она умеет работать в фоновом (скрытом) режиме. Однако она является платной, но при этом относительно недорогой. К тому же оплатить ее можно через наши отечественные платежные системы на вроде RBK маней, Яндекс денег или же WebMoney.

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

Как настроить отправку пинга при появлении новых статей

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

Если вы еще не пользовались этой возможностью, то я вкратце расскажу, как настроить отправку пинга при появлении новых материалов для WordPress:

  1. заходите в админку вашего блога (http://vash_sait.ru/wp-admin/)
  2. переходите на вкладку «Настройки» — «Написание»
  3. внизу страницы увидите окно «Сервисы обновления»
  4. добавляете в это окно список приведённый ниже
  5. не забудьте нажать кнопку «Сохранить изменения»

Если у вас сайт на Joomla, то можно установить плагин под названием Blog Ping.

Для установки Blog Ping, как вы уже, наверное, знаете, нужно зайти в админку Joomla и в верхнем меню выбрать: «Расширения» — «Установить/Удалить». Затем нажмите в первой строчке с названием «Загрузить файл пакета» на кнопку «Обзор» и найдите на нашем компьютере только что скачанный архив компонента plg_blogping.zip.

После установки плагина Blog Ping зайдите в «Расширения» — «Менеджер плагинов» и щелкните по «Content — Blogping». В открывшемся окне поставьте галочку напротив «Да» в поле «Включен», а в поле «Ping Update Services» скопируйте приведенный выше список пинг сервисов. Не забудьте нажать кнопку «Сохранить».

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

Есть целый ряд сайтов, с которых можно аналогичным образом рассылать пинг, например, http://pingomatic.com/.

Подбор нужного цвета в палитре Яндекса

Опять новость из области поисковиков. Попробуйте ввести в строку запроса Яндекса название какого-нибудь цвета и в результате увидите вверху страницы выдачи нечто подобное этому:

Это очень удобная и полнофункциональная палитра Яндекса с возможностью скопировать код полученного цвета и узнать его название. Иногда встречаются очень оригинальные названия, например, цвет медвежьего ушка. Щелкнув по надписи «Поделиться цветом в блоге» и вставив предложенный код к себе на сайт, вы увидите интересное.

image

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

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

Что такое тестирование кроссбраузерной совместимости?

Тестирование кроссбраузерной совместимости – это, кратко говоря, проверка того, как выглядят все ваши веб-страницы при просмотре в различных браузерах (например, Chrome, Firefox или Internet Explorer). Даже если вы не знали, что практически все браузеры придают вашему сайту различный внешний вид, увы, но так и есть, и только путем тестирования это можно выявить и исправить. Разумеется, что под абсолютно все браузеры адаптировать сайт не получится, но можно начать с тех, которыми пользуются большинство ваших пользователей (узнать это можно, например, из статистики Google Analytics).

Почему важно тестировать кроссбраузерную совместимость?

Современные пользователи сети Интернет имеют широкий выбор браузеров. Если вы не проведете тестирование и/или не проведете изменение верстки и стилей под самые популярные браузеры, вы просто потеряете многих потенциальных посетителей, поскольку для них ваш сайт будет недоступным или трудным для просмотра. Это же касается и мобильной верстки (оптимизации сайта под мобильные устройства).

Что влияет на трудности при просмотре моего сайта?

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

Вот основные элементы, которые могут вызывать проблемы с отображением сайта:

  • Аппаратное обеспечение пользователя: установленная в компьютере графическая карта, настройки цвета и разрешение экрана, используемые посетителем
  • Программное обеспечение: используемая операционная система и установленные шрифты
  • Старые версии браузеров. Некоторые посетители могут не обновлять свои браузеры в течение очень долгого времени, и это может вызывать конфликты совместимости при просмотре вашего сайта (особенно, если он выполнен с использованием самых современных технологий)

Основные инструменты для тестирования кроссбраузерной совместимости

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

Browserling

Browserling довольно прост в использовании. Это приложение не нужно устанавливать, достаточно ввести адрес своего сайта и выбрать браузер для теста. Иногда нужно подождать несколько минут в очереди, а иногда результат теста выводится сразу на экран. Инструмент бесплатен, из-за чего возможны некоторые ограничения, но для простой проверки своего сайта он подойдет. В бесплатной версии время жизни сессии ограничено 3 минутами.

Browsershots

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

turbo.net Browser Sandbox

Этот сайт предлагает опробовать запуск сайта для теста в браузерах Chrome, Firefox, Internet Explorer, Opera и Safari из песочницы. Нужна регистрация.

Дешево и сердито

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

Платные ресурсы

Для профессиональных целей подойдут только платные решения. Практически все они требуют наличие подписки, но предоставляют небольшой бесплатный тестовый период. К таким ресурсам можно отнести: BrowserStack, Cross Browser Testing, Sauce Labs.

Отладка

  • Для определения поддержки элементов HTML5 и CSS3 в различных версиях браузеров воспользуйтесь сайтом Can I use.
  • Если для вашего сайта критично важна поддержка в старых браузерах, можете воспользоваться следующими плагинами и JavaScript-библиотеками: HTML5 Shiv, Modernizr, Respond.
  • При подключенных вышеуказанных плагинах вам нужно будет писать отдельные стили CSS, добавлять нужные медиа-запросы, а в некоторых случаях и браузерные префиксы css-стилей. Это позволит вам значительно расширить кроссбраузерную поддержку для вашего сайта.

Хотя тестирование браузерной совместимости – не самый приятный или вдохновляющий аспект создания нового веб-сайта, но это один из краеугольных камней успешного сайта, на котором посетители становятся клиентами благодаря простоте использования и профессиональному оформлению.

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

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

Вообще, при раскрутке своего ресурса надо постоянно держать руку на пульсе и отслеживать изменения в алгоритмах ранжирования поисковых систем и оперативно на них реагировать, особенно это касается важнейших аспектов, таких как, например, использование 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» адрес вашего проекта:

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

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

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

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

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

Как я уже говорил, соблюдение стандартов (валидности) в использовании кодов 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 ]>     <![endif]—>

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

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

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

С этим все. Это был еще один шаг к достижению кроссбраузерности сайта. Напоследок я все-таки хочу еще дать информацию о том, как производить незначительные изменения в коде 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, так как теоретические познания тут же подкрепляются практикой.

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

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

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

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

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

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

В сети интернет существует огромное множество сайтов, которые конкурируют между собой. Пользователи при просмотре сайтов пользуются тем браузером, который им более удобен и нравится по каким-то своим причинам. С целью привлечения и удержания большего количества пользователей сайтом разработчики вынуждены создавать и тестировать сайты в различных браузерах. Конечно, для удобства тестирования существует множество сервисов для проверки кроссбраузерности (cross-browser) сайта.

Рассмотрим единственный из бесплатных и с большим количеством браузеров ресурс.

image

Browsershots — бесплатный сервис, существующий с далекого 2005 года. К сожалению, порой очень загружен из-за своей популярности. Будьте готовы подождать немного результатов тестирования вашего сайта. Большая поддержка разных браузеров для операционных систем Linux, Windows, Mac и BSD.

Для проверки просто вводите адрес сайта и нажимаете «Submit». Здесь же на сайте есть настройки: размер скриншотов, цвет скриншотов, поддержка JavaScript, Java или Flash.

Вывод: хороший сервис для тех, кто не хочет платить и не слишком торопиться при проверке сайтов.

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

Пользоваться сервисами или нет — решать только вам. Если вы занимаетесь профессиональной разработкой и тестированием сайтов, то существует также волшебный сервис Cross Browser Testing Tool, но он платный. Из преимуществ данного сервиса можно отметить его скорость работы, поддержку множества браузеров (свыше 1500+), различные тесты и дополнительный настройки. Увы, является довольно дорогим сервисом (от 29$ до 199$ в месяц).

Существует еще один бесплатный сервис IE NetRenderer, но он проверяет только Internet Explorer от 5.5 до 9 версий.

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

Спасибо за внимание, жду ваших комментариев.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий