Почему в разных браузерах сайт отображается по разному
Топик собрал в себе как всем известные способы кроссбраузерной верстки, так и несколько интересных, довольно редко встречающихся.
Предисловие. Почему так получилось
После появления в 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:
Плюсом данного метода является валидность его использования.
CSS-хаки
Другой, не менее частый способ кроссбраузерной верстки – CSS-хаки, позволяющий определять свойства конкретным элементам.
Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.
Заключение
Подведем итог: верстая большие сайты с большим количеством элементов, рассчитывая на дальнейшее развитие и разрастание сайта, все-таки предпочтительней использовать разделение стилей. Это валидно, удобно, это правило хорошего тона. Но нет ничего страшного в использовании CSS-хаков для небольших сайтов, тем более что многие из хаков тоже проходят валидацию.
В заключении скажу, что в идеале нужно стремиться к отказу от использования хаков и разделения стилей, совершенствуя свои навыки в верстке.
Кроссбраузерность — одна из важнейших характеристик любого сайта, подразумевающая одинаково корректное отображение и работу ресурса в разных браузерах, а также их версиях. Для того, чтобы сайт правильно функционировал в Google Chrome, Яндекс.Браузере, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах, необходимо решить вопрос кроссбраузерности еще на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, мы рассказываем в данной статье.
Почему сайты могут по-разному отображаться и работать в разных браузерах
Причина этой проблемы — отличия в исходном коде. Особенно это касается старых версий браузеров.
Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.
В чем выражается кроссбраузерность сайта и почему она так важна
Если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования. Посетители будут уходить с него, не просмотрев и одной страницы. Таким образом, увеличится показатель отказов, а, как известно, этот поведенческий фактор ранжирования сайтов имеет весомое значение. Поисковые роботы посчитают такой сайт неинтересным и понизят его позиции в органической выдаче. О конверсиях, разумеется, не может быть и речи, поскольку пользователю не удалось ознакомиться с предлагаемой продукцией или услугой.
Проанализируем конкурентов, подберем запросы с низкой конкуренцией, проведем поисковую оптимизацию сайта, организуем внешнюю ссылочную массу, проработаем карточки компании на онлайн картах, проведем базовую UX-аналитику сайта. Над каждым проектом работает от 6 до 10 специалистов. Собственные разработчики для доработки сайта при необходимости. От вас - сайт, от нас - позиции в Яндекс/Google и трафик.
При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:
- сохранить структуру;
- не допустить развала верстки;
- избежать наложения текста на текст, изображения;
- сохранить читабельность информации.
Главное, чтобы клиенту было удобно читать, просматривать изображения и совершать действия на сайте с того браузера, которым он привык пользоваться.
Как протестировать сайт на кроссбраузерность
- Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, к слову, можно установить только на macOS.
- Использование специальных онлайн-сервисов. Этот способ прост и надежен. Таких сервисов достаточно много: есть и бесплатные, но с определенными ограничениями, и платные, но более функциональные и быстрые.
Здесь можно бесплатно проверить сайт на корректность отображения информации в различных браузерах (около 65) и операционных системах. В зависимости от степени загруженности сервера запросами проверка занимает от пяти минут до двух часов. Если вы хотите ускорить процесс, рекомендуем приобрести доступ к так называемой «приоритетной обработке».
Результаты тестирования предоставляются пользователю в виде скриншотов. На них видно, все ли в порядке с кроссбраузерностью сайта или над ней нужно еще поработать.
Из бесплатных сервисов также можно использовать CrossBrowserTesting, Browserling и т.д. Каждый из них отличается определенными функциональными особенностями и возможностями. Некоторые сервисы требуют пройти регистрацию, на других можно проверить сайт и без нее.
Если вы планируете использовать платный сервис, попробуйте BrowserStack . Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.
Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.
Как добиться кроссбраузерности сайта
Предлагаем вам несколько самых действенных способов решения этой задачи:
1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
- нестандартно и прописано для определенного браузера;
- это эксперимент, который еще дорабатывается;
- реализует частичный функционал.
- -moz- применяется в Firefox;
- -ms- применяется в IE и Edge;
- -webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
- -o- применяется в старых версиях Opera (на платформе Presto).
Код может выглядеть следующим образом:
- -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
- - webkit-flex-wrap — это свойство для версий Chrome с 4 по 28 и версий Safari с 3.1 по 8;
- -ms-flex-wrap — свойство для IE 10.
CSS-свойство flex-wrap определяет, будет ли flex-контейнер расположен в одной строке или в нескольких. Wrap указывает на то, что flex-элементы внутри контейнера в случае переполнения располагаются в несколько горизонтальных рядов. Программист, создающий сайт, разумеется, хочет, чтоб так было во всех браузерах, поэтому использует вендорные префиксы.
2. CSS-hacks. Хаки — это части кода, которые может понять только какой-то конкретный браузер. То есть, если, к примеру, ваш сайт правильно отображается в четырех браузерах, а в остальных есть проблемы с корректностью интерпретации данных, то эту проблему можно решить, отдельно прописав соответствующие хаки для каждого браузера, в котором страницы отображаются неверно.
3. Разделение стилей. Используется для поддержки Internet Explorer. Этот способ предполагает определение браузера и подключение конкретного файла стилей. В IE применяются условные комментарии, которые понимает только Internet Explorer. Другие браузеры воспринимают этот код как простой комментарий.
4. Универсальные элементы. Они одинаково качественно функционируют практически во всех популярных браузерах. Благодаря им исходный код ресурса не выглядит громоздким, а главное, соответствует требованиям браузеров.
На бесплатном онлайн-сервисе caniuse. com вы узнаете, какие теги поддерживаются той или иной версией браузера.
Самые популярные браузеры среди пользователей Рунета
По данным Яндекс.Радара за июнь 2020 года, в большей степени пользователи Рунета предпочитают Google Chrome, Яндекс.Браузер и Safari.
Самые популярные браузеры среди пользователей Рунета
Что касается браузеров на мобильных устройствах, то здесь Яндекс.Браузер и Safari меняются местами.
Самые популярные браузеры на мобильных устройствах
Подводя итоги, стоит сказать, что добиться абсолютно идентичного отображения сайта во всех браузерах практически невозможно. Поэтому главной целью должен быть не единый дизайн, а читабельность текста, привлекательность изображений, доступность всех важных элементов и корректная работа функционала.
Скажите, пожалуйста, из-за чего в принципе один и тот же сайт отображается по-разному в разных браузерах?
Они по-разному читают css или js?
- Вопрос задан более трёх лет назад
- 18061 просмотр
Каждый по разному воспринимает css.
В каких-то браузерах по дефолту идут отступы, где-то больше, где-то меньше. Такая хрень может быть для заголовков, например.
Некоторые фишки браузер может не поддерживать, например ие6 не держит margin: auto для блоков, или прозрачность.
А некоторые браузеры (ие) не всегда наследуют значения родителя-элемента, и это все надо прописывать отдельно. Шаманить и применять css хаки, что бы именно в этом браузере сделать так, как нужно.
У меня проблема только с ие. Вечно везде все ок, в ие ползет.
Когда в ие все ок я удивляюсь.
но вот проблема у меня сейчас не только в ИЕ. а в Опере и Мозиле, хотя в Хроме все нормально.
хаки, да, придется.
Спасибо огромное.
Они в разных объемах поддерживают эти технологии.
Вот здесь и здесь можете увидеть сравнения браузеров. Примерную картину поддержки определенных технологий различными браузерами Вы увидите.
Добавлю, что в этом замечательном справочнике расписана поддержка каждого селектора различными версиями браузеров.
Я про это и говорю. id должен быть разным, но была допущена ошибка и в документе появился дубликат. Спорная ситуация, сайт с точки зрения стандартов не валиден, но браузерам постоянно приходится с таким работать, допускать поблажки. И вот хром допускает такое, говоря ладно, фиг с ним с дубликатом id, но вот среди форм у этого элемента точно уникальный id, его и выберем.
Еще очень полезны вот такие вещи — вставляете эти css-стили в самом начале — происходит «обнуление» всяких отступов и т.д. у большинства элементов.
1. самая распространенная проблема — плохой код.
нарушение стандартов, отсутствие необходимых параметров и прочие баги воспринимаются браузером нормально, но результат не всегда соответствует ожиданиям. И когда такой багнутый код доводят до нужного вида в одном браузере — в других конечно же все по-другому.
хороший код как правило одинаков или почти одинаков во всех брузерах.
IE хороший показатель — он практически ничего из ошибок не прощает и корежит кривую верстку.
2. мелкие несоответствия — отступы, иногда отсутствие или разное поведение для значений.
решается хорошим reset.css, но все равно доставляет в случае непростой верстки
3. тупо баги.
IE со своим margin, bold/background и ненаследованием размерностей тут лидирует, но и остальные доставляют постоянно.
решается хаками.
Объясните, пожалуйста, почему при использовании инструментов по отображению сайта в разных разрешениях, разные браузеры выдают сайт по разному при одном и том же разрешении?
Chrome, как я понял просто масштабирует. То есть мой сайт выглядит таким же и на разрешениях выше.
Mozilla же идёт более сложным путём.
То есть я установил одинаковую ширину экрана в пикселях, но браузеры мне выдают страницу по-разному. В таком случае разработчику приходится создавать медиазапросы отдельно для разных движков браузеров. То есть, по сути. двойную работу выполнять, что, разумеется, не хочется и не нужно.
В общем у меня 2 вопроса к профессионалам:
Как мне сделать так, чтобы страница во всех браузерах по одинаковой логике изменяла отображение при изменении разрешения?
Почему меня обманывают (и обманывают ли?) эти встроенные инструменты браузеров?
@PavelMayorov предположу, имеется в виду лишь ширина. Вёрстку, которая зависит от высоты, делают редко
Мета width=device-width прописана? Если нет, то возможно хром отмасштабировал под 1024 пикселя, надо прописать
3 ответа 3
Давным-давно, в далёком-далёком прошлом десятилетии, когда мобильники были ещё слишком слабые и ничего толком не умели, все веб-сайты (не считая WAP, который отдельная история) делали только для компьютеров. Соответственно, вёрстка была адаптирована под соответствующую ширину экрана в районе тысячи пикселей. Когда начали появляться первые попытки запихнуть что-то полноценное в телефон, браузерам ничего не оставалось делать, кроме как прикручивать масштабирование. Ведь сайтов под мобильники никто тогда ещё не делал (кроме отдельных WAP), а если пытаться упихнуть вёрстку, сделанную под ширину 1024 пикселя, в ширину 128 пикселей (типичная ширина экранов мобильников того времени), то всё разъедется.
Вот так и жили с Opera Mini 4:
Apple решила не мириться с этим, и, чтобы появилась возможность делать сайты не только под компьютеры, но и под мобильники революционный айфон™, для мобильного Safari придумала специальный meta-тег viewport, который управляет этим масштабированием и позволяет его отключить. (точной даты его изобретения найти не удалось) Со временем он стал де-факто стандартом и нынче поддерживается подавляющим большинством мобильных браузеров.
Ради совместимости со старыми сайтами поведение при отсутствующем meta viewport осталось прежним: они масштабируются под примерно 1024 пикселя по ширине (инструменты в моём Chrome отмасштабировали под 980 пикселей).
Инструменты Firefox масштабирование не делают. Почему — не знаю. Может, не посчитали это нужным. Но вот хром по личному опыту показывает картинку очень близкую к той, которая будет на реальных айфонах и айпадах, со всеми масштабированиями, и ему в целом можно верить (разве что высота скачет из-за разного размера адресной строки, но это мелочи). Скриншот с реального айфона (клик для увеличения):
Так как чаще всего современные веб-сайты делают адаптивными и автоматическое масштабирование им не нужно, можно его отключить с помощью вышеупомянутого мета-тега viewport. Чаще всего он имеет примерно такой вид:
Это пихается в head. В данном виде он устанавливает ширину, равную ширине экрана (в CSS-пикселях, но про CSS-пиксели отдельная история) и таким образом отключает масштабирование:
Мета-тег viewport имеет много разных опций, подробнее о которых можно почитать на MDN или прямо у Apple.
В работе я периодически пользуюсь разными браузерами: Google Chrome, Яндекс.Браузером, Mozilla Firefox, Opera. Давно заметил, что одни и те же сайты в разных приложениях открываются также по-разному. Где-то эти отличия мало заметны и никак не влияют на просмотр и чтение, но иногда возникают определенные сложности с картинками, баннерами, кнопками команд и даже текстами. Чаще всего с такими проблемами сталкиваются владельцы смартфонов и планшетов. Большинство посетителей, встретившись с подобными неудобствами, просто покидают проблемный ресурс и переключаются на альтернативные источники информации.
Если для рядового посетителя неудобство просмотра определенного веб-ресурса скорее относится к разряду мелкой секундной проблемы, то регулярное возникновение отказов от посещения сайта для его владельцев не сулит ничего хорошего. Падает конверсия, снижается рейтинг ресурса в поисковых системах. Почему возникает такая ситуация?
Дело в том, что разные браузеры созданы и работают на разных движках. Эти движки отвечают за загрузку, обработку, отображение и расчет данных. Каждый движок воспринимает и считывает информацию, закодированную в HTML-тегах и CSS-стилях определенного веб-ресурса по-своему. В свою очередь сайты также создаются в различных CMS, разработчики используют варианты встроенных команд, плагинов и скриптов. Для того чтобы сайт одинаково хорошо отображался в разных браузерах, необходимо, чтобы он соответствовал требованиям кроссбраузерности. Что это такое, как проверить и настроить адаптивность сайта в различных браузерных приложениях, мы поговорим в этой статье.
Так что такое кроссбраузерность?
Понятие кроссбраузерности появилось еще на заре освоения интернета в начале 90-х годов. В то время существовало всего два ведущих браузера - Internet Explorer от Microsoft и Netscape Navigator. Считалось, что если сайт одинаково корректно отображается в обоих приложениях, то с кроссбраузерностью у него все в порядке. Затем Netscape Navigator прекратил свое существование, но стали один за другим появляться новые разработки браузерных систем. Некоторые сайты в них отображались корректно, с другими начинали возникать различные баги. Посетители относились к подобным проблемам негативно и просто напросто переставали посещать такие сайты. Разработчики веб-ресурсов вынуждены были учитывать этот фактор и искать пути решения проблемы.
Кроссбраузерность – это способность веб-ресурса отображаться одинаково хорошо во всех популярных браузерах без перебоев в функционировании и ошибок в верстке, с одинаково корректной читабельностью контента. Это очень важный показатель как для поисковых систем, так и пользовательской аудитории.
Конечно, нет необходимости добиваться совершенно одинакового отображения визуальной и текстовой информации сайта во всех без исключения версиях браузеров. Достаточно, чтобы ресурс обладал адаптивностью ко всем возможным устройствам просмотра вне зависимости от размеров экрана. Не должно быть проблем с версткой, когда картинки, баннеры, логотипы «наезжают» друг на друга или вовсе не отображаются. Текстовая информация должна быть читабельной, особенно это касается таблиц. Важно, чтобы корректно работали сервисные приложения, вшитые в ресурс.
Кроссбраузерными считаются сайты, которые хорошо работают на:
- Google Chrome и производных обозревателях (типа Яндекс.Браузера, Chromium, Opera c 15 версии и т.д.);
- Microsoft Edge (сейчас он тоже работает на движке Blink, как и Chrome);
- Mozilla Firefox;
- Safari (браузер, который используется на iOS и macOS).
Существуют и другие обозреватели, но они не столь популярны и работают на редких движках. Потери от некорректной работы в них можно считать несущественными. Также не стоит обращать большое внимание на посетителей, которые используют старые версии браузеров. В этом случае достаточно поставить страницу-заглушку, которая будет предлагать посетителю обновить его обозреватель до актуальной версии. Да и сами разработчики браузеров активно призывают пользователей обновлять их детища.
Параметры, определяющие кроссбраузерность
Любой посетитель сайта в считанные секунды определит, насколько корректно работает ресурс в его обозревателе. Сделает он это исходя из следующих критериев:
- Расположение элементов. Если сайт не адаптирован под конкретный браузер, его элементы могут съезжать за пределы экрана, накладываться друг на друга или не отображаться.
- Текст. Очень важный критерий, особенно для статейных ресурсов, которых сегодня становится все больше. Текст не должен наслаиваться, съезжать или отображаться в виде нечитаемых символов.
- Скорость загрузки. Если сайт очень тяжелый, страницы грузятся медленно и зависают, то пользователь очень быстро покинет такой ресурс.
- Адекватная работа всех кнопок, сайдбаров и других функционально активных элементов. Если при нажатии на определенную кнопку команда не выполняется либо реализуется некорректно, то это означает, что у этого сайта могут быть проблемы с кроссбраузерностью.
- Адаптивность под все устройства . Ресурс одинаково хорошо должен отображаться и работать на всех гаджетах – компьютерах, планшетах, смартфонах. В крайнем случае должны существовать специальные мобильные версии сайта.
Согласно данным компании Google, более 70% интернет-трафика сейчас идет через мобильные устройства. С 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию в Google Chrome для всех новых сайтов. Это заставляет веб-разработчиков все активнее заниматься обеспечением совместимости страниц с планшетами и смартфонами.
Как проверить кроссбраузерность сайта
Самый простой способ определить наличие кроссбраузерности – вручную открыть и проанализировать все страницы сайта в наиболее популярных обозревателях. Согласитесь, метод практически неприемлемый для крупных интернет-проектов, особенно с постоянно обновляемым контентом. Хотя совсем исключать этот способ тоже не стоит.
Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и 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-кода и изображений. Встроенный инструмент позволяет получить рекомендации касательно правил юзабилити.
Как сделать сайт кроссбраузерным
Большинство современных интернет-ресурсов изначально обладают кроссбраузерностью. В тоже время проблема совместимости периодически возникает в том или ином виде даже у раскрученных сайтов с миллионной аудиторией. Существует несколько способов оптимизации кроссбраузерности веб-ресурса.
CSS hacks
CSS хаки – это фрагменты CSS-кода, которые понимает только определенный браузер, другими он игнорируется. Вот CSS-хак для Internet Explorer 6 (IE6):
В этом коде хак, воспринимаемый только браузером IE v.6 и ниже, записан в виде «звездочка html».
Разработчики считают использование хаков не самым лучшим методом устранения ошибок. т.к. они усложняют и делают громоздким код страниц.
Универсальные элементы
Фреймворки
Можно применять заготовки и шаблоны кода, которые совместимы с большинством браузеров и мобильными устройствами. Например, инструментарий Bootstrap, который позволяет создавать и настраивать адаптивные сайты.
Вендорные префиксы
Этот метод в чем-то схож с использованием хаков, но является более эффективным и корректным. Префиксы — приставки к названиям CSS-свойств, используемые определенными браузерами. Они позволяют изменять отображение в конкретном обозревателе.
Примеры преф иксов:
- -moz для Mozilla Firefox;
- -ms используется в Internet Explorer и Microsoft Edge;
- -webkit-border-radius для Safari, а также браузеров на движках WebKit и Blink;
- -o используется в старых версиях Opera на движке Presto, с 2013 Opera использует Blink.
Для соблюдения бесперебойной работы ресурса и поддержания кроссбраузерного функционала следует проводить регулярную проверку на ошибки в HTML и CSS. Сделать это можно с помощью специальных сервисов, таких как HTML Validator и CSS Validator.
Заключение. Яндекс.Толока и кроссбраузерность
Сомневаюсь, что открываю Америку, но даже самые популярные поисковые системы – это тоже сайты. Как и другие веб-ресурсы, они нуждаются в том, чтобы их страницы корректно отображались во всех версиях конкурирующих браузеров. Например, компания Яндекс для проверки своих интернет-проектов на кроссбраузерность активно использует ручной метод.
Кроссбраузерность – важный критерий корректной работы веб-ресурса. Это инструмент поддержания посетительской лояльности, повышения конверсии и поднятия рейтинга в поисковых системах. В то же время не стоит доводить этот показатель до абсолюта. К примеру, если на широком экране десктопного ПК колонки текста отображаются горизонтально, то на небольшом экране смартфона логично будет расположить их последовательно сверху вниз. Главное, чтобы сайт был удобным для пользователя, все важные элементы и функции заметны и доступны.
Читайте также: