Кроссбраузерная вёрстка / HTML Academy corporate blog / Habr
Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект?
Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.
При всём разнообразии браузеров, независимых движков довольно мало, а новые появляются очень редко. Так что вместо десятков браузеров вам нужно поддерживать не больше пяти независимых движков. А ещё бывает, что браузеры с одним названием используют разные движки на разных платформах! В общем, всё очень сложно и интересно.
Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.
WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit, например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.
На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.
Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы (ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.
Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.
Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.
Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.
Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.
Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.
Так что если для вас пиксель-пёрфект — это попасть в сетку и в горизонтальные размеры блоков, то у вас ещё есть шансы. Но если вы подкручиваете сглаживание текста, количество строк в абзаце или вертикальные размеры блоков с содержимым, строго по макету, вы тратите время впустую. Идеально кроссбраузерный сайт будет выглядеть одинаково чужеродно на всех платформах — ведь у каждой свои особенности, привычные пользователям.
И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.
Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах.
Видеоверсия
Вопросы можно задавать здесь.
habr.com
Кроссбраузерность. Как проверить сайт в разных браузерах
Меняя новый шаблон (тему) вашему сайту (блогу), часто мы забываем про один очень важный фактор — кроссбраузерность. Чтобы объяснить, о чём же пойдёт речь в этой статье, я приведу цитату из Википедии:
Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.
Как правило, установив новый шаблон, вебмастер первым делом удаляет ненужные и скрытые ссылки, затем немного правит css файлы, после чего радуется проделанной работе.
А часто ли вы проверяете свой сайт в разных браузерах?
Скажу по-секрету, что современные браузеры очень часто обновляются и по-разному отображают одни и те же страницы.
Дело в том, что при создании новых тем, особенно бесплатных, разработчики не всегда обращают внимание на кроссбраузерность, а иногда и совсем не обращают.
Сейчас в моде мобильные гаджеты — планшетники и смартфоны. Огромная часть пользователей просматривают ваш сайт именно с таких устройств. А что если они увидят размытую вёрстку или разъехавшиеся блоки? Структура сайта также может искажаться при другом разрешении монитора.
Они наверно покинут ваш сайт и больше никогда не зайдут на него! Отсюда и плохие поведенческие факторы, и много отказов и т.п.
Как проверить сайт в разных браузерах
Это можно сделать различными способами. Я расскажу как, а выбирать наиболее удобный только Вам.
Способ 1.
Вы можете установить на свой компьютер огромное множество браузеров: Оперу, Хром, Огненного Лиса. IE можно не устанавливать, если у Вас ОС Windows. В ней он установлен по-умолчанию.
Также вы можете попросить знакомых и друзуй проверить Ваш сайт на всех имеющихся у них мобильниках, смартфонах и планшетах.
Этот способ подойдет мегаобщительным экстравертам с шилом в одном месте, для прочих — это слишком долго. К тому же мало кому нужна на компьютере куча браузеров. Слишком часто они обновляются и замедляют систему.
Способ 2.
Для проверки кроссбраузерности сайта существуют специальные программы. Я не буде описывать их здесь, Вы без труда найдёте их в интернете. Такой способ тоже не всем по душе. не очень хочется ставить на компьютер неизвестные приложения. Очень велика вероятность схлопотать жирный вирус, или ещё чего пострашнее!
Для проверки сайта на кроссбраузерность существуют онлайн сервисы. Их достаточно много. Среди них встречаются бесплатные и платные. Я расскажу о том, который я выбрал для себя!
Итак, нужно зайти на сайт browsershots.org, где Вам будет представлен огромный список браузеров. Не обязательно выбирать все. Достаточно выбрать несколько — самые популярные.
Сервис browsershots.org предлагает для этого удобное меню в нижней части списка:
Кроме нужных браузеров вы можете выбрать следущие параметры:
- разрешение экрана;
- количество цветов;
- версия JavaScript;
- наличие Java;
- наличие Flash плеера и его версию.
После того, как выберите необходимые вам параметры, можете смело вводить адрес сайта в поле, находящееся вверху списка браузеров. Теперь жмём зелёную кнопку Submit.
Откроется новая страница, на которой начнут отображаться скриншоты Вашего сайта. Теперь нужно подождать пару минут и обновить страницу. Время ожидания зависит от количества выбранных Вами браузеров и заданных параметров.
Увидев результаты проверки, многие удивятся тому, как их сайт отображается в некоторых браузерах. Вот такая важная штука — кроссбраузерность!
pwmr.ru
Как проверить кроссбраузерность сайта
Вот и встретили мы Новый Год, нужно продолжать работать. В данной статье я напишу, как проверить кроссбраузерность сайта или другими словами вы узнаете, как найти ошибку на сайте, из-за которой вы можете терять очень много посетителей.
Итак, начнем с того, что такое кроссбраузерность сайта?
Кроссбраузерность – это нормальное отображение ресурса во всех браузерах. Не секрет, что в разных браузерах и в разных версиях этих браузеров ресурс может отображаться по-разному. Например, в Google Chrome ваш сайт может отображаться идеально, но зайдя на тот же сайт с браузера Opera или Firefox, вы можете увидеть много ошибок, которые точно не понравятся посетителям.
Я часто делаю разные изменения на своих ресурсах и буквально несколько недель назад решил сделать логотип кликабельним для улучшения навигации. Зашел через свой любимый Google Chrome, все хорошо, логотип отображался отлично:
Но вчера праздновал Новый Год у друга и решил зайти на свой сайт. Друг пользуется браузером Opera, я был в шоке, когда увидел вот такую картинку:Дизайн – это первое впечатление сайта и если человек зайдя на ресурс, увидит такое кривое отображение, то думаю, он сразу же уйдет с такого сайта. В связи с этим ухудшаются поведенческие факторы. Эту проблему нужно решать, и сейчас я напишу, как проверить кроссбраузерность сайта.
Для начала вам нужно узнать, с каких вообще браузеров приходят посетители на ваш блог. Для этого можно воспользоваться статистикой google analytics. Если к вашему сайту подключена другая статистика, то думаю, там также есть возможность узнать, какими браузерами пользуются посетители. Покажу на примере статистики google analytics. Зайдите в раздел «Аудитория» – «Технологии» – «Браузер и ОС»:
Мы видим список всех браузеров, с которых заходили люди на сайт. В моем случае – это 192 браузеры. Конечно, это очень много и во всех проверять сайт нет смысла. Проанализируем только те, с которых пришло наибольше посетителей:
Кроме этого нужно смотреть, какими версиями браузеров пользовались люди, когда заходили на ваш сайт, поскольку в одной версии ресурс может отображаться нормально, а в другой криво. Для того чтобы посмотреть версии браузеров в google analytics, достаточно просто нажать на любой браузер. Для примера нажму на Safari.
Здесь также анализировать нужно только самые основные версии. В том же google analytics есть возможность посмотреть показатель отказов каждого браузера и версии. Это очень важная информация. Обратите внимание в первую очередь на те браузеры и их версии, где большой показатель выходов:
Скачайте этот браузер на свой компьютер и проверьте в нем как главную так и внутреннюю страницы сайта.
После того, как мы узнаем, с каких браузеров и версий приходят посетители, нужно посмотреть, как отображается в них наш ресурс. Для этого дела есть немало сервисов в интернете, вот два из них:
http://browsershots.org – это, наверное, самый лучший бесплатный сервис, поскольку с его помощью можно проверить кроссбраузерность почти во всех основных браузерах, а также их версиях. Здесь сначала нужно поставить галочки напротив браузеров, с которых приходят посетители на ваш ресурс (информация с google analytics). Внизу можно указать разрешение экрана, а также присутствие javascript, flash и java. Потом введите ссылку на свой ресурс в поле «Enter URL Here:» и нажмите на кнопку «Submit».
После этого вам нужно подождать несколько минут, и вы увидите скриншоты отображения вашего сайта в разных браузерах. Ждать нужно от 3 до 50 минут, все зависит от того, сколько браузеров вы выбрали. А вообще лучше за это время заняться другими делами :smile:.
http://netrenderer.com – с помощью этого бесплатного сервиса можно проверить кроссбраузерность сайта только в браузере Internet Explorer во всех версиях. Сервис также делает скриншоты сайта, как главной, так и внутренней страницы, но нужно проверять ресурс во всех версиях индивидуально.
Все другие способы проверки кроссбраузерности мне понравились намного меньше, я ими не пользуюсь, поэтому и вам советовать не буду. Если каких-либо браузеров или версий нет на browsershots.org, но на ваш ресурс с них приходит много посетителей, то вы можете просто скачать их себе на компьютер и проверить. Но перед проверкой не забывайте чистить кэш как браузера так и сайта.
На этом все на сегодня. До новых встреч, друзья ;-).
vachevskiy.ru
Кроссбраузерность сайта
Нам известно, что браузеры интерпретируют HTML/CSS/JS код и показывают его пользователю в виде красивого веб-сайта. Некие посредники между машиной и человеком. Однако, есть одна проблема, которая осложняет жизнь верстальщика – это то, что этих браузеров много и разработаны они на разных движках, в разных компаниях. Следовательно, не могут отображать сайты одинаково.
Верстальщик, делая верстку сайта, естественно не может одновременно учитывать особенности всех браузеров и ориентируется на какой-то один популярный браузер.
После того, как сайт сверстан и протестирован в любимом браузере верстальщика – работа ещё не закончена. Заказчик сайта и его посетители, скорее всего будут открывать этот сайт в других браузерах. Задача верстальщика протестировать сайт в популярных браузерах на текущий момент, исправить проблемные места — сайт должен хорошо выглядеть во всех популярных браузерах. И только после этого отдавать его заказчику.
В крупных IT компаниях, верстальщик получает список браузеров, в техническом задании на верстку от маркетолога.
На фрилансе, за верстку под старые браузеры, верстальщик берет дополнительные деньги – как за выполнение нестандартной задачи.
Этапы проверки кроссбраузерности
1) Проверка на валидность HTML кода
Валидная верстка должна соответствовать стандартам W3C. Копируете HTML код страницы и вставляете в поле формы на сайте https://validator.w3.org. Для проверки всего сайта, который уже размещен в интернете, вставляете URL сайта в адресную строку и нажимаете кнопку Check. Надпись на зеленом фоне: Document checking completed. No errors or warnings to show. – говорит о том, что код валиден.
Если код содержит ошибки, то сервис покажет, какие строки кода надо исправить.
Вы спросите: Какое отношение имеет валидация кода, к кроссбраузерности сайта
2) Расставляем вендорные префиксы
Приведу список некоторых префиксов для наиболее распространенных браузеров.
- -o- — префикс для браузера Opera
- -moz- — префикс для браузеров из семейства Mozilla
- -ms — префикс для Internet Explorer
- -webkit- — префикс для браузеров Safari и Chrome
Разработчики этих браузеров, для не принятых в стандарт CSS-свойств, ввели свои префиксы. Это значит, что значения у таких свойств, корректно воспринимаются браузером, только с префиксом.
display: -webkit-box;
display: -ms-flexbox;
display: flex;
Сначала верстальщик делает верстку без браузерных префиксов, когда сайт сверстан, добавляются и префиксы. К счастью, этот процесс можно полностью автоматизировать – установить плагин autoprefixer для редактора кода или прогнать код через онлайн-сервис
3) Проверка кроссбраузерности
Алгоритм действий для верстальщика, работающего на фрилансе или в небольшой веб-студии. Узнаем, какие браузеры популярны на текущий момент по данным глобальной статистики и выписываем их.
https://caniuse.com/usage-table
- Google Chrome
- Mozilla Firefox
- Internet Explorer 11
- Microsoft Edge
- Safari
- Opera
Открываем тестируемый сайт во всех этих браузерах и желательно на разных устройствах или проверяем через бесплатные или платные сервисы с эмуляторами браузеров. Онлайн-сервис создает скриншоты сайта во всех браузерах и по автоматически созданным скриншотам, вы видите, в каком браузере, сайт выглядит плохо.
- http://browsershots.org
- http://netrenderer.com
4) Как исправить проблемы с отображением сайта?
Эта часть тестирования на кроссбраузерность, пожалуй — самая сложная. Если поджимают сроки и уже нет времени на исправление багов или не хватает опыта, то лучше купить эту услугу на фриланс-бирже. Чаще всего проблемы с некорректным отображением сайта, встречаются в старых версиях IE, у пользователей, которые сидят на Windows XP.
Заключение
Никогда не будет лишним, проверить сайт на кроссбраузерность как вручную, так и через специальные сервисы. Если сайт где-то неправильно отображается, то проверьте на
- Создано 21.06.2019 10:07:11
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
myrusakov.ru
что это такое, как проверить, как обеспечить
Тематический трафик – альтернативный подход в продвижении бизнеса
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Кроссбраузерность — способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.
Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA
Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.
Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.
Задача разработчика сайта — сделать его так, чтобы вне зависимости от браузера и устройства ресурс отображался правильно.
Кроссбраузерность верстки
Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.
Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.
Правильная верстка сайта вызывает доверие у пользователей. Они с удобством смогут пользоваться ресурсом. Лояльность аудитории — важный показатель.
Разработать кроссбраузерную верстку — отдельный вопрос при работе над крупным проектом. При выполнении этого условия чаще всего задействуются CSS и HTML правила, иногда дополняемые небольшим JavaScript (jQuery) кодом.
Выполняется анализ целевых платформ, с которых наиболее вероятно и часто приходит клиент на сайт, внимание концентрируется на наиболее популярных браузерах и разрешениях экранов. Для этих целей можно использовать Яндекс Метрику, Google Analytics и другие сервисы сбора данных о посетителях.
На сегодняшний день производители браузеров начали активно заниматься своевременной поддержкой стандартов World Wibe Web, HTML 5 и CSS 3, что несомненно сказалось на качестве отображения страниц. Однако, в некоторых свойствах каскадных таблиц и трактовке кода, даже сейчас на разных движках встречаются существенные расхождения, которые необходимо исправлять вручную.
Как обеспечить кроссбраузерность сайта
Использование CSS hacks
“CSS хаки” — отрывки кода, понимаемые только одним определенным браузером. Если ваш сайт корректно отображается в двух браузерах, а в трёх других что-то идёт не так, чаще всего вопрос решается дописыванием хаков для каждого из трех неверно-интерпретирующих движков. Хаки — самый “грязный” способ исправления ошибок, делает код не эстетичным и не валидным, но рабочим.
Вендорные префиксы
Остались, как ещё один рудимент браузерных войн, в особенности браузеров WebKit. Более “чистый” и честный способ, чем использования хаков.
Каждый браузер имеет собственные свойства с вендорным префиксом, так, например элемент border-radius в Mozilla Firefox представлен свойством -moz-border-radius, а в Chrome и Safari -webkit-border-radius. Такие свойства меняют поведение элемента только в определенном браузере, и игнорируются другими платформами.
Универсальность элементов
Делайте упор на универсальные элементы — те, которые одинаково работают в большинстве браузеров. Работа только с ними сделает код коротким, чистым и понятным.
Проверить поддержку правил можно на бесплатном сервисе caniuse.com. В наглядном представлении в виде таблиц можно уточнить, начиная с какой версии тот или иной тег введён в поддержку каждым движком, и можно ли его применять
Как проверить кроссбраузерность сайта
Вы сверстали сайт. Учли советы. Настало время его проверить. Первый способ — установить на виртуальную машину всевозможные браузеры, открыть свой сайт в каждом и посмотреть.
Так же есть специальные сервисы проверки сайта на кроссбраузерность.
- browsershots.org
Преимущество:Позволяет получать скриншоты из большого количества разных версий движков.
Недостаток: Долгое ожидание.
- crossbrowsertesting.com
- browserstack.com
Преимущество: Мощные средства для глубокого анализа веб-ресурса в режиме онлайн.
Недостаток: Платное использования большинства функций.
Как влияет на посещаемость сайта
Существует негласная статистика, говорящая о том, что Яндекс Браузер и Chrome пользуются популярностью молодёжи, а Opera и Mozilla отдают предпочтения уже работающие люди. Представьте, что вы создали сайт по скейтбордингу для молодежи, а его оформление с треском проваливается в Chrome. Шрифты не загружаются, отступы появляются совсем не там, где они должны быть — настоящая катастрофа маркетинга, потеря целевой аудитории.
Это был лишь наглядный пример того, как кроссбраузерность важна для любого проекта. Именно то, насколько хорошо ваш сайт поддерживает наибольшее количество браузеров, зависит его посещаемость и интерес пользователей к проекту.
Никто не будет читать блог с мобильного телефона, если буквы на сайте мелкие и неразборчивые, посетитель уйдет с сайта, если увидит, что в его браузере дизайн выглядит нечитабельно и ужасно.
К тому же, поисковые системы поднимают внутренний рейтинг сайтам, оформленным согласно стандартам современной верстки, что также положительно скажется на конверсии проекта.
Так же в блоге у нас есть статья про адаптивную верстку.
semantica.in
7 инстурментов для тестирования кроссбразуерности сайта в 2016
От автора: несмотря на появление адаптивного дизайна и постоянно увеличивающуюся поддержку стандартов, проблема кроссбраузерности не ушла в прошлое. Тестировать свой сайт вручную на работу во всех существующих браузерах и операционных системах не просто невозможно, это невыполнимо. И тут нам на помощь приходят инструменты по тестированию кроссбраузерности сайта!
Ниже я составил список из 7 на мой взгляд выдающихся инструментов для тестирования кроссбарузерности, как платные, так и бесплатные.
Browsershots
Browsershots – простой и очень полезный сервис. Сервис бесплатный, но в нем есть такой функционал, какой вы не сможете найти в других приложениях, даже в платных.
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
ЗарегистрироватьсяСервис создает скриншот работы веб-сайта в определенных браузерах. Список поддерживаемых браузеров обширен. Можно выбрать разрешение экрана, глубину цвета, есть возможность проверять сайт на наличие ошибок с JS (и определение версии JS), Java и Flash.
В сервисе почти нельзя писать скрипты, а навигация по тестам также оставляет желать лучшего. Зачастую получение результатов тестирование занимает много времени. Отсутствует поддержка мобильных браузеров, но для бесплатного решения функционал довольно обширный. Важно видеть то, в каком виде страница передается пользователю еще до того, как он ее просмотрел.
Если вам нужно больше функций и возможность расставлять приоритеты при тестировании, вы можете приобрести подписку на месяц за $29.
Browser Sandbox
Browser Sandbox – еще один сервис для тестирования кроссбраузерности с большим списком поддерживаемых браузеров. Существенный минус заключается в том, что данный сервис доступен только пользователям Windows. Пользователям Linux и Mac OS не повезло, однако разработчики обещают версию для Mac в скором будущем.
К плюсам можно отнести большой список поддерживаемых браузеров, среди которых IE, Firefox, Chrome, Chromium Canary, Firefox Mobile, Safari, Opera и Firefox Nightly. В бесплатной версии сервиса можно делать тесты только в последних версиях браузеров.
За доступ к старым версиях браузеров придется заплатить. К счастью тарифы дешевые и начинаются от $4.95 в месяц.
IE Testers
Если вы создаете свой сайт в первую очередь под IE и вам нужно протестировать его на работу в различных версиях данного браузера, мы подобрали парочку бесплатных сервисов специально для IE.
Netrenderer
В Net Renderer можно проводить тесты в версиях IE от 5.5 до 11. Быстрый и простой инструмент, но функционал оставляет желать лучшего.
Microsoft Edge
Microsoft Edge – целая платформа, выходящая далеко за пределы тестов для IE. Собственно говоря, браузер позволяет создавать скриншоты работы сайта в других браузерах и из-под различных мобильных устройств. Причина, по которой я вынес данный браузер в группу тестировщиков IE, в том, что в браузере есть виртуальные машины для различных версий IE, а также в браузере есть Azure Remote App, с помощью которого можно удаленно проводить тесты в IE.
My Debugbar
И последний сервис для теста IE — My DebugBar, также известный как IETester. В отличие от Net Renderer, My Debugbar – десктопное приложение весом 60Мб. Его необходимо загрузить, и работает программа только в Windows.
В IETester есть несколько известных минусов. Прежде, чем грешить на ужасные результаты тестов, вам необходимо почитать о багах данного приложения.
Webshot by Mobile Ready
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
ЗарегистрироватьсяОтличие Webshot в том, что это сервис только для тестирования кроссбраузерности на мобильных устройствах. Сервис бесплатный, но вам придется зарегистрироваться.
На момент написания статьи сайт Webshot не работал, по крайне мере у меня. При попытке зарегистрироваться я получал ошибку Internal Server Error. Пару недель назад я писал разработчикам данного сервиса о возникшей проблеме, ответа до сих пор нет, да и в будущем не ожидается.
Тем не менее, я не стал исключать данный сервис из списка, потому что ЕСЛИ они пофиксят проблемы, то этот сайт может предложить довольно хороший функционал.
Browsera
Платные сервисы начинаются с Browsera. Крайне полезное приложение, и вы точно знаете, за что вы платите деньги. С его помощью можно тестировать макеты, JS, динамические страницы, страницы с паролем и т.д.
Установка не нужна. Данный сервис можно бесплатно опробовать в течение 30-ти дней. В бесплатном аккаунте почти нет функций, а платные тарифы идут от $39 до $99.
CrossBrowserTesting
В этом сервисе мне больше всего нравится то, что он использует настоящие устройства для запуска браузеров. Эмуляторы вполне справляются со своей работой, но нет ничего лучше, чем запустить сайт на реальном устройстве. Список возможностей довольно впечатляющий, и CrossBrowserTesting точно стоит своих денег. Я думаю, что список поддерживаемых браузеров и ОС самый большой в сети – 900 браузеров в более чем 40 операционных системах, в том числе iOS, Android, Windows, Mac и т.д.
Мне также понравилась функция теста в реальном времени. С ее помощью можно тестировать веб-страницы на реальном оборудовании. Тестировать можно AJAX, HTML формы, JavaScript, Flash. Среди других возможностей – локальные тесты, Selenium тесты (пишет автоматизированные скрипты), а также сравнение скриншотов. Минимальный тариф стоит $29 в месяц, но можно взять семидневный триал.
BrowserStack
BrowserStack – еще один крупный игрок в индустрии. Отлично подходит для теста мобильных устройств (настоящие устройства), однако также имеется 700+ десктопных браузеров.
С помощью данного сервиса также можно проводить локальные тесты, делать быстрые скриншоты с разрешениями от 800×600 до 2048×1536. Так же как и у CrossBrowserTesting, тарифы начинаются от $29 в месяц, но BrowserStack также предлагает ограниченные предложения за $12.50 в месяц для фрилансеров. Также для проектов с открытым исходным кодом у них есть бесплатные сервисы.
В сети полно платных сервисов, но я не могу перечислить их все. Я перечислил только самые известные, так как не все платные решения стоят своих денег. Бесплатные сервисы также вполне неплохи, но в них отсутствует очень полезный функционал. Поработайте с перечисленными выше сервисами, и быть может, какие-то из них окажутся вам полезными.
Заключение
Я знаю, чего вы хотите – вы не хотите разбираться во всех сервисах, вы хотите быстренько прочитать кто же все-таки «победитель». Однако это случай, когда на вкус и цвет товарища нет. Платные предложения предлагают расширенный функционал, в то время как бесплатные подходят для быстрых тестов.
Лично я долгое время работаю с BrowserShots, и меня не смущает ограниченный функционал. Недавно я проектировал простой шаблонный HTML сайт для друга. Шаблон был простой, и мне очень нравился его код.
Но когда друг открыл сайт на своем компьютере, он сказал мне, что в IE сайт выглядит очень плохо. И да, я не тестировал его на работу в IE перед отправкой – проект был предварительным и с таким отличным кодом, что он просто не мог не работать в каком-либо браузере.
Я открываю BrowserShots, и там все в порядке. На всякий случай я предложил сменить шаблон. И опять та же проблема. Я начал подозревать, что проблема кроется в браузере друга, и предложил ему открыть сайт на другом компьютере. И проблема исчезла.
Но если бы у него не было под рукой еще одного ПК с рабочим IE, было бы сложно убедить его, что проблема в его браузере, а не в моем коде.
Вот именно для таких случаев, когда нужно быстро набросать примерный проект, вам подойдут BrowserShots или другие IE тестировщики. Ну и естественно, если вам нужны более надежные гарантии, то тут вам не помогут бесплатные решения. Вот почему трудно выделить какой-то один сервис и назвать его лучшим – все зависит от конкретного случая.
Автор: Ada Ivanoff
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
ЗарегистрироватьсяВеб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видеоwebformyself.com
Кроссбраузерность. Причины и приемы / Sandbox / Habr
Топик собрал в себе как всем известные способы кроссбраузерной верстки, так и несколько интересных, довольно редко встречающихся.Предисловие. Почему так получилось
После появления в 1994 году одного из первых удачных браузеров Netscape Navigator, созданных на основе первого браузера с графической оболочкой Mosaic, копания Microsoft решила сделать свой браузер и назвать его Internet Explorer. Первая и вторая версия IE поставлялись вместе с пакетом Microsoft Plus!, дополняющим возможности Windows, но широкого распространения не получили. Тогда Microsoft решили разработать радикально отличающийся от IE 1.0 и 2.0 браузер, для чего компания наняла программистов из Spyglass, которые разработали новый браузер на основе Mosaic. Так в 1996 году появился Internet Explorer 3.0. Однако разработчики ввели в браузер несовместимые со стандартами расширения HTML, которые впоследствии сохранялись от версии к версии. Последующее параллельное развитие IE и Netscape Navigator привели к захвату IE 95% рынка. Застой в развитии IE с 4.0 до 6.0 версии, с плохой поддержкой стандартов, низкой скоростью работы и отображения страниц, привел к возрождению Netscape в версии 6.0, который был написан на новом движке Gecko. Обновленный Netscape Navigator не смог добиться былых вершин и со временем компания Netscape объявила о прекращении поддержки своего браузера.
Однако движок Gecko послужил основой для создания в 2004 году современного браузера Mozilla Firefox. В 1996 году появилась Opera, которая добилась своих успехов скоростью и простотой использования. В 2003 году компания Apple выпустила свой браузер Safari на движке WebKit, отказавшись от IE, ранее использовавшийся в Mac OS. В 2008 году Google также решил вступиться в гонку браузеров, выпустив Google Chrome, основанный на том же движке что и Safari.
Таким образом, каждый из браузеров имеет свою историю, имеет свои версии, которые в свою очередь различаются поддержкой Javascript, HTML и CSS.
На сегодняшний день доля мирового рынка браузеров составляет: 45% для IE, 31% Firefox, 15% Chrome, 5% Safari и 2% Opera.
Отдельно хочется порадоваться о снижении доли на рынке самого «старого» и проблемного браузера IE6, который сейчас занимает всего 6%.
Кроссбраузерность
Под кроссбраузерностью понимается одинаковое отображение и работа сайта в разных браузерах. В данном топике я не буду рассматривать проблемы работы JavaScript в разных браузерах, а остановлюсь на верстке.
Есть два основных способа добиться одинакового отображения сайта в браузерах:
Разделение стилей с помощью условных комментариев
Разделение стилей для разных браузеров – один из самых распространенных способов кроссбраузерной верстки. Суть метода заключается в идентификации вида браузера пользователя и применение соответствующего стиля совместно с основным.
Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.
Можно задать стили, которые увидят все браузеры кроме IE:
Также есть возможность идентификации версии IE пользователя: для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии
для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).
Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:
и используя их в дальнейшем в общем стиле для каждой версии:
.ie6 .elementstyle {
background: #123;
}
Плюсом данного метода является валидность его использования.
CSS-хаки
Другой, не менее частый способ кроссбраузерной верстки – 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.
Заключение
Подведем итог: верстая большие сайты с большим количеством элементов, рассчитывая на дальнейшее развитие и разрастание сайта, все-таки предпочтительней использовать разделение стилей. Это валидно, удобно, это правило хорошего тона. Но нет ничего страшного в использовании CSS-хаков для небольших сайтов, тем более что многие из хаков тоже проходят валидацию.
В заключении скажу, что в идеале нужно стремиться к отказу от использования хаков и разделения стилей, совершенствуя свои навыки в верстке.
habr.com