Браузерлар һәм җайланмалар
Bootstrap ярдәмендә кулланыла торган браузерлар һәм җайланмалар турында белегез, алар арасында билгеле чирләр һәм хаталар да бар.
Bootstrap барлык төп браузерларның һәм платформаларның соңгы, тотрыклы чыгарылышларын хуплый. Windows'та без Internet Explorer 10-11 / Microsoft Edge ярдәм итәбез .
WebKit, Blink, яки Gecko'ның соңгы версиясен кулланган альтернатив браузерлар, турыдан-туры яки платформаның веб-күренеше API аша, ачыктан-ачык хупланмыйлар. Ләкин, Bootstrap (күпчелек очракта) бу браузерларда дөрес күрсәтергә һәм эшләргә тиеш. Төгәлрәк ярдәм турында мәгълүмат түбәндә китерелгән.
Сез безнең браузерларның диапазонын һәм аларның версияләрен таба аласызpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Без CSS префикслары ярдәмендә браузер ярдәмен эшкәртү өчен Autoprefixer кулланабыз, бу браузер версияләрен идарә итү өчен Браузерлар исемлеген куллана. Бу коралларны сезнең проектларга ничек интеграцияләү өчен аларның документлары белән киңәшләшегез.
Гомумән алганда, Bootstrap һәр төп платформаның демократик браузерларының соңгы версияләрен хуплый. Игътибар итегез, прокси браузерлары (мәсәлән, Opera Mini, Opera Mobile'ның Turbo режимы, UC браузеры мини, Amazon Silk) ярдәм итми.
| Chrome | Firefox | Сафари | Android браузеры һәм WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ярдәм | Ярдәм | М / Ю | Android v5.0 + ярдәм итә | Ярдәм |
| iOS | Ярдәм | Ярдәм | Ярдәм | М / Ю | Ярдәм |
| Windows 10 Мобиль | М / Ю | М / Ю | М / Ю | М / Ю | Ярдәм |
Шулай ук, күпчелек эш өстәл браузерларының соңгы версияләре ярдәм итә.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Опера | Сафари | |
|---|---|---|---|---|---|---|
| Mac | Ярдәм | Ярдәм | М / Ю | М / Ю | Ярдәм | Ярдәм |
| Windows | Ярдәм | Ярдәм | Ярдәм, IE10 + | Ярдәм | Ярдәм | Ярдәм итми |
Firefox өчен, соңгы гадәти тотрыклы чыгарылышка өстәп, без Firefox'ның соңгы киңәйтелгән ярдәм релизы (ESR) версиясен дә хуплыйбыз.
Рәсми булмаган рәвештә, Bootstrap Linux өчен Chromium һәм Chrome, Linux өчен Firefox һәм Internet Explorer 9да яхшы булырга тиеш, алар рәсми ярдәм итмәсәләр дә.
Bootstrap белән көрәшергә туры килгән кайбер браузер хаталары исемлеге өчен безнең браузер хаталары стенасын карагыз .
Internet Explorer 10+ ярдәм итә; IE9 һәм түбән түгел. Зинһар, шуны онытмагыз: кайбер CSS3 характеристикалары һәм HTML5 элементлары IE10да тулысынча булышмый, яки тулы функция өчен префиксланган үзлекләр таләп итә. Визитны куллана аламмы ... CSS3 һәм HTML5 функцияләренең браузер ярдәме турында тулырак мәгълүмат.
Сезгә IE8-9 ярдәме кирәк булса, Bootstrap 3 кулланыгыз. Бу безнең кодның иң тотрыклы версиясе һәм критик багфикслар һәм документлар үзгәртүләре өчен безнең команда ярдәм итә. Ләкин аңа яңа үзенчәлекләр өстәлмәячәк.
Элементка ярдәм iOS overflow: hidden;һәм <body>Androidда бик чикле. Моның өчен, ул җайланмаларның браузерларының берсендә модальнең өске яисә аскы өлешен узгач, <body>эчтәлек әйләнә башлый. Chrome хата # 175502 ( Chrome v40 белән көйләнгән) һәм WebKit хата # 153852 карагыз .
<input>IOS 9.2 мәгълүматларына караганда, модаль ачык булганда, әйләндерү ишарәсенең беренче кагылуы текст яки a чикләрендә булса <textarea>, <body>модаль астындагы эчтәлек модальнең урынына әйләнәчәк. WebKit хата # 153856 карагыз .
.dropdown-backdropZ-индексацияләү катлаулылыгы аркасында элемент iOS диңгезендә кулланылмый . Шулай итеп, диңгез такталарындагы тамчыларны ябу өчен, сез турыдан-туры тамчы элементына басыгыз (яки iOS'да чиртү вакыйгасын кабызачак бүтән элемент ).
Битне зурайту котылгысыз рәвештә кайбер компонентларда, Bootstrapта да, вебның калган өлешендә дә күрсәтелә. Проблемага карап, без аны төзәтә алабыз (башта эзләгез, кирәк булса проблеманы ачыгыз). Ләкин, без боларны санга сукмыйбыз, чөнки аларның еш кына турыдан-туры чишелеше юк.
Күпчелек сенсор җайланмаларында мөмкин булмаса :hoverда, iOS бу тәртипне охшата, нәтиҗәдә бер элементны таптаганнан соң дәвам итә торган "ябыштыргыч" стильләр барлыкка килә. Бу йөртү стильләре кулланучылар бүтән элементны тапкач кына бетерелә. Бу тәртип күпчелек теләмәгән булып санала һәм Android яки Windows җайланмаларында проблема түгел кебек.
V4 альфа һәм бета чыгарылышларыбызда без тулы булмаган һәм аңлатма соравы кодын керттек, шоуны охшатучы сенсор җайланмасы браузерларында йөртү стильләрен сүндерәчәк. Бу эш беркайчан да тулысынча тәмамланмаган яки эшләтелмәгән, ләкин тулысынча өзелүдән саклану өчен, без бу күлмәкне юкка чыгарырга һәм псевдо-класслар өчен кыска юллар итеп сакларга булдык.
Кайбер заманча браузерларда да бастыру кызык булырга мөмкин.
Safari v8.0 мәгълүматларына караганда, киң киңлектәге .containerкласс куллану Safari бастырганда гадәти булмаган кечкенә шрифт зурлыгын кулланырга мөмкин. Төгәлрәк мәгълүмат өчен 14 14868 чыгарылышын һәм WebKit хата # 138192 карагыз . Потенциаль эшнең берсе - түбәндәге CSS:
@media print {
.container {
width: auto;
}
}Рамкадан тыш, Android 4.1 (һәм хәтта кайбер яңа чыгарылышлар да) браузер кушымтасы белән сайлау веб-браузеры итеп җибәрелә (Chromeдан аермалы буларак). Кызганычка каршы, Браузер кушымтасында бик күп хаталар һәм гомумән CSS белән туры килмәүләр бар.
Элементларда , Android акция браузеры һәм / яки кулланылган <select>очракта, ян контролен күрсәтмәячәк . ( Детальләр өчен бу StackOverflow соравын карагыз.) Рәнҗетүче CSSны бетерү һәм Android акция браузерында стилизацияләнмәгән элемент итеп күрсәтү өчен түбәндәге кодның фрагментын кулланыгыз . Кулланучының агентын селкетү Chrome, Safari һәм Mozilla браузерларына комачаулый.border-radiusborder<select>
<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 документларыбыз шулай ук кайбер Firefox хата өчен эш программасын кертү аркасында кайбер вак-төяк һәм әһәмиятсез HTML тикшерү кисәтүләренә ия .