По какой причине между браузерами прослеживается конкуренция

Обновлено: 04.07.2024

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

Предисловие. Почему так получилось

После появления в 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-хаки, позволяющий определять свойства конкретным элементам.

для Opera все сложнее. CSS-хаки для Opera понимают Safari и Chrome, поэтому нужно использовать совместно хак для Opera и для Safari\Chrome, чтобы переопределить стиль обратно:
@media all and (min-width:0px) head

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

Заключение

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

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

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

Браузерные движки

Браузер — программа не простая, это целый набор компонентов, взаимодействующих между собой. Для краткого обзора потребуются всего два компонента из множества — движок отрисовки содержимого и движок исполнения JavaScript.

Существующие движки отрисовки содержимого

Trident (так же известный как MSHTML) — движок, ранее разрабатываемый Microsoft для браузера Internet Explorer;
EdgeHTML — преемник Trident, ранее разрабатываемый Microsoft для браузера Legacy Edge (ранее просто Edge);
WebKit — движок, разрабатываемый Apple для браузера Safari;
Blink — преемник WebKit, разрабатываемый Google для браузера Chrome;
Gecko — движок, разрабатываемый Mozilla для браузера Firefox;
Servo — исследовательский проект Mozilla, некоторые технологии со временем перетекают в Gecko.

Существующие движки исполнения JavaScript

Chakra JScript — движок JS, ранее разрабатываемый Microsoft для браузера Internet Explorer;
Chakra JavaScript — преемник Chakra JScript, ранее разрабатываемый Microsoft для браузера Legacy Edge;
Nitro — движок JS, разрабатываемый Apple для браузера Safari;
V8 — движок JS, разрабатываемый Google для браузера Chrome;
SpiderMonkey — движок JS, разрабатываемый Mozilla для браузера Firefox.

И тут вроде бы очевидно, какие браузеры какие движки используют, но Microsoft внёс не много путаницы в понимание данной темы, поэтому рассмотрим браузеры отдельно.

Браузеры

Chromium

Chromium — это open-source ответвление браузера Chrome. Браузеры на основе Chromium составляют большую часть из всех используемых браузеров на планете Земля.

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

Это в конечном итоге встанет разработчикам браузеров боком, потому что в любой момент главный разработчик Chromium — Google может вставить палки в колёса разработчикам модификаций.

Всех браузеров на основе Chromium подсчитать одному человеку вряд ли под силу, поэтому приведу список только тех, что помню:

Chrome — в представлении не нуждается, браузер от Google;
Chr Edge — новый браузер от Microsoft со старым названием. Поговаривают, отличается большей производительностью от Chrome. С некоторых пор предустанавливается в систему;
Brave — браузер с повышенной безопасностью настолько, что приватный режим использует Tor;
Яндекс.Браузер, Opera, Vivaldi, тысячи их.

Firefox

Firefox использует движки Gecko и SpiderMonkey для своей работы. Имеет небольшое количество базирующихся на Firefox браузеров, но самый известный — Tor Browser. Является единственным рубежом до полного перехода интернета на браузеры на основе Chromium.

Internet Explorer

Это любимая всеми утилита для скачивания браузеров. Как и Chrome — не нуждается в представлении. До 11 версии использовал движки Trident и Chakra JScript. В 11 версии, за исключением режима совместимости, стал использовать движки Trident и Chakra JavaScript. Этот браузер ещё долго будет использоваться для всякого рода систем видеонаблюдения, поскольку имеет, почему-то, популярный в узких кругах API для расширений. В Windows 8 и Windows 8.1 имел особую модификацию движка Trident на базе WinRT для Metro режима.

(Legacy) Edge

Браузер, начавший своё существование с кодовым названием Project Spartan, являлся новым браузером от Microsoft в 2015 году, использующим движки EdgeHTML и Chakra JavaScript. Конечной целью проекта была полная совместимость с сайтами, отлично работающими в Chrome. В итоге — получилось нечто своеобразное, но, очевидно, не выжившее под давлением Google.

Safari

Safari? А нет его больше, этого вашего Safari, кончился.

Нецелевое использование браузеров

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

П р ограммистов на JS нечем занять;
На JS+HTML новичкам проще программировать;
Кроссплатформенность;
Требуется возможность отображать веб-страницы.

Приведу примеры подобного использования:

Chromium

Нынешние браузеры настолько сложны, что одному человеку создать собственный браузер не под силу (либо это должен быть гений). Они по сложности сравнимы с операционными системами! А, постойте, вот и первый кандидат на нецелевое использование — Chrome OS. Да, весь пользовательский интерфейс — просто модифицированный Chromium.
Однако, помимо этого, в виде CEF (Chromium Embedded Framework), Chromium используется в:

Internet Explorer

Почти любое Win32 приложение, умеющее отображать WEB-страницы и при этом в распакованном виде занимающее меньше 60 мегабайт использует внутри Internet Explorer. Кстати, это касается не только маленьких по размеру приложений, например, Visual Studio использует Internet Explorer для отображения WEB-страниц, когда это требуется в работе IDE. Ещё существуют HTA приложения — древний предшественник CEF на базе Internet Explorer. И ведь до сих пор работает.

(Legacy) Edge

Новым приложениям — новые движки! Любое UWP приложение, использующее внутри отображение WEB-страниц работает на базе Edge. Не то, чтобы Microsoft запрещали использовать что-то другое, но никто просто и не старался. Так же, пока что, в предварительных сборках Windows новая клавиатура с GIF панелью тоже использует Edge для рендеринга. В будущих версиях, полагаю, перейдут на Chr Edge.

Производительность

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

Prefetcher

В Windows есть такая штука — Prefetcher. Она занимается подгрузкой программ в ОЗУ при старте ОС и на протяжении её работы. Штука эта достаточно умная, и она анализирует чаще всего запускаемые программы, чтобы в дальнейшем их подгружать.

Как это связано с браузерами? Идея в том, что это может смазать первый пользовательский опыт с другим браузером, например, пользуясь постоянно Chrome, имеете установленную версию Firefox. При запуске Firefox будет вести себя крайне медленно — медленнее, чем ваш основной браузер. Всё потому что он запылился в глазах Prefetcher. В конечном итоге всё будет работать быстро, но первое впечатление после долгого неиспользования будет ужасным. Особенно это касается пользователей с HDD или малым количеством ОЗУ.

Области распределённой памяти

Да, звучит не очень. Но суть, в данном случае, простая — если одна единица исполняемого кода требуется к исполнению больше одного раза, будь то exe или dll , то в память она загрузится лишь один раз. Поясню: если два различных приложения в ходе своей работы загрузят одну и ту же библиотеку, например, edgehtml.dll , то этот файл будет загружен в ОЗУ компьютера на самом деле только один раз, хотя, казалось бы, потребуется два или больше раз. Таким образом ОС экономит нам оперативную память.

Движки нормального человека

К чему это я? А вот дело в том, что в отличии от других браузеров, Internet Explorer и (Legacy) Edge предустановлены в систему, а их движки хранятся в папке System32 . Это, вкупе с API для разработки приложений, означает, что все приложения в системе, использующие данные движки будут загружать их в память только однажды. И этот принцип распространяется на все приложения.

У людей часто возникают проблемы с UWP приложениями, а точнее — с их скоростью запуска. Всё дело в WinRT — огромном наборе библиотек, при помощи которых UWP приложение взаимодействует с ОС. Если не использовать UWP приложения часто, то этот набор библиотек не будет прогружен в памяти полностью, и придётся ожидать окончания этого процесса перед использованием приложения. Но забавный факт — используя два и более UWP приложения время их старта и общая производительность резко увеличиваются и часто даже превосходят Win32 программы. Исключением из этого является приложение "Фотографии" — тут отдельная история, покрытая туманом.

Движки курильщика

А вот с приложениями (в том числе и браузерами) на основе Chromium это так не работает. Каждое приложение комплектует с собой собственную сборку библиотеки CEF, что, кроме раздувания размера приложения, не позволяет операционной системе иметь только одну копию dll в ОЗУ. Итого это сильно замедляет производительность при использовании множества подобных приложений. Помимо того, сам размер CEF довольно удручающий.

Microsoft Store

У многих возникает вопрос — почему в Microsoft Store нет ни одного браузера(не считая нескольких кривых поделок на EdgeHTML)? Ответ, на самом деле, прост — все браузеры, включая Chr Edge имеют собственную систему обновления, что прямо запрещено правилами Microsoft Store. В остальном никто никого не ограничивает.

Как удалить новый Microsoft Edge

Это не очень сложно. Для начала требуется найти папку с Microsoft Edge, она расположена по пути:
C:\Program Files (x86)\Microsoft\Edge\Application
Далее заходим в любую версию Edge и переходим в папку Installer . Полный путь может выглядеть следующим образом:
C:\Program Files (x86)\Microsoft\Edge\Application\83.0.478.58\Installer
Далее необходимо открыть командную строку от имени администратора в данной папке и выполнить следующую команду:
setup.exe --uninstall --system-level --verbose-logging --force-uninstall
Готово! Через несколько секунд этот браузер исчезнет из системы. Но при следующем же обновлении он появится снова, будте бдительны.

Заключение

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

Администраторы Хабра, пожалуйста, почините HabraStorage в Legacy Edge! Совсем не дело.

SEO Кроссбраузерность — одна из важнейших характеристик сайта, которая подразумевает под собой одинаковое корректное отображение и работу ресурса в разных браузерах (Google Chrome, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах), а также их версиях. Вопрос кроссбраузерности лучше решать на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, читайте в данной статье.

Почему верстка сайта может по-разному отображаться и работать в разных браузерах

Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.

Почему кроссбраузерность сайта так важна

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

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

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

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

Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, например Safary (речь о свежем), можно установить только на macOS.
Попросить знакомых, чтобы зашли на сайт со своих девайсов.
Использование специальных онлайн-сервисов (о них ниже) или ПО (например Blisk ). Этот способ прост, надежен и самое главное быстрый.

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

Перечислю самые популярные.

CrossBrowserTesting

Сервис платный (первые 7 дней или 60 минут бесплатно), в нем более чем 2050 реальных настольных и мобильных браузеров. И так же четыре режима тестирования:

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

Browserling

Бесплатно только тестирование в устаревших IE на устаревших платформах.

Sauce Labs

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

Litmus

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

Browsershots

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

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

Browserstack

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

Программное обеспечение для тестирования кроссбраузерности

MultiBrowser

Настоящие веб-браузеры с песочницей, а также набор для тестирования адаптивного дизайна, мобильных устройств, iPhone и iPad Simulator, которые можно запускать в автономном режиме в среде вашего рабочего стола!

Демо версия работает 14 дней.

Как добиться кроссбраузерности сайта

Вариант 1. Вендорные префиксы

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

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

-moz- применяется в Firefox;
-ms- применяется в IE и Edge;
-webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
-o- применяется в старых версиях Opera (на платформе Presto).

Пример обычного CSS кода:

И этот же CSS код с вендорными префиксами:

Есть онлайн веб сервис для расстановки вендорных префиксов для лучшей кроссбраузерности: Автопрефиксер . Его рекомендуют к использованию Google и используют в Twitter и Taobao.

Вариант 2. CSS хаки

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

Примеры хаков можно посмотреть на habr .

Вариант 3. Универсальные элементы

Самые популярные браузеры среди пользователей Рунета

По данным Яндекс.Радар более 70% пользователей Рунета предпочитают с ПК заходить с брузеров: Google Chrome и Яндекс.Браузер.

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

В общем если занимаетесь версткой, то нужно как минимум ориентироваться на Google Chrome, Яндекс.Браузер (он по моему на той же платформе что и хром) и Safari. В идеале на все где количество пользователей более 1%.

Сколько существует браузеров

А если спросить об этом у Гугла? Ответ будет неоднозначный. Количество более-менее известных браузеров сейчас превышает 50 наименований. И возможно, прямо сейчас кто-то выпускает в сеть еще один, свой собственный. А давайте представим, что уже завтра этот “кто-то” выпустит обновление своего браузера. Как же в таких непростых условиях проверить всё?

Какие есть стандарты для создания браузеров

Как выбрать браузеры под ваше приложение

Теперь о тестировании. Прежде чем начать непосредственно тестировать то или иное web-приложение, тестировщик должен ознакомиться с требованиями, которые выдвигает заказчик. Бывает так, что в требованиях изначально прописано: “Наш продукт должен работать в браузерах Chrome, начиная с версии 43, и IE, начиная с версии 9”. Или же сам заказчик не может определиться и, конечно же, ему хочется охватить всё и всех. Ну а вдруг, его самый важный потенциальный клиент использует браузер Uran? И что тогда? Он не увидит его приложение вовсе?

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

Хочу показать вам некоторые сервисы по просмотру статистики:

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

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

Однако, есть мнения, что отображение в этом эмуляторе не соответствует действительности. Как быть в этой ситуации? Есть решение! Проверить в самом браузере. Если какой-то момент “прям смущает-смущает”, открывайте реальный браузер и смотрите.

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

Конечно, этими двумя программами выбор эмуляторов не ограничивается:

Каждый тестировщик знает и любит какие-то свои программки.

делать скриншоты;
тестировать в разных браузерах и ОС;
записывать тесты и позже прогонять их на других нужных браузерах.

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

На что важно обращать внимание при кроссбраузерном тестировании

WEB-приложения по-другому называют клиент-серверные приложения. Здесь клиентом выступает браузер, а сервером — веб-сервер. Браузер принимает от пользователя запрос, отправляет его на сервер. WEB-сервер обрабатывает запрос и передает ответ обратно в виде HTML-страницы. Браузер отрисовывает полученный код в страницу, которую мы с Вами в итоге и видим. То есть, непосредственно от браузера будет зависеть то, какой мы увидим страницу.

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

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