Браузеры и устройства

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

Поддерживаемые браузеры

Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ. В Windows поддерживается IE10-11 / Microsoft Edge.

Альтернативные браузеры, поддерживающие последнюю версию Webkit, Blink или Gecko, поддерживаются не полностью. Однако и в них BS4 должен отображаться и работать корректно. Более точная информация – ниже.

Вы можете найти поддерживаемые браузеры с указанием версий в .browserslistrc file:

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

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

Мобильные устройства

В общем, BS4 поддерживает последние версии браузеров по умолчанию для каждой платформы. Заметьте, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) не поддерживаются.

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Поддер-живается Поддер-живается Нет Android v5.0+ Поддер-живается Поддер-живается
iOS Поддер-живается Поддер-живается Поддер-живается Нет Поддер-живается
Windows 10 Mobile Нет Нет Нет Нет Поддер-живается

Браузеры PC

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

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Поддер-живается Поддер-живается Нет Нет Поддер-живается Поддер-живается
Windows Поддер-живается Поддер-живается Поддер-живается, IE10+ Поддер-живается Поддер-живается Не поддер-живается

Для Firefox, дополняя поддержку последнего стабильного релиза, BS4 также поддерживает последний релиз Firefox с «расширенной поддержкой» - Extended Support Release (ESR).

Предположительно BS4 должен работать нормально в Chromium и Chrome в Линуксе, Firefox для Линуска, и IE9, хотя эти браузеры и не поддерживаются официально.

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

Internet Explorer

IE 10+ поддерживаются, IE9 и ниже – нет. Знайте, что некоторые свойства CSS3 и элементы HTML5 поддерживаются не полностью в IE10, или требуют предустановленных свойств для нормальной работы. Посетите Can I use… для подробностей по поддержке браузерами свойств CSS3 и HTML5.

Если вам потребуется поддержка IE8-9, пользуйтесь BS3. Это наиболее стабильная версия и она все еще поддерживается нашей командой в наиболее критических случаях. Версия Bootstrap 3.4.0 вышла 13 декабря 2018 г.

Всплывающие окна и выпадающие меню на мобильниках

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

Поддержка свойства overflow:hidden; достаточно ограничена в iOS и Андроидах. По этой причине, когда вы прокручиваете ниже верха или низа всплывающего окна в этих устройствах, содержимое <body> начнет прокручиваться. Смотрите Chrome bug #175502 (решено в Chrome v40) и WebKit bug #153852.

Текстовые поля и прокрутка в iOS

Что касается iOS 9.2, - пока всплывающее окно открыто – если начальное касание жеста прокрутки происходит внутри границ <input> или <textarea>, прокручиваться вместо окна будет содержимое <body>. Смотри WebKit bug #153856.

Элемент .dropdown-backdrop не используется на iOS в навигационной панели из-за сложности z-индексирования. Таким образом, чтобы закрыть выпадающий элемент, необходимо коснуться его (или другой элемент, который вызовет событие «клик» в iOS).

«Зум» в браузере

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

«Липкий» :hover/:focus на мобильных

Хотя реальный «hover» невозможен на большинстве тачскринов, большинство мобильных браузеров симулируют его и делают :hover «липким». Другими словами: стили :hover начинают работать после постукивания на элементе и останавливаются лишь после того как юзер «стукнет» по другому элементу. На сайтах концепции «mobile-first» такое поведение обычно нежелательно.

Bootstrap имеет решение для описанного поведения, хотя оно и отключено по умолчанию. При установке значения переменной $enable-hover-media-query на true при компиляции Sass, BS4 будет использовать mq4-hover-shim для дезактивации стилей :hover в браузерах, имитирующих «hovering», таким образом предотвращая «липкое» поведение стилей :hover.

Печать

Даже в современных браузерах она может вызвать проблемы.

Что касается Safari v8.0 – использование класса с фиксированной шириной .container может заставить браузер использовать необычно мелкий шрифт при печати. Смотрите issue issue #14868 и WebKit bug #138192. Есть еще один обход этого бага (код внизу):

@media print {
  .container {
    width: auto;
  }
}

Встроенный браузер Андроида

По умолчанию Android 4.1 (и даже некоторые более его новые релизы ) поставляются с браузером-приложением по умолчанию (в противоположность Chrome). К несчастью, это приложение имеет множество «багов» и несовместимостей с CSS в целом.

Меню выбора

По элементам <select>: встроенный браузер андроида не отобразит их элементы управления (кнопки), если применен border-radius и\или border. (Смотрите вопрос на StackOverflow). Используйте кусок кода ниже для удаления мешающего CSS и отрисовки элемента <select> встроенным браузером андроида как «нестилизованного» элемента. В этом случае при определении браузера пользователя не происходит взаимодействия с браузерами Chrome, Safari и Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Хотите пример? JS Bin demo.

Валидаторы

Для обеспечения наилучшей работы на старых и глючных браузерах для применения определенных настроек CSS к определенным версиям браузеров и исправления «багов» в самих браузерах, BS4 иногда использует CSS browser hacks. Эти «хаки» по понятным причинам заставляют «ругаться» валидаторы CSS. Кое-где мы используем не до конца проверенные и стандартизированные, но нужные для прогресса, свойства CSS.

Эти «ругательства» валидатора не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а «хаки» не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.

Наши HTML–документы также вызывают некоторые тривиальные и несущественные предупреждения – потому что в них есть «костыли» для исправления определенного «бага» в Firefox.