Сравнение стандартов разработки веб-сайтов для разных браузеров

Обновлено: 20.11.2024

Веб-браузер — второй по важности инструмент после интерактивной среды разработки (IDE) для разработчиков веб-сайтов. Он просто незаменим для множества задач, от поиска в Интернете до отладки скриптов. К сожалению, не все браузеры одинаково полезны. Чтобы сделать их более продуктивными, веб-разработчикам нужен инструмент с возможностями анализа и отладки. Кроме того, веб-сайты создаются для пользователей, которые посещают их через браузеры. Следовательно, использование браузера необходимо для любого веб-разработчика.

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

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

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

Чтобы сайт везде корректно отображался, обычно используются префиксы поставщиков: «-webkit» для Chrome и Safari; «-moz» для Firefox; «-o» для Opera; «-ms» для Internet Explorer и др. Они помогают браузерам правильно воспринимать функции элемента и не влияют на его отображение в других программах. Также конструкторы сайтов делают специальную страницу Coming Soon, которая появляется на экране пользователей неподдерживаемых браузеров. Обычно предлагается перейти на более новую версию или открыть веб-ресурс в другом приложении для его просмотра. Вы можете протестировать кроссбраузерность сайта с помощью сервисов онлайн-тестирования, таких как Cross Browser Testing, Browserling и т. д.

Какой браузер выбрать?

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

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

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

Оглавление

Mozilla Firefox Developer Edition

Mozilla регулярно радует своих пользователей новыми продуктами. Помимо обычного браузера, существуют версии, предназначенные для людей, занимающихся разработкой и созданием новых функций в веб-браузерах. Одним из таких продуктов является Firefox Developer Edition.

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

С точки зрения производительности Mozilla Firefox Developer Edition показывает впечатляющие результаты, а значит, максимально быстрая загрузка страниц гарантирована. В некоторых тестах, таких как WebGL, Asm.js, браузер показывает лучшую производительность среди своих аналогов. Не на несколько пунктов, а целых полтора, а то и два раза.

На данный момент это самый популярный браузер среди разработчиков веб-сайтов и гиков. По крайней мере, он лидирует во многих опросах среди самих разработчиков. И это вполне оправдано, поскольку это действительно мощный, хотя и недооцененный веб-браузер. Кстати, Mozilla Firefox Developer Edition может отображать сетку CSS вашего ресурса, что довольно редко, если не уникально.

Вот несколько вещей, которые отличают этот браузер от его аналогов:

Лучший отладчик JavaScript;
Основная сетка CSS;
Встроенная веб-IDE;
Независимость от корпораций, манипулирующих пользовательскими данными;
Поддержка браузера в различных ОС;
Отличная скорость загрузки страницы;
Повышение производительности.
Возможность синхронизации устройств;
Современные решения для браузерного интерфейса/персонализации;
Текущий список надстроек и расширений;
Обнаруживает неактивный CSS на странице и т. д.

В отличие от других браузеров, в Firefox Developer Edition есть инструмент дизайна, называемый сеткой CSS.С его помощью разработчики могут распределять области на экране на отдельные блоки, содержащие информацию, изменять их положение и оформление.

Firefox Developer Edition доступен для всех известных платформ. Достижение более быстрой программы стало возможным после полной переделки ее движка. Разработчики практически написали новый код с нуля. Новый движок CSS намного быстрее и умнее своего предшественника и включает в себя лучшее из других популярных браузеров. Высокая производительность обеспечивает алгоритм, равномерно распределяющий нагрузку на все ядра вашего компьютера. Таким образом, скорость можно увеличить в 2, 4, а на некоторых устройствах и до 16 раз.

Разработчики попытались создать многофункциональный браузер и преуспели. Mozilla Firefox Developer Edition — действительно уникальный продукт. Developer Edition имеет ряд полезных инструментов, которые пригодятся разработчикам. Они отличаются своей гибкостью и большой функциональностью. Например, есть встроенный отладчик JavaScript, который эмулирует активность других браузеров — таким образом вы можете проверить, как страница будет отображаться в других браузерах. Работать с кодом в Mozilla Developer Edition гораздо удобнее — вся необходимая информация и подсказки отображаются на экране. Чтобы сделать процесс кодирования еще проще, используйте правильный набор внешних инструментов, таких как трекер времени написания кода.

В Mozilla столько же, а иногда и больше возможностей для разработки, чем в Chrome. При этом Mozilla полностью аутентична и не копирует функции продукта Google. Более того, Firefox более уважительно относится к пользовательским данным и не собирает информацию в масштабах Google Chrome.

Вот еще несколько функций, о которых вам, возможно, будет интересно узнать:

Конечно, это не все функции, но нам нужно обсудить еще несколько браузеров. Что касается Firefox, вы должны знать, что даже если у вас нет надлежащего опыта и вы только учитесь разрабатывать программное обеспечение, Mozilla позаботилась о том, чтобы ваше обучение было максимально простым. На сайте компании есть раздел Toolbox с подробным описанием работы с каждой из функций браузера. На самом деле Mozilla Developer Network содержит огромное количество полезной информации для разработчиков. Материалы публикуются профессионалами, которые участвуют в создании новых программ.

Mozilla Firefox Developer Edition доступен для iOS/Android, Windows, macOS и Linux.

Полипан

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

Возможность моделирования веб-сайта с несколькими окнами для разных экранов, от мобильных устройств до мониторов с разрешением 5K.
80 тестов на доступность сайта, чтобы сделать его удобным для всех;
Поддержка большинства популярных CMS;
Поддержка популярных расширений фреймворков, например React, Angular, Vue, Svelte и многие другие.

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

Взаимодействуйте с одной панелью, и все остальные панели будут автоматически следовать вашим действиям. Прокрутка, нажатие и наведение автоматически распределяются между панелями. Вы можете легко убедиться, что ваш сайт работает должным образом во всех окнах просмотра. Достаточно одного клика, чтобы сделать снимок экрана с полным обзором вашего сайта (при всех размерах экрана) и поделиться им с кем угодно. Отладка макета, стресс-тестирование CSS и инструменты разработки на основе Chromium — в Polypane есть все необходимое для создания продвинутых веб-сайтов и пользовательских мобильных приложений

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

Polypane доступен для Windows, macOS и Linux.

Сиззи

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

Все синхронизировано. Моделирование и возможность делать скриншот веб-страницы на нескольких устройствах одновременно;
Анализ элементов на всех устройствах с помощью Universal Inspect Element;
Тесты скорости сайта в различных условиях;
Функция Spotlight для управления веб-сайтом с помощью клавиатуры;
Диспетчер сеансов для переключения между пользователями.

Если вы ищете многофункциональный браузер с инструментами, которых нет ни в одном другом браузере, Sizzy — идеальное решение. Он создан для разработчиков и используется сотрудниками Philips, GoDaddy, Comcast, Basecamp, Zapier и других компаний. Однако браузер доступен только по месячной/годовой платной подписке с двухнедельным бесплатным периодом.

Sizzy доступен для macOS, Windows и Linux.

Блиск

По сравнению с Opera, Chrome и Firefox, Blisk не привлекает столько внимания в Интернете. Тем не менее, стоит задуматься, если вы новичок. Браузер был специально разработан украинскими разработчиками, чтобы предоставить веб-дизайнерам первое рабочее пространство, где они могут максимально быстро разрабатывать и тестировать современные приложения.

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

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

Blisk – это единственный веб-браузер, ориентированный на разработчиков, который дает вам доступ ко всем функциям, необходимым для создания впечатляющих онлайн-приложений. Вы можете увидеть, как ваш сайт или приложение будет выглядеть практически на любом телефоне, от Google Pixel до iPhone. Более того, есть варианты просмотра в альбомном или портретном режиме.

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

Современный URL и синхронизация прокрутки. Blisk автоматически синхронизирует позиции прокрутки и URL-адреса для компьютеров и телефонов.
Автоматические обновления . Всякий раз, когда вы сохраняете изменения кода в браузере, Blisk обновляет ваши вкладки и обновляет ваши изменения CSS;
Инструменты разработчика . Blisk поставляется с DevTools, аналогичным Chrome — вы можете запускать отдельные DevTools для мобильных и настольных компьютеров и использовать их для одновременной проверки производительности;
Уведомления об ошибках . Blisk автоматически отслеживает потенциальные ошибки страницы в JavaScript и ресурсы, которые не загружаются;
Инспектор страниц . Blisk предоставляет инструменты инспектора страниц, которые позволяют быстро проверить любой элемент на мобильном устройстве или компьютере.

Смелый

Если вы ищете бесплатный браузер с открытым исходным кодом, подходящий для повседневного использования, Brave — отличный выбор. Это больше, чем браузер! Разработанный соучредителем Mozilla и создателем JavaScript Бренданом Эйхом, он быстр, безопасен и ориентирован на конфиденциальность, и его стоит попробовать.

Brave — один из самых «навороченных» веб-браузеров в нашем обзоре. Он предлагает множество гибких готовых инструментов для маскировки сети и сохранения инкогнито в сети. Браузер блокирует трекеры и веб-счетчики, удаляет навязчивые рекламные баннеры, устраняет вездесущие системы мониторинга и другие данные, которые могут идентифицировать пользователя.

Все это лишь верхушка айсберга Brave. Главной особенностью этого браузера является встроенный клиент Onion Router (TOR), который позволяет пользоваться онлайн-сервисами, надежно «прячась» за распределенной сетью роутеров. Они гарантируют, что информация о пользователе передается таким образом, что невозможно определить, откуда поступают или куда поступают зашифрованные данные.

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

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

Если этого недостаточно, Brave предлагает полную поддержку расширений Google Chrome, которые упрощают настройку VPN-подключения и тем самым создают дополнительный эшелон защиты от «прослушивания» трафика посторонними лицами.

Вот некоторые сильные стороны Brave:

Работает примерно в 3 раза быстрее, чем Chrome, и оптимизирован для увеличения времени работы от батареи и минимизации потребления памяти.
Поставляется со встроенным блокировщиком рекламы и всеми необходимыми функциями безопасности пользователей.
Снижено потребление трафика за счет отсутствия рекламы (актуально для мобильных устройств);
Легко синхронизируется с вашим Android или iPhone;
Наличие интеграции IPFS для просмотра веб-страниц без посредников;
Отсутствие сбора персональных данных;
Возможность посещать заблокированные сайты (TOR);
Возможность зарабатывать криптовалюту за просмотр рекламы;
Блокировка майнинга браузера и скрытой установки приложений.

Также стоит упомянуть функцию Brave Rewards — она дает вам возможность заработать BAT (Basic Attention Token).Brave — отличный браузер на каждый день, не только быстрый и безопасный, но и бесплатный.

Brave доступен для 64-разрядной версии Windows, 32-разрядной версии Windows, macOS Intel, macOS ARM64 и Linux.

Google Chrome

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

Конечно, нас больше интересует версия Developer Edition, в которой есть специальный набор инструментов и расширенная консоль, позволяющая редактировать код и активировать скрытые опции. В Chrome Developer Edition также есть специальные плагины для разработки:

Вы можете использовать режим DevTools для изменения страницы после ее загрузки, запуска команд консоли Google Chrome для мониторинга и управления страницей, а также тестов скорости и сети для мониторинга веб-трафика.

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

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

Проще всего открыть Google Chrome DevTools из меню Google Chrome. Для этого нажмите значок меню из трех точек в правом верхнем углу. В появившемся меню выберите Дополнительные инструменты > Инструменты разработчика.

Заключение

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

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

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

Чтобы выбрать лучший браузер, рекомендуем попробовать несколько продуктов. Практический опыт позволит вам оценить реальную разницу между ними, как в функционале, так и в интерфейсе.
Удачи!

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

Когда дело доходит до веб-разработки, вам действительно следует проводить тестирование в каждом браузере и на любом устройстве, которое вам попадется в руки; вы, вероятно, уже делаете это с помощью таких приложений, как LambdaTest или BrowserStack.

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

1. LT-браузер

LT Browser – это приложение для веб-разработчиков от LambdaTest. Как и многие приложения этого класса, оно предлагает параллельное сравнение сайтов в разных окнах просмотра. Кроме того, LT Browser имеет ряд отличительных особенностей.

Помимо предварительного просмотра веб-страниц, LT Browser предлагает инструменты разработчика, конкурирующие с Chrome, что удобно, если вы хотите увидеть, как изменения на разных устройствах влияют на ваши оценки Lighthouse. LT Browser также поддерживает горячую перезагрузку, что означает, что когда вы вносите изменения в свой код, вам не нужно нажимать «обновить», окна просмотра просто перезагружаются — удивительно, насколько экономит время это простое добавление.< /p>

2. Разработчик Firefox

Лучший традиционный браузер для веб-разработки в 2021 году – версия Mozilla Firefox для разработчиков.

Стандартная версия Firefox — это превосходный браузер с широким набором функций и ориентированный на конфиденциальность. Версия для разработчиков добавляет к этому набор инструментов, предназначенных для разработчиков. Инструменты отладки CSS и JavaScript превосходны, а инструменты Grid не имеют себе равных для кодирования макетов с помощью CSS Grid.

3.Полипан

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

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

У Polypane есть 14-дневная бесплатная пробная версия, а планы начинаются с 8 долларов США в месяц.

4. Блиск

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

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

5. Сиззи

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

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

6. Храбрый

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

Основное преимущество Brave для разработчиков заключается в том, что он поддерживает расширения Chrome, сохраняя при этом конфиденциальность — он даже может получить доступ в Интернет с помощью Tor, если вам недостаточно простого режима конфиденциальности. Существуют сотни полезных расширений Chrome, и если вы избегаете Chrome из соображений конфиденциальности, Brave решит вашу проблему.

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

7. Хром

Это может показаться скучным, но Chrome по-прежнему остается самым популярным браузером в мире, от США до материкового Китая. Если раньше сайты «лучше всего просматривались в IE», то теперь Chrome используется в Интернете по умолчанию.

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

Инструменты разработчика Chrome – это не только эталон для отображения страниц, но и самый простой способ получить доступ к вашим оценкам Lighthouse, что поможет вам выявить проблемы, которые могут сдерживать вас в результатах поиска Google.

Сотрудники WebdesignerDepot

Сотрудники WDD гордятся тем, что могут выпускать для вас этот ежедневный блог о веб-дизайне и разработке. Если есть что-то, о чем, по вашему мнению, нам следует поговорить, дайте нам знать @DesignerDepot. Другие статьи сотрудников WebdesignerDepot

В этой статье модуль начинается с обзора темы (кросс-)браузерного тестирования и ответов на такие вопросы, как "что такое кросс-браузерное тестирование?", "с какими наиболее распространенными типами проблем вы столкнетесь? " и "Каковы основные подходы к тестированию, выявлению и устранению проблем?"

< th scope="row">Цель:

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

Что такое кроссбраузерное тестирование?

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

Другие браузеры, отличные от одного или двух, которые вы регулярно используете на своих устройствах, в том числе немного более старые браузеры, которые некоторые люди могут использовать до сих пор и которые не поддерживают все новейшие, самые блестящие функции CSS и JavaScript.
Различные устройства с разными возможностями, от самых современных планшетов и смартфонов до умных телевизоров, вплоть до дешевых планшетов и даже старых телефонов с ограниченными возможностями, на которых могут работать браузеры с ограниченными возможностями.
Люди с ограниченными возможностями, которые используют Интернет с помощью вспомогательных технологий, таких как программы для чтения с экрана, или не используют мышь (некоторые люди используют только клавиатуру).

Помните, что вы не являетесь вашими пользователями — то, что ваш сайт работает на MacBook Pro или высокопроизводительном Galaxy Nexus, не означает, что он будет работать для всех ваших пользователей — нужно провести массу тестов!< /p>

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

Здесь мы должны объяснить несколько терминов. Начнем с того, что когда мы говорим о сайтах, «работающих в разных браузерах», мы на самом деле имеем в виду, что они должны обеспечивать приемлемое взаимодействие с пользователем в разных браузерах. Потенциально нормально, если сайт не обеспечивает одинаковую работу во всех браузерах, если основные функции каким-то образом доступны. В современных браузерах вы можете получить что-то анимированное, трехмерное и блестящее, тогда как в старых браузерах вы можете просто получить плоскую графику, представляющую ту же информацию. Если владельца сайта это устраивает, значит, вы выполнили свою работу.

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

Во-вторых, когда мы говорим "в допустимом количестве веб-браузеров", мы не имеем в виду 100 % браузеров в мире — это практически невозможно. Вы можете сделать несколько информированных звонков о том, какие браузеры и устройства будут использовать ваши пользователи (об этом мы поговорим во второй статье серии — см. Нужно протестировать их все?), но вы не можете гарантировать все. Как веб-разработчику, вам необходимо согласовать ряд браузеров и устройств, на которых код определенно должен работать, с владельцем сайта, но помимо этого вам необходимо кодировать с защитой, чтобы дать другим браузерам наилучшие шансы на то, чтобы они могли работать. использовать свой контент. Это одна из самых больших проблем веб-разработки.

Примечание. Защитное кодирование мы также рассмотрим позже в этом модуле.

Почему возникают кроссбраузерные проблемы?

Существует много разных причин, по которым возникают проблемы с разными браузерами, и обратите внимание, что здесь мы говорим о проблемах, из-за которых вещи ведут себя по-разному в разных браузерах/устройствах/настройках просмотра. Еще до того, как вы приступите к кросс-браузерным проблемам, вы уже должны были исправить ошибки в своем коде (см. разделы Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).

Кроссбраузерные проблемы обычно возникают из-за того, что:

иногда браузеры содержат ошибки или по-разному реализуют функции. Эта ситуация намного менее плоха, чем раньше; когда IE4 и Netscape 4 конкурировали за звание доминирующего браузера в 1990-х годах, браузерные компании сознательно реализовывали разные вещи, пытаясь получить конкурентное преимущество, что превращало жизнь разработчиков в ад. В наши дни браузеры намного лучше следуют стандартам, но иногда все еще возникают различия и ошибки.
некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только начинают реализовывать, или если вам нужно поддерживать действительно старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т.е. над ними больше не делается новая работа). ) задолго до того, как была изобретена новая функция. Например, если вы хотите использовать передовые функции JavaScript на своем сайте, они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вам, возможно, придется отказаться от них или преобразовать свой код в устаревший синтаксис, используя какой-либо кросс-компилятор, где это необходимо.
на некоторых устройствах могут быть ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был спроектирован так, чтобы хорошо выглядеть на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве. Если на вашем сайте много больших анимаций, это может быть нормально на планшете с высокими характеристиками, но может быть вялым или прерывистым на устройстве с низким уровнем производительности.

и другие причины.

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

Рабочие процессы для кроссбраузерного тестирования

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

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

Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо — разные люди могут делать что-то совершенно по-разному):

Первоначальное планирование > Разработка > Тестирование/обнаружение > Исправления/итерация

Шаги 2–4, как правило, повторяются столько раз, сколько необходимо для выполнения всей реализации. Мы рассмотрим различные части процесса тестирования более подробно в последующих статьях, а пока давайте просто подытожим, что может произойти на каждом этапе.

Первоначальное планирование

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

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

Например, вы создаете сайт электронной коммерции, обслуживающий клиентов в Северной Америке. Сайт должен полностью работать в нескольких последних версиях самых популярных настольных и мобильных (iOS, Android, Windows phone) браузеров, включая Chrome (и Opera, поскольку он основан на том же движке рендеринга, что и Chrome), Firefox, IE. /Эдж и Сафари. Он также должен обеспечивать приемлемую работу в IE 8 и 9 и быть доступным в соответствии с требованиями WCAG AA.

Теперь, когда вы знаете свои целевые платформы для тестирования, вам следует вернуться назад и просмотреть необходимый набор функций и технологии, которые вы собираетесь использовать. Например, если владелец сайта электронной коммерции хочет, чтобы 3D-тур с поддержкой WebGL был встроен в страницы продуктов, ему нужно будет признать, что это просто не будет работать в версиях IE до 11. Вам придется согласиться. предоставить версию сайта без этой функции пользователям более старых версий IE.

Вы должны составить список потенциальных проблемных областей.

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

Разработка

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

Существует несколько общих стратегий кроссбраузерной разработки, например:

Сделайте так, чтобы все функции работали как можно точнее во всех целевых браузерах. Это может включать в себя написание разных путей кода, которые по-разному воспроизводят функциональные возможности, предназначенные для разных браузеров, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предложите разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоэкранный кинотеатр не будет давать такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент/пользовательская база согласны с этим.

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

Тестирование/обнаружение

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

Протестируйте его в нескольких стабильных браузерах вашей системы, таких как Firefox, Safari, Chrome или IE/Edge.
Проведите небольшое тестирование доступности, например, попытайтесь использовать свой сайт только с клавиатуры или используйте программу чтения с экрана, чтобы проверить, доступна ли навигация по нему.
Протестируйте на мобильной платформе, например Android или iOS.

На этом этапе устраните все проблемы, обнаруженные в новом коде.

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

Попробуйте протестировать последние изменения во всех доступных современных настольных браузерах, включая Firefox, Chrome, Opera, IE, Edge и Safari для настольных компьютеров (в идеале — Mac, Windows и Linux).
Протестируйте его в распространенных браузерах телефонов и планшетов (например, iOS Safari на iPhone/iPad, Chrome и Firefox на iPhone/iPad/Android),
Также проведите тесты в любых других браузерах, которые вы включили в свой целевой список.

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

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

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

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

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

Вы также можете пойти дальше, если хотите. Доступны коммерческие инструменты, такие как Browserling, Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свой тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать ваши изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.

Тестирование в предварительных версиях браузеров

Часто бывает полезно протестировать предварительные версии браузеров; см. следующие ссылки:

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

Исправления/итерации

Обнаружив ошибку, нужно попытаться ее исправить.

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

Возможно, это не ваша вина — если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит.Возможно, она уже исправлена — например, если ошибка присутствует в выпуске Firefox 49, но ее больше нет в Firefox Nightly (версия 52), значит, они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщения об ошибках ниже).

Если это ваша вина, вам нужно ее исправить! Для выяснения причины ошибки используется та же стратегия, что и для любой ошибки веб-разработки (опять же, см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript). Как только вы обнаружите, что вызывает вашу ошибку, вам нужно решить, как обойти ее в конкретном браузере, в котором она вызывает проблемы — вы не можете просто изменить код проблемы напрямую, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвить код, например использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать какой-то другой код в тех случаях, когда это работает.

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

Сообщить об ошибке

Просто повторю сказанное выше: если вы обнаружите ошибки в браузерах, вы должны сообщить о них:

Обзор

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

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

Выход в Интернет осуществляется через браузер, такой как Google Chrome, Apple Safari, Mozilla Firefox, Microsoft Internet Explorer или Edge, Opera или несколько других. Однако важно знать, что все веб-браузеры не созданы одинаково, и различия влияют на внешний вид и работу веб-сайтов.

Различия между веб-браузерами (и почему вам следует отказаться от IE)

Двумя самыми большими различиями между веб-браузерами являются поддержка и отрисовка:

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

Давайте поговорим об Internet Explorer от Microsoft в качестве примера. На большинстве ПК в качестве браузера по умолчанию используется Internet Explorer (IE). Но Microsoft больше не поддерживает IE 5, 6, 7, 8, 9, 10, поэтому они не добавляли исправления безопасности и функциональные возможности с 2016 года. Они поддерживают IE 11 только самым элементарным образом или в целях безопасности/обратной совместимости, поэтому он не очень хорошо отображает веб-сайты.

Кроме того, существуют стандарты отображения, установленные консорциумом W3C (World Wide Web Consortium), который устанавливает международные стандарты. Они постоянно обновляются, улучшаются, обесцениваются и корректируются, поскольку языки, поддерживающие Интернет, подобны живому документу, который меняется с течением времени. Если браузер, как в случае с IE, решит не включать некоторые стандарты, пользователи этого браузера не смогут увидеть анимацию страницы или макет, созданный на основе этих стандартов.

Чтобы веб-сайт выглядел и функционировал должным образом для пользователей IE, веб-разработчики должны либо исключить некоторые функции, либо удвоить свое время и усилия, что повлияет на ваши сроки и бюджет. Вот почему мы рекомендуем вам избегать использования IE в любом варианте в качестве браузера (около 3,5% пользователей все еще используют); он просто не очень хорошо отображает веб-сайты. (Microsoft также не рекомендует IE и теперь предлагает Edge.)

Подходящий веб-браузер

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

Вы не ошибетесь, используя Chrome, Opera, Firefox, Safari и Edge (нажмите на любое название, чтобы узнать больше и скачать бесплатно), если вы поддерживаете браузер в актуальном состоянии, позволяя ему автоматически -update (почти ежедневно выкладывают исправления/настройки/функции). Некоторые браузеры лучше справляются с отображением страниц быстрее или безопаснее, но все эти самые популярные браузеры работают достаточно хорошо.Наш лучший выбор — Chrome. Это предпочтительный выбор для большинства пользователей компьютеров и мобильных устройств и второй после Safari вариант для пользователей планшетов.

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

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

Читайте также: