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

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

К сожалению, многие владельцы сайта не знают, что такое кроссбраузерность сайта. Что уж говорить об её проверке. А этот параметр очень важен для ресурса. Ведь, если пользователь перешёл на сайт сначала через Яндекс, а потом через Google, ему нужна одинаковая картина. А если, в одном браузере ресурс будет адаптивен с любого устройства, а в другом, логотип и контактная информация будут съезжать, рекламные баннеры закрывать весь обзор, юзер тут же закроет сайт.

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

Первый и самый надёжный – это использовать CSS hacks (хак). Это такой код, который пишется для определённого браузера. Поэтому, если, к примеру, сайт в Яндексе и Майле отображается для пользователя корректно, а в Рамблере нет, стоит дописать хаки конкретно для этого браузера. На самом деле, многие программисты предвзято относятся к такому способу настройки кроссбраузерности. Не смотря на это, код пусть не самый оптимальный, но зато рабочий.

Есть несколько способов обеспечить кроссбраузерность сайту. Первый и самый надёжный – это использовать CSS hacks (хак). Это такой код, который пишется для определённого браузера. Поэтому, если, к примеру, сайт в Яндексе и Майле отображается для пользователя корректно, а в Рамблере нет, стоит дописать хаки конкретно для этого браузера. На самом деле, многие программисты предвзято относятся к такому способу настройки кроссбраузерности. Не смотря на это, код пусть не самый оптимальный, но зато рабочий.

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

Бесплатная проверка на кросс браузерность

Adobe BrowserLab

Adobe BrowserLab — это бесплатный инструмент, который позволяет протестировать ваш проект в различных версиях Chrome, Safari, IE и Firefox. Он предоставляет несколько способов просмотра страниц, включая полно экранный обзор и визуальное сравнение разных вариантов. Сервис может получать динамические страницы через сеть, или его можно использовать локально через Firebug или Adobe Dreamweaver CS5. Также допускается определять комбинацию наборов браузеров, если вам не нужно тестировать проект в очень старых версиях.

Browsershots

Browsershots — вероятно наиболее полный бесплатный инструмент для тестирования, доступный в настоящее время. Он включает варианты браузеров для Linux, Windows и BSD. На нем также можно найти браузеры, о которых вы могли и не знать (например, Galeon, Iceape, Kazehakase и Epiphany). По умолчанию Browsershots проводит проверки на последних версиях браузеров, но доступны и старые варианты.

Чем больше браузеров будет определено для проверки, тем больше времени уйдет на подготовку результатов. Данный факт надо учитывать при выборе набора браузеров.

SuperPreview

SuperPreview является предложением Microsoft в области кросс браузерной проверки  (и он совместим только с Windows). Инструмент позволяет определять набор браузеров для проведения тестов. Он работает с любым браузером, установленным на вашей системе (механизм вывода IE6 встроен в него). Данный факт является причиной его быстрой работы (не нужно ждать загрузки или окончания обработки на удаленном сервисе), но и ограничивает набор доступных браузеров для сравнения.

SuperPreview является бесплатным инструментом и планируется как часть Expression Web. В онлайн версии имеется поддержка  Chrome, Safari (Mac) 4+5, Firefox 3+4. Также можно использовать интерактивный режим для веб сайтов, которые требуют регистрации перед выводом страниц, которые надо проверить. Есть инструмент отладки для DOM. К сожалению, отсутствует поддержка Opera, даже если она установлена локально.

Lunascape

Lunascape — это браузер с тройным механизмом вывода для Windows. Он использует Trident (IE), Gecko (Firefox) и Webkit (Chrome и Safari). Поэтому вы можете увидеть, как выглядит ваш сайт во всех трех вариантах в виде визуального сравнения. Хотя Lunascape не является традиционным инструментом тестирования, тем не менее, он будет очень полезен для дизайнеров и разработчиков. Его основным преимуществом является моментальный просмотр страниц сайта во всех трех вариантах механизмов вывода. Lunascape также поддерживает расширения и плагины Firefox, так что вы можете использовать Firebug для диагностики проблем совместимости.

IETester

IETester — браузер для Windows, который позволяет использовать механизмы вывода и JavaScript для просмотра сайта в версиях IE10, IE9, IE8, IE7, IE6 и IE5.5. Для работы инструмента требуется Windows 7, Windows Vista или Windows XP с IE7.

IE NetRenderer

IE NetRenderer позволяет проверить совместимость с сайта с Internet Explorer версий от 5.5 до 9. Вам придется проверять каждую версию индивидуально.

Spoon

Spoon — сервис для имитации приложений. На нем доступны различные версии Firefox, Chrome, Opera и Safari для пользователей Windows. Недостаток: Internet Explorer поддерживается механизмом виртуализации Spoon, но по требованию Microsoft данный браузер исключен из вариантов тестирования..

Browsera (бесплатная и коммерческая версии)

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

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

Browserling (бесплатная и коммерческая версии)

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

Бесплатная версия имеет ограничение по времени сессии в размере 5 минут, а коммерческий вариант без ограничений стоит $20в месяц.

Сравнение инструментов

В ниже приведённой таблице сведены вместе некоторые сведения об инструментах тестирования для сравнения их между собой и выбора наиболее подходящего варианта.

Инструмент	Количество поддерживаемых браузеров	IE?	Интерактивное тестирование?	Визуальное сравнение?	Цена
Adobe BrowserLab	13	IE6+	Нет	Да	Бесплатно
Browsershots	60+	IE6+	Нет	Нет	Бесплатно
SuperPreview	Изменяется	IE6+	Да	Да	Бесплатно
Lunascape	3	IE6+	Да	Да	Бесплатно
IETester	6 версий IE	IE5.5+	Да	Да	Бесплатно
IE NetRenderer	5 версий IE	IE5.5+	Нет	Нет	Бесплатно
Spoon	16+	Нет IE	Да	Нет	Бесплатно
Browsera	9	IE6+	Нет	Да	Бесплатно – $99/месяц
Browserling	9	IE5.5+	Нет	Нет	Бесплатно – $20/месяц
Mogotest	7+	IE6+	Нет	Да	$15 – $4,499/месяц
Cloud Testing	4+	IE6+	Да	Да	Нет сведений
BrowserCam	90+	IE5.2+	Нет	Да	$19.95 – $89.95/месяц
Multi-Browser Viewer	80+	IE6+	Для некоторых браузеров	Да	$139.95
CrossBrowserTesting	100+	IE6+	Да	Да	$29.95 – $199.95/месяц

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

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

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

• Общие знания о верстке;
• Знания в области особенностей верстки под те или иные браузеры;
• Несколько браузеров на одном компьютере;

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

Отдельный фронт работ нужно провести с заказчиком. Ему нужно объяснить, что в мире web-дизайна нет ничего идеального, и что некоторыми моментами придется пожертвовать. Задачей команды дизайнеров и программистов становится создание сайта, который должен соответствовать следующим пунктам:

• Максимальное соответствие исходному макету и пожеланиям заказчика;
• Максимальное корректное отображение во всех популярных браузерах;

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

Отладка

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

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

Changelog

1.7.4 – 15th July 2019

• Add a $shortcode parameter to the shortcode_atts function call so that the shortcode properties can be filtered.
• Added option to allow screenshot to link to the post’s URL.
• Make get_shots static so it can be used outside of the shortcode/ gutenberg block.

1.7.3 – 12th June 2019

• Add PERMALINK as a link property. If you set the link url to PERMALINK then the url will point to the currrent page or post.
• Improve the default alt text. Previously it would display the url for the screenshot, but this could be messy, and is not actually useful. Now displays “Screenshot from domain-name”.

1.7.1 – 11th June 2019

• Add a new parameter display_link that allows you to disable the link around the screenshot. Defaults to true. Set to false to remove the link.
• Add some placeholder text to the input fields to make it clearer what is expected.
• Change the rel link property to a toggle for one click changes.

1.6 – 30th May 2019

• Add rel property to shortcode so that links can include rel=”nofollow” or similar.
• Fix output of target attribute.
• Tidy codes.

• Improve output html to reduce likelihood of html being modified by a plugin
• Swap urlencode for rawurlencode
• Switch to yoda conditions

• add two new class properties. One for the container, one for the image
• lots of code tidying, and refactoring. Simpler, faster, and more secure
• new tinymce icon that fits the style of the editor much better

1.4

• Update the website screen capture path. This ensures the code will work properly on secure domains
• Add some additional value escaping for extra security

1.3

• Make the visual editor work again (thanks to Ciprian Dracea for the report and the code help!)
• add a new pop up box for the shortcode properties in visual editor mode

1.2

• Add ‘link’ attribute. Allows you to change the url that the screenshot links to
• Sanitize the height attribute and fix a small height related PHP error
• Add support for captions
• Add target attribute for opening links in new windows

1.1

• Add ‘height’ attribute to the TinyMCE prompts
• Allow users to override ‘height’ attribute in shortcode

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

Итак, перейдем к практике, выполним тестирование сайта в разных браузерах с помощью бесплатного сервиса Browsershots, проведем, так сказать, кроссбраузерность сайта онлайн. Для начала заходим по этой ссылке http://browsershots.org/ на сервис.

остальные настройки показаны в прилагаемом видео. После установки настроек, в верхнем поле «Enter URL Here» вводим домен проверяемого сайта и нажимаем кнопку «Submit».

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

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

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

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

Как протестировать сайт на кроссбраузерность?

Проводить тестирование сайта на кроссбраузерность лучше всего на локальном компьютере, на котором установлены разные браузеры, разные версии браузеров и существует возможность изменять разрешения монитора. Сделать это можно путем создания нескольких виртуальных машин с различными ОС, на которых и будут установлены различные браузеры (Linux, Windows, Mac OS и BSD браузеры).

Проверить сайт на кроссбраузерность можно установив на локальном компьютере веб-сервер (ISS, Apache,…) и обратившись к странице через IP адрес компьютера (http://127.0.0.1). Недостатки этого способа проверки: Вы протестируете сайт только под одной ОС и под браузерами совместимыми с этой ОС, в большинстве случаев Вам не удастся установить более старые версии браузеров параллельно новым версиям, Вы затратите огромное количество времени на установку веб-сервера и браузеров/различных версий браузеров.

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

Теги:
кроссбраузерность,
тестирование сайтов,
тест на кроссбраузерность,
разработка сайтов,
веб-дизайн

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

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

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

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

Есть два основных способа добиться одинакового отображения сайта в браузерах:

Разделение стилей с помощью условных комментариев

Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.

Можно задать стили, которые увидят все браузеры кроме IE:

Также есть возможность идентификации версии IE пользователя:
для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии
для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).

Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:

И используя их в дальнейшем в общем стиле для каждой версии:
.ie6 .elementstyle {
background: #123;
}

Плюсом данного метода является валидность его использования.

CSS-хаки

Для IE6:
.elementstyle {
_background: #123;
}
или:
.elementstyle {
-background: #123;
}
или валидно:
* html .elementstyle {
background: #123;
}

Для IE7:
*+html .style {
background: #123;
}
или валидно:
*:first-child+html . elementstyle {
background: #123;
}

Для IE8:
.elementstyle {
background: #F12\3/;
}

Для Firefox:
@-moz-document url-prefix() {
.elementstyle {
background: #123;
}
}

Для Safari и Chrome(один движок, помните?):
@media screen and (-webkit-min-device-pixel-ratio:0) {
. elementstyle {
background: #123;
}
}
или
body:last-child:not(:root:root) .elementstyle {
background: #123;
}

Для Opera все сложнее. CSS-хаки для Opera понимают Safari и Chrome, поэтому нужно использовать совместно хак для Opera и для Safari\Chrome, чтобы переопределить стиль обратно:
@media all and (min-width:0px) {
head~body .elementstyle {
background: #123;
}
}
body:last-child:not(:root:root) .elementstyle {
background: #fff;
}
Альтернативой этим двум хакам может служить интересный способ определения стилей для Opera с помощью встроенного объекта «opera» в JavaScript:

Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.

Заключение

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

Теги:
html-верстка, css-хаки

Многие дизайнеры постоянно ищут кросс-браузерные приёмы, которые помогли бы им решать проблемы совместимости браузеров.

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

Если вы разрабатываете веб-сайты в течение долгого времени, вы согласитесь со мной, что Internet Explorer 8 и более ранние версии этого браузера — это один из самых больших кошмаров веб-дизайнеров и разработчиков. Несмотря на это, есть ещё люди, использующие эти версии IE для просмотра веб-сайтов.

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

В этой статье я покажу вам некоторые кросс-браузерные стилевые приёмы и трюки, которые серьёзно упрощают разработку веб-сайтов.

Description

Use the shortcode to automate the process of taking website screenshots. An icon is also added to the TinyMCE editor to make the shortcode creation process easy.

Available Parameters

• url (required) – the url of the link to shorten
• width – the width of the image
• height – the height of the image
• alt – the image alt text
• link – where the image links. Left blank it will point to the website where the screenshot is being taken
• target – browser target. Set to _blank to open in a new window
• class – add a class to the browsershots wrapper
• image_class – change the default browsershots image class from alignnone to your chosen class
• display_link (true or false – default true) to display a link in your screenshot
• post_links (true or false – default false) to link to the permalink of the post the screenshot is on

Generating Screenshots with code

If you want to create screenshots in a theme using this plugin then you can do so using the method.

For example:

Keep in mind that the plugin must be installed and activated for this to work.

The get_shot method has 3 parameters.

1. The url.
2. The width.
3. The height.

The other parameters, from the shotcode, can be implemented manually when outputting the html.

Multisite Compatibility

The Browser Shots plugin is compatibly with WordPress Multisite, just use the feature to enable the shortcode on every site. If you only want to enable the shortcode for a specific site, activate the plugin for that site only.

Заключение

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

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