Браўзэры і прылады
Даведайцеся пра браўзеры і прылады, ад сучасных да старых, якія падтрымліваюцца Bootstrap, у тым ліку пра вядомыя асаблівасці і памылкі для кожнага з іх.
Падтрымліваюцца браўзеры
Bootstrap падтрымлівае апошнія стабільныя выпускі ўсіх асноўных браўзераў і платформаў. У Windows мы падтрымліваем Internet Explorer 10-11 / Microsoft Edge .
Альтэрнатыўныя браўзеры, якія выкарыстоўваюць апошнюю версію WebKit, Blink або Gecko, непасрэдна або праз API вэб-прагляду платформы, відавочна не падтрымліваюцца. Тым не менш, Bootstrap павінен (у большасці выпадкаў) правільна адлюстроўвацца і працаваць і ў гэтых браўзерах. Больш канкрэтная інфармацыя аб падтрымцы прыведзена ніжэй.
Вы можаце знайсці шэраг падтрымоўваных браўзераў і іх версіі ў нашым.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, які выкарыстоўвае спіс браўзераў для кіравання гэтымі версіямі браўзераў. Звярніцеся да іх дакументацыі, каб даведацца, як інтэграваць гэтыя інструменты ў вашы праекты.
Мабільныя прылады
Наогул кажучы, Bootstrap падтрымлівае апошнія версіі браўзераў па змаўчанні для кожнай асноўнай платформы. Звярніце ўвагу, што проксі-браўзеры (напрыклад, Opera Mini, рэжым Turbo Opera Mobile, UC Browser Mini, Amazon Silk) не падтрымліваюцца.
| Chrome | Firefox | Сафары | Браўзэр Android і WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Падтрымліваецца | Падтрымліваецца | Н/Д | Падтрымліваецца Android v5.0+ | Падтрымліваецца |
| iOS | Падтрымліваецца | Падтрымліваецца | Падтрымліваецца | Н/Д | Падтрымліваецца |
| Windows 10 Mobile | Н/Д | Н/Д | Н/Д | Н/Д | Падтрымліваецца |
Браўзэры для працоўнага стала
Падобным чынам падтрымліваюцца апошнія версіі большасці настольных браўзераў.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Опера | Сафары | |
|---|---|---|---|---|---|---|
| Mac | Падтрымліваецца | Падтрымліваецца | Н/Д | Н/Д | Падтрымліваецца | Падтрымліваецца |
| вокны | Падтрымліваецца | Падтрымліваецца | Падтрымліваецца, IE10+ | Падтрымліваецца | Падтрымліваецца | Не падтрымліваецца |
Для Firefox у дадатак да апошняй нармальнай стабільнай версіі мы таксама падтрымліваем апошнюю версію Firefox з пашыранай падтрымкай (ESR) .
Неафіцыйна Bootstrap павінен выглядаць і паводзіць сябе дастаткова добра ў Chromium і Chrome для Linux, Firefox для Linux і Internet Explorer 9, хоць яны афіцыйна не падтрымліваюцца.
Спіс некаторых памылак браўзера, з якімі Bootstrap павінен змагацца, глядзіце ў нашай Сцяне памылак браўзера .
Internet Explorer
Падтрымліваецца Internet Explorer 10+; IE9 і ніжэй - не. Майце на ўвазе, што некаторыя ўласцівасці CSS3 і элементы HTML5 не цалкам падтрымліваюцца ў IE10 або патрабуюць прэфіксаваных уласцівасцей для поўнай функцыянальнасці. Наведайце Ці магу я выкарыстоўваць… для атрымання падрабязнай інфармацыі аб падтрымцы браўзерам функцый CSS3 і HTML5. Калі вам патрэбна падтрымка IE8-9, выкарыстоўвайце Bootstrap 3.
Мадальныя і выпадальныя меню на мабільным тэлефоне
Перапаўненне і пракрутка
Падтрымка overflow: hidden;элемента <body>даволі абмежаваная ў iOS і Android. З гэтай мэтай, калі вы пракручваеце міма верхняй або ніжняй часткі мадальнага ў любым з браўзераў гэтых прылад, <body>змесціва пачне пракручвацца. Глядзіце памылку Chrome №175502 (выпраўлена ў Chrome v40) і памылку WebKit №153852 .
Тэкставыя палі iOS і пракрутка
Пачынаючы з iOS 9.2, пакуль мадальны рэжым адкрыты, калі першы дотык жэсту пракруткі знаходзіцца ў межах тэксту <input>або <textarea>, <body>змесціва пад мадальным будзе пракручвацца замест самога мадальнага. Глядзіце памылку WebKit №153856 .
Выпадаючыя панэлі навігацыі
Элемент .dropdown-backdropне выкарыстоўваецца ў iOS у навігацыі з-за складанасці z-індэксацыі. Такім чынам, каб закрыць выпадаючыя спісы ў панэлі навігацыі, вы павінны непасрэдна пстрыкнуць элемент выпадальнага меню (або любы іншы элемент, які выкліча пстрычку ў iOS ).
Маштабаванне браўзэра
Маштабаванне старонкі непазбежна стварае артэфакты рэндэрынгу ў некаторых кампанентах, як у Bootstrap, так і ў астатнім сеціве. У залежнасці ад праблемы мы можам яе выправіць (спачатку пашукайце, а потым адкрыйце праблему, калі спатрэбіцца). Аднак мы схільныя ігнараваць іх, бо яны часта не маюць прамога рашэння, акрамя хакерскіх абыходных шляхоў.
Sticky :hover/ :focusна iOS
Нягледзячы на тое :hover, што гэта немагчыма на большасці сэнсарных прылад, iOS эмулюе такія паводзіны, што прыводзіць да «ліпкіх» стыляў навядзення, якія захоўваюцца пасля націску на адзін элемент. Гэтыя ��тылі навядзення мышы выдаляюцца, толькі калі карыстальнікі націскаюць на іншы элемент. Такія паводзіны лічацца вельмі непажаданымі і, здаецца, не з'яўляюцца праблемай на прыладах Android або Windows.
На працягу нашых альфа- і бэта-версій v4 мы ўключалі няпоўны і закаментаваны код для выбару ўкладкі медыя-запытаў, якая адключала б стылі навядзення ў браўзерах сэнсарных прылад, якія эмулююць навядзенне. Гэтая праца ніколі не была цалкам завершана або ўключана, але каб пазбегнуць поўнай паломкі, мы вырашылі састарэць з гэтай пракладкі і захаваць міксіны ў якасці ярлыкоў для псеўдакласаў.
Друк
Нават у некаторых сучасных браўзерах друк можа быць мудрагелістым.
Пачынаючы з Safari v8.0, выкарыстанне класа фіксаванай шырыні .containerможа прымусіць Safari выкарыстоўваць незвычайна малы памер шрыфта пры друку. Глядзіце праблему № 14868 і памылку WebKit № 138192 для больш падрабязнай інфармацыі. Адным з магчымых абыходных шляхоў з'яўляецца наступны CSS:
@media print {
.container {
width: auto;
}
}Стандартны браўзэр Android
Android 4.1 (і, відаць, нават некаторыя новыя выпускі) адразу пастаўляецца з дадаткам Browser у якасці вэб-браўзера па змаўчанні (у адрозненне ад Chrome). На жаль, праграма Browser мае шмат памылак і неадпаведнасцяў з CSS у цэлым.
Выберыце меню
На <select>элементах стандартны браўзер Android не будзе адлюстроўваць бакавыя элементы кіравання, калі ёсць border-radiusі/або borderпрыменена. (Падрабязнасці глядзіце ў гэтым пытанні StackOverflow .) Скарыстайцеся фрагментам кода ніжэй, каб выдаліць парушальны CSS і адлюстраваць <select>элемент без стылю ў стандартным браўзеры Android. Сніфінг карыстальніцкага агента пазбягае ўмяшання ў браўзеры 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 .
Валідатары
Каб забяспечыць найлепшы вопыт для старых браўзераў і браўзераў з памылкамі, Bootstrap выкарыстоўвае ўзломы браўзераў CSS у некалькіх месцах, каб нацэліць спецыяльны CSS на пэўныя версіі браўзераў, каб абыйсці памылкі ў саміх браўзерах. Зразумела, гэтыя ўзломы прымушаюць валідатары CSS скардзіцца, што яны несапраўдныя. У некалькіх месцах мы таксама выкарыстоўваем перадавыя функцыі CSS, якія яшчэ не цалкам стандартызаваны, але яны выкарыстоўваюцца выключна для прагрэсіўнага паляпшэння.
Гэтыя папярэджанні аб праверцы не маюць значэння на практыцы, паколькі неўзламаная частка нашага CSS выконвае поўную праверку, а ўзламаныя часткі не перашкаджаюць належнаму функцыянаванню неўзламанай часткі, таму мы наўмысна ігнаруем гэтыя канкрэтныя папярэджанні.
Нашы HTML-дакументы таксама маюць некаторыя трывіяльныя і неістотныя папярэджанні аб праверцы HTML з-за таго, што мы ўключылі абыходны шлях для пэўнай памылкі Firefox .