Кроссбраузерность в Browsershots — как проверить правильность отображения сайта в разных браузерах

Обновлено 28 января 2022 Просмотров: 186 967 Автор: Дмитрий Петров

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

Полезные сервисы для вебмастеров

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


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

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

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

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

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

Логотип сервиса Browsershots

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

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

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

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

.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (20)

Виктор

Ну, что можно сказать — отлично!

Очень даже нужная информация.

Спасибо.

Jack

Спасибо! Продолжайте в том же духе 🙂

Кстати, BrowserShots позволяет увеличить ваш счетчик посещений на 30-50 единиц 🙂 Помимо его основной функции, разумеется 🙂

Дмитрий

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

Заводской раб

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

Дмитрий

Заводской раб, спасибо, я тебя тоже почитываю. И даже хостинг, на который сейчас переехал выбрал по твоей рекомендации. =)

Сергей

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

Дмитрий

Сергей: посмотрите здесь про Денвер, а здесь про бэкап и перенос сайта

Игорь

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

Дмитрий

Алексей: В rss ленту новые статьи должны попадать только автоматически, иначе и смысла в таком RSS канале не будет. О том, как настроить RSS ленту в Joomla, WordPress и SMF вот здесь я уже писал.

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

NIX

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

Наталья

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

Как настроить ленту, чтобы показывались фотографии в ленте. Может это не важно, но у вас они отображаются в ленте.

Евгения

Дмитрий, Вас очень много полезных и толковых материалов. Большое спасибо!

В статье Как настроить отправку пинга при появлении новых материалов для блога на WordPress, Вы предлагаете список пинг сервисов и в нем несколько раз повторяется следующий адрес:http://ping.feedburner.com. Это специально или случайно?

После того, как я загрузила список пинг сервисов к себе на сайт (по совету преподавателей школы start-up), теперь когда нажимаю кнопку ОПУБЛИКОВАТЬ админ-панель зависает и висит до бесконечности или совсем вылетает. Статья публикуется, но в админ панель приходится заходить по новой, а старую страницу админ-панели закрывать. Не подскажите от чего это может быть? Это может быть связано с отправкой пинга? Сайт находится на платном хостинге WordPress.

yaskech

Спасибо Вам Дмитрий за очень подробные и содержательные статьи. На очень многие вопросы нахожу у Вас исчерпывающие ответы!

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

Ирина

« Blog Ping — ускоряем индексацию новых страниц.» касперский ругается на эту ссылку

Оксана

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

Стелла

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

Стелла

«...Если для вас важна быстрая индексация вновь созданной страницы в яндексе, то я советую воспользоваться специальной страницей для отправки пинга персонально яндексу». А вот к примеру в статье Екатерины Тарасовой «Как защитить свой контент от воровства» по ссылке http://amateurblogger.ru/kak-zashhitit-svoj-kontent-ot-vorovstva/#more-10 описан сервис Яндекс Вебмастер под названием «Оригинальные тексты». Так как у меня еще нет своего сайта и поэтому я не имею доступ в ЯВ, то вопрос: эта страница http://blogs.yandex.ru/pings/ и «Оригинальные тексты» — это одно и тоже? Если нет, то в чем разница?

Дмитрий

Стелла: нет — разные вещи. Боюсь Вас еще больше расстроить, но Оригинальные тексты в Яндекс Вебмастере доступны только для сайтов с Тиц равным или большим 10. Так то вот.

Юрий

Здравствуйте.

Что-то не могу найти у Вас на сайте сами сервисы обновления (пинга)???

Раньше, помню, был список, а теперь...

Может, подскажете где искать или убрали?

Спасибо.

С уважением,

Юрий

Юрий

Сколько должно быть пинг сервисов и имеет ли смысл закидывать туда 100 и более служб?

Спасибо

Ваш комментарий или отзыв