Содержание

Кроссбраузерность. Причины и приемы / Песочница / Хабр

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

Предисловие. Почему так получилось
После появления в 1994 году одного из первых удачных браузеров Netscape Navigator, созданных на основе первого браузера с графической оболочкой Mosaic, копания Microsoft решила сделать свой браузер и назвать его Internet Explorer. Первая и вторая версия IE поставлялись вместе с пакетом Microsoft Plus!, дополняющим возможности Windows, но широкого распространения не получили. Тогда Microsoft решили разработать радикально отличающийся от IE 1.0 и 2.0 браузер, для чего компания наняла программистов из Spyglass, которые разработали новый браузер на основе Mosaic. Так в 1996 году появился Internet Explorer 3.0. Однако разработчики ввели в браузер несовместимые со стандартами расширения HTML, которые впоследствии сохранялись от версии к версии. Последующее параллельное развитие IE и Netscape Navigator привели к захвату IE 95% рынка. Застой в развитии IE с 4.0 до 6.0 версии, с плохой поддержкой стандартов, низкой скоростью работы и отображения страниц, привел к возрождению Netscape в версии 6.0, который был написан на новом движке Gecko. Обновленный Netscape Navigator не смог добиться былых вершин и со временем компания Netscape объявила о прекращении поддержки своего браузера.
Однако движок Gecko послужил основой для создания в 2004 году современного браузера Mozilla Firefox. В 1996 году появилась Opera, которая добилась своих успехов скоростью и простотой использования. В 2003 году компания Apple выпустила свой браузер Safari на движке WebKit, отказавшись от IE, ранее использовавшийся в Mac OS. В 2008 году Google также решил вступиться в гонку браузеров, выпустив Google Chrome, основанный на том же движке что и Safari.
Таким образом, каждый из браузеров имеет свою историю, имеет свои версии, которые в свою очередь различаются поддержкой Javascript, HTML и CSS.

На сегодняшний день доля мирового рынка браузеров составляет: 45% для IE, 31% Firefox, 15% Chrome, 5% Safari и 2% Opera.
Отдельно хочется порадоваться о снижении доли на рынке самого «старого» и проблемного браузера IE6, который сейчас занимает всего 6%.

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

Есть два основных способа добиться одинакового отображения сайта в браузерах:

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

Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.

Можно задать стили, которые увидят все браузеры кроме IE:

Также есть возможность идентификации версии IE пользователя:
для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии

для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).

Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:

и используя их в дальнейшем в общем стиле для каждой версии:
.ie6 .elementstyle {
background: #123;
}

Плюсом данного метода является валидность его использования.

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

для IE6:
.elementstyle {
_background: #123;
}
или:
.elementstyle {
-background: #123;
}
или валидно:
* html .elementstyle {
background: #123;
}

для IE7:
*+html .style {
background: #123;
}
или валидно:
*:first-child+html . elementstyle {
background: #123;
}

для IE8:
. elementstyle {
background: #F12\3/;

}

для Firefox:
@-moz-document url-prefix() {
.elementstyle {
background: #123;
}
}

для Safari и Chrome(один движок, помните?):
@media screen and (-webkit-min-device-pixel-ratio:0) {
. elementstyle {
background: #123;
}
}
или
body:last-child:not(:root:root) .elementstyle {
background: #123;
}

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

background: #123;
}
}
body:last-child:not(:root:root) .elementstyle {
background: #fff;
}
Альтернативой этим двум хакам может служить интересный способ определения стилей для Opera с помощью встроенного объекта «opera» в JavaScript:

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

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

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

Что такое кроссбраузерность | Особенности кроссбраузерности

Кроссбраузерность

30 января, 2023 05:37 ппadmin

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

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

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

Корректным можно считать отображение в следующих случаях:

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

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

  • Internet Explorer.
  • Google Chrome.
  • Opera.
  • Мozilla FireFox.
  • Safari.
  • Netscape.

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

К сожалению, большинство пользователей зачастую используют устаревшие версии браузеров. С некоторыми из них это не критично, но с Internet Explorer, например, приходится “бороться” больше всего.

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

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

Особенности кроссбраузерности

Проблемы с кроссбраузерностью возникают в связи с различными алгоритмами обработки каскадных таблиц стилей (CSS) и исходного кода сайта (HTML) различными браузерами.

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

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

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

Также радует повсеместное принятие стандартов HTML5 и CSS3, что только способствует облегчению труда разработчиков.

Кроссбраузерность – один из важнейших аспектов веб-разработки, так как от неё зависит удобство аудитории. Не стоит ею пренебрегать.

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

Автор Jash Unadkat, участник сообщества, 15 февраля 2023 г. Что ж, ответ прост.

  • Каждый браузер имеет разные механизмы рендеринга. (Браузеры на основе Chromium, такие как Google Chrome и Mircosoft Edge, используют Blink, тогда как браузер Safari использует WebKit)
  • Каждый движок обрабатывает код, написанный для других веб-сайтов, по-своему.
  • Такие браузеры, как Chrome, Safari и Edge, часто по-разному интерпретируют или отображают исходный код веб-сайта (HTML и CSS).
  • Поскольку механизм каждого браузера интерпретирует и отображает веб-страницу по-своему, один и тот же веб-сайт может выглядеть, восприниматься и функционировать по-разному в разных браузерах.
  • ОС посетителя также играет ключевую роль в том, как веб-сайт выглядит по-разному в разных браузерах.

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

Что такое тестирование совместимости веб-сайтов?

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

Зачем нужен кроссбраузерный веб-сайт?

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

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

Вот где возникает основная проблема с точки зрения владельца бизнеса –

  • Могут ли пользователи (посещающие веб-сайт с тысяч комбинаций браузеров устройств) получить доступ к веб-сайту наилучшим образом?
  • Все ли функции веб-сайта доступны в популярных браузерах, таких как Chrome, Firefox, Safari, Edge и т. д.?

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

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

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

  • Кто является целевой аудиторией?
  • Какова текущая доля рынка браузеров среди целевой аудитории?

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

Например, принимая во внимание текущую долю рынка браузеров по всему миру, командам было бы более целесообразно тестировать свои веб-сайты в Chrome, Safari, Firefox и Edge в приоритетном порядке.

  • Это связано с тем, что доля рынка этих трех браузеров составляет 90% от общей доли рынка браузеров.
  • Это не означает, что следует вообще избегать тестирования в оставшихся браузерах, таких как Opera, браузер UC и т.  д.
  • Команды должны расставить приоритеты, какие из них тестировать в первую очередь и наиболее интенсивно. Если вы используете HTML для создания своего веб-сайта, вы должны научиться тестировать HTML в разных браузерах и внедрять их для улучшения совместимости веб-сайта.

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

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

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

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

Лучшей альтернативой является выбор облачных платформ, таких как BrowserStack, которые предоставляют командам реальное облако устройств для кросс-браузерного тестирования. BrowserStack предоставляет более 3000 реальных устройств и браузеров (Chrome, Firefox, Safari, Edge и т. д.) для тестирования.

  • QA получают мгновенный доступ к браузерам, установленным на реальных мобильных устройствах Android и iOS и настольных устройствах.
  • Они могут выполнять живое ручное тестирование своих веб-сайтов в браузерах, работающих на реальных мобильных и настольных устройствах.
  • Это позволяет командам тестировать веб-сайты в реальных пользовательских условиях.
  • Кроме того, команды могут использовать Cloud Selenium Grid для выполнения автоматических кросс-браузерных тестов на нужных комбинациях браузер-устройство.

Проверить совместимость веб-сайта с браузером бесплатно

Для тестирования необходимо выбрать желаемую платформу (iOS, Android, Windows, macOS) и версию браузера.

Ниже можно обратиться к облачной инфраструктуре BrowserStack для тестирования на ОС Windows и macOS для браузеров Chrome, Edge, Safari и даже Opera.

QA и SDET могут быстро получить доступ к последним бета-версиям Safari 16, Chrome 110 или Mozilla Firefox 110 и 111.

Также давайте посмотрим на пример сеанса Chrome, работающего на реальном устройстве Samsung Galaxy.

QA также могут тестировать такие функции, как IP-геолокация, масштабирование и вращение устройства, что обеспечивает интерактивное и интуитивно понятное тестирование. Он также обеспечивает интеграцию с популярными инструментами для создания отчетов об ошибках Jira, Slack, Trello и т. д. В цифровом мире надежные веб-сайты являются неотъемлемой частью создания капитала бренда. Сказав это, команды могут сделать вывод, насколько важно проверять совместимость веб-сайтов между браузерами и иметь достаточно навыков и ресурсов для выполнения таких тестов.

Проверка совместимости веб-сайта с браузером

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

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

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

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

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

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

1. Отсутствие тестирования на реальных устройствах

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

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

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

Попробуйте протестировать на реальных устройствах

2. Проверка HTML/CSS

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

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

Решить эту проблему довольно просто благодаря инструментам проверки кода для HTML и CSS. Рассмотрите возможность использования валидатора HTML W3C и валидатора Jigsaw CSS.

3. Функции производителя

Разработчики должны помнить, что при создании функций/функций они должны использовать определенный код в CSS, в зависимости от того, для какого браузера они разрабатывают.

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

Следует помнить о некоторых распространенных префиксах:

  • Safari и Chrome (-webkit)
  • Internet Explorer (-ms)
  • Mozilla Firefox (-moz)
  • Opera (-o)
из-за отсутствия базовой строки в коде. Браузеры с устаревшими версиями, такие как Internet Explorer 8.0, часто проверяют тип документа. Если это отсутствует, сайт отображается неправильно.

Doctype проверяется, поскольку браузер работает в двух режимах — Strict Mode и Quirks Mode

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

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

Это достаточно просто решить. Просто включите одну строку в начале кодовой базы.

 !DOCTYPE html

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

5. Обнаружение устаревшего браузера

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

Эта распространенная проблема кроссбраузерной совместимости возникает из-за устаревшего Javascript.

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

6. Отсутствующие сбросы CSS

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

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

Обычно используемые таблицы стилей сброса включают Eric Meyers CSS Reset, HTML5Reset и Normalize.css на основе Github .

7. Совместимость макетов

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

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

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

8. Функции, специфичные для браузера

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

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

Решение . Убедитесь, что макет, дизайн и интерактивность веб-сайта остаются одинаковыми в различных браузерах, таких как Chrome, Firefox, Safari, Internet Explorer и Edge. Также может потребоваться тестирование как в настольных, так и в мобильных версиях браузеров.

9. Проблемы с форматами мультимедиа и кодеками

Некоторые браузеры могут поддерживать такие популярные форматы, как MP4, WebM или Ogg для видео, в то время как другие могут иметь ограничения или требовать дополнительных подключаемых модулей. Разные браузеры и устройства могут поддерживать разные кодеки, и проблемы с совместимостью могут возникнуть, если определенный кодек не поддерживается.

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

No related posts.