Кроссбраузерность сайта — что это, как это сделать и как проверить

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

1. Вручную. Я думаю вы уже сами догадались, что я имею ввиду. Конечно-же, это просто установить все самые популярные браузеры (IE, FireFox, Opera, Chrome, Safari)  на своём компьютере и по очереди посмотреть, как выглядит ваш блог в каждом из них. По правде говоря по началу я и сам использовал этот метод. Но очень быстро пришёл к выводу: во-первых это не очень удобно, во-вторых показывается не совсем полная картина, так как у читателей Вашего блога могут стоять другие ОС на компьютере, мониторы другой диагонали и ещё множество разных нюансов.

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

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

www.browsershots.org

Данный сервис делает скриншоты вашего блога практически во всех видах браузеров, а это не много, не мало 80 штук. Благодаря тонкой настройке можно выбрать как виды движков (WebKit или Gecko), так и виды операционных систем (Linux, Windows, Mac OS X или BSD). Так же в настройках есть выбор разрешения монитора, присутствие установленного javascript, flash, java и другие виды параметров

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

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

  • www. spoon.net
  • www.ipinfo.info
  • www.browsrcamp.com
  • www.browserlab.adobe.com
  • www.delorie.com
  • www.browsera.com
  • www.litmusapp.com

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

1. Lunascape 6 – полноценный браузер 4 в 1. Это браузер от японских разработчиков, который включает в себя движки от 4 самых распространённых на сегодня браузеров (IE, FireFox, Chrome, Safari), отсутствует только Opera. С помощью всего одного клика можно переключать просмотр блога, с одного движка на другой внутри самого Lunascape. Имеется русскоязычная версия.

2. IE Tester – десктопная программа. Она предназначена для проверки кроссбраузерности Вашего ресурса во всех версиях Internet Explorer (от IE 5.5 до IE 9.0). Так же имеется русский язык и как видите на скриншоте, её интерфейс очень похож на продукты от Microsoft Office. Как я писал чуть ранее, браузер Internet Explorer является самым противным популярным на данный момент, так что IE Tester становится просто незаменимым помошником при проверке кроссбраузерности.

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

Проверяйте этот фактор каждый раз при внесении изменений в дизайн.

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

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

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

Есть несколько способов обеспечить кроссбраузерность сайту

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

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

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

Адаптивность сайта — что это такое

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

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

  1. Поточность – во время навигации блоки с данными не смещаются.
  2. Расположение элементов с привязкой к контрольным точкам на всех экранах.
  3. Разумное применение минимальных и пиковых значений. Например, если ширина экрана устройства менее 1000 пикселей, то контент размещается на весь экран. Иначе ширина будет достигать максимум 1000 пикселей.
  4. Применение относительности в измерениях – использование относительных единиц для координат и размеров нижней и верхней границ блока для десктопного и мобильного дисплеев.
  5. Вложенность блоков, которые не нуждаются в оптимизации (логотипы) в контейнер.
  6. Корректная эксплуатация векторных и растровых изображений для масштабирования и сжатия.
  7. Применение единых шрифтов.
  8. Соблюдение стандартов при создании макетов – адаптация сайта под разные разрешения экрана:
  • смартфоны — 320, 430 и 480 px, 768 px;
  • большие планшеты, нетбуки и ноутбуки — 768 px;
  • нет- и ноутбуки, старые мониторы — 1024 px;
  • компьютерные мониторы и телевизоры — 1200, 1920, 2K и 4K.

Цель корректности вёрстки – добиться правильной визуализации сайта на всех дисплеях, расширить пользовательскую аудиторию и повысить конверсию.

Преимущества и недостатки адаптивного дизайна сайта

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

Адаптивная вёрстка упрощает управление сайтом, аналитику и даёт возможность создать единый отчет для всех типов устройств. Также адаптив снижает затраты на разработку, поддержку нескольких версий ресурса: для ПК, смартфонов и планшетов. Контент для всех типов устройств доступен по единому сетевому адресу, поэтому нет необходимости в создании поддоменов для различных версий сайта.

К недостаткам оптимизированной версии относятся следующие моменты:

  • в мобильной версии можно отключить загрузку некоторых компонентов контента (анимация, большие изображения, скрипты). В оптимизированной – страница загружается полностью, и её содержимое формируется уже на самом устройстве. Вследствие возможно незначительное снижение скорости загрузки страницы;
  • с мобильной версии, в отличие от адаптивной существует возможность переключаться на декстопную (полную) версию, например, с m.vk.com на vk.com, с оптимизированной такой возможности нет;
  • в зависимости от цели создания ресурса отдельные его функции и разделы могут оказаться невостребованы на отдельных типах устройств;
  • адаптивные информационные сайты сложнее в управлении блоками рекламы для десктопных устройств и гаджетов.

Как сделать сайт кроссбраузерным

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

  • Применение CSS хаков. Они представляют собой отрывки кода, которые понимает какой-то определенный браузер. Если сайт нормально отображается в нескольких сайтах, а в каком-то другом нет, то можно дописать необходимые хаки. Этот способ считается достаточно грубым и не самым лучшим, так как делает код неэстетичным, но свои функции он выполняет нормально.
  • Использование вендорных префиксов. Этот способ является более «мягким» по сравнению с применением хаков. По сути, он уже пережиток. В каждом браузере есть свои вендорные префиксы и уникальные свойства. Например, в Mozilla Firefox это свойство moz-border-radius, в Safari и Chrome – webkit-border-radius. Они способны менять поведение элемента, не влияя на другие браузеры.
  • Введение универсальных элементов. Они эффективно работают в подавляющем большинстве браузеров. Если использовать только их, то код будет понятным, эстетичным и чистым. С помощью сервиса caniuse.com можно проверить, какие теги поддерживаются определенной версией движка.

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

Какие браузеры необходимо учитывать при верстке

Кроссбраузерными считаются те сайты, которые отлично работают как минимум в таких браузерах:

  • Mozilla Firefox;
  • Opera;
  • Google Chrome;
  • Internet Explorer (в настоящее время – Microsoft Edge);
  • Safari (используется на macOS).

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

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

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

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

Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи. Согласно статистике Statcounter, в тройку лидеров в РФ входят: Google Chrome, Яндекс.Браузер и Opera.

Проверить кроссбраузерность веб-ресурса в автоматическом режиме можно с помощью специальных платных и бесплатных сервисов. Рассмотрим некоторые из них подробнее.

CrossBrowserTesting

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

Используются следующие способы проверки:

  • «Живой тест». Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
  • Тест Selenium. Подразумевает автоматическую проверку в соответствии с предварительно созданным скриптом. Результаты записываются в формате видеофайла.
  • Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
  • Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

В течение 7 дней доступен бесплатный тестовый период с лимитом в 60 минут.

Browsershots 

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

IE NetRenderer 

Как видно из названия, проверить кроссбраузерность сайта можно только для Internet Explorer, начиная с версии 5.5 и заканчивая 11. Сервис работает онлайн, указать здесь можно только версию браузера и адрес тестируемого ресурса.

Browserling 

Осуществляет проверку не в эмулируемом, а в реальном окне браузера, который установлен на виртуальной машине программы. Работает с ОС Windows и 4+ версиями ОС Android в пяти популярных браузерах – Chrome, Opera, IE, Safari, Firefox. Ресурс полностью платный.

Spoon Browser Sandbox 

Проводит бесплатную проверку кроссбраузерности сайта в последних версиях Chrome, IE, Opera, Safari и Firefox. Тестирование в старых релизах платное. После загрузки специального плагина доступно тестирование всех параметров кроссбраузерности. Интерфейс русифицирован.

MultiBrowser

Платный сервис проверки кроссбраузерности. Работает со всеми доступными версиями Firefox, Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов. Приложение способно подключать браузеры, уже установленные на ПК, либо загружать версии, которые нужны пользователю. Есть функция тестирования сайта в различных браузерах в офлайн-режиме. Бесплатная демо-версия доступна в течение двух недель.

Sauce Labs

Онлайн-сервис тестирования кроссбраузерности. При оформлении платной подписки доступна автоматическая проверка около 700 комбинаций браузеров, разрешений и устройств.

Equafy

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

Viewlike.us

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

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

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

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-стилей. Это позволит вам значительно расширить кроссбраузерную поддержку для вашего сайта.

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

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

Firefox, Internet Explorer, Safari, Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые позволяют проверить кроссбраузерность сайта онлайн.

Например, BrowserStack, Ghostlab и CrossBrowserTesting, но их использование может обойтись в значительную сумму. К счастью, существуют бесплатные инструменты. Каждый из них предоставляет пользователям различные функции тестирования.

Browsershots

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

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

Spoon Browser Sandbox

Spoon предлагает более основательный вариант проверки кроссбраузерности. Для Chrome, Firefox, Internet Explorer, Opera и Safari можно выбрать точную версию, которую нужно протестировать.

Если вам нужно протестировать новейшие версии этих браузеров, то это бесплатно. Но если вы хотите проверить старые версии, за это взимается плата:

После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

Данный сервис позволяет полностью протестировать все аспекты кроссбраузерности

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

Viewlike.us

Viewlike.us позволяет просмотреть сайт при разных разрешениях. Это пригодится для тестирования внешнего вида сайта, а также даст ценную информацию, касающуюся адаптивности ресурса:

С помощью этого инструмента проверки кроссбраузерности сайта также можно оценить скорость и юзабилити тестируемого сайта. Если такие показатели, как размер изображений, размер элементов HTML и количество статических ресурсов нужны вам, значит и Viewlike.us будет полезен.

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

IE NetRenderer

IE NetRenderer показывает тестируемый сайт только в Internet Explorer, но зато позволяет выбрать версию от IE 5.5 до IE 11. Это еще один простой инструмент, который подходит только для тестирования внешнего вида сайта:

Browsera

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

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

Если на сайте будут обнаружены ошибки JavaScript, Browsera предоставит детальную информацию по ним, включая тип и версию браузера, страницы или элементы сайта, строку кода, содержащую ошибку, ее описание. Например, «недопустимое значение свойства»:

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

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

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

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

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

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

Поэтому на кроссбраузерность надо обращать внимание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Параметры, определяющие кроссбраузерность

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

  1. Расположение элементов. Если сайт не адаптирован под конкретный браузер, его элементы могут съезжать за пределы экрана, накладываться друг на друга или не отображаться.
  2. Текст. Очень важный критерий, особенно для статейных ресурсов, которых сегодня становится все больше. Текст не должен наслаиваться, съезжать или отображаться в виде нечитаемых символов.
  3. Скорость загрузки. Если сайт очень тяжелый, страницы грузятся медленно и зависают, то пользователь очень быстро покинет такой ресурс.
  4. Адекватная работа всех кнопок, сайдбаров и других функционально активных элементов. Если при нажатии на определенную кнопку команда не выполняется либо реализуется некорректно, то это означает, что у этого сайта могут быть проблемы с кроссбраузерностью.
  5. Адаптивность под все устройства. Ресурс одинаково хорошо должен отображаться и работать на всех гаджетах – компьютерах, планшетах, смартфонах. В крайнем случае должны существовать специальные мобильные версии сайта. 

Согласно данным компании Google, более 70% интернет-трафика сейчас идет через мобильные устройства. С 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию в Google Chrome для всех новых сайтов. Это заставляет веб-разработчиков все активнее заниматься обеспечением совместимости страниц с планшетами и смартфонами.  

Почему это важно

Сегодня кроссбраузерное тестирование важнее, чем когда-либо прежде. Процесс, который когда-то использовался только для самых сложных проектов, теперь стал мейнстримом. Поскольку все больше и больше людей создают веб-сайты, единственный способ выделиться из толпы — создать действительно профессиональный сайт. Что делать, если ваш следующий клиент использует Internet Explorer? Вы же не хотите потерять его только потому, что ваш сайт не отображается в нем? А с появлением адаптивного веб-дизайна поддерживать кроссбраузерность стало невероятно трудно. Тоже самое касается и мобильной версии сайта.

Если раньше веб-разработчикам требовалось только проверить, как веб-сайт выглядит и работает на настольных компьютерах (Mac или PC), то теперь все изменилось

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

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

Заключение

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

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Знай и умей
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: