Браузерҳо ва дастгоҳҳо
Дар бораи браузерҳо ва дастгоҳҳои аз замонавӣ то кӯҳна, ки аз ҷониби 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"
]
Мо Autoprefixer-ро барои коркарди дастгирии пешбинишудаи браузер тавассути префиксҳои CSS истифода мебарем, ки барои идоракунии ин версияҳои браузер Browserlist -ро истифода мебарад. Бо ҳуҷҷатҳои онҳо маслиҳат кунед, ки чӣ гуна ин асбобҳоро ба лоиҳаҳои худ ворид кунед.
Умуман, 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 | Опера | Сафари | |
|---|---|---|---|---|---|---|
| Мак | Дастгир карда шудааст | Дастгир карда шудааст | Не | Не | Дастгир карда шудааст | Дастгир карда шудааст |
| Windows | Дастгир карда шудааст | Дастгир карда шудааст | Дастгирӣ, IE10+ | Дастгир карда шудааст | Дастгир карда шудааст | Дастгир карда намешавад |
Барои Firefox, ба ғайр аз версияи охирини мӯътадили муқаррарӣ, мо инчунин версияи охирини Release Extended Support (ESR) -и Firefox-ро дастгирӣ мекунем.
Ба таври ғайрирасмӣ, Bootstrap бояд дар Chromium ва Chrome for Linux, Firefox for Linux ва Internet Explorer 9 ба таври кофӣ назар ва рафтор кунад, гарчанде ки онҳо расман дастгирӣ намешаванд.
Барои рӯйхати баъзе хатогиҳои браузер, ки Bootstrap бояд бо онҳо мубориза барад, ба девори хатоҳои браузери мо нигаред .
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 9.2, вақте ки модаль кушода аст, агар ламси ибтидоии имову ҳаракат дар ҳудуди матн <input>ё a бошад <textarea>, <body>мундариҷаи зери модаль ба ҷои худи модаль ҳаракат карда мешавад. Ба хатогии WebKit # 153856 нигаред .
Аз .dropdown-backdropсабаби мураккабии индексатсияи z ин элемент дар iOS дар нав истифода намешавад. Ҳамин тариқ, барои пӯшидани афтандаҳо дар наворҳо, шумо бояд бевосита унсури афтандаро пахш кунед (ё ягон унсури дигаре, ки ҳодисаи кликро дар iOS оғоз мекунад).
Масштабкунии саҳифа ногузир артефактҳоро дар баъзе ҷузъҳо ҳам дар Bootstrap ва ҳам дар боқимондаи веб пешкаш мекунад. Вобаста ба мушкилот, мо метавонем онро ҳал кунем (аввал ҷустуҷӯ кунед ва баъд агар лозим бошад, масъаларо кушоед). Бо вуҷуди ин, мо майл ба инҳо сарфи назар мекунем, зеро онҳо аксар вақт ба ҷуз ҳалли ҳакерӣ роҳи мустақим надоранд.
Гарчанде :hoverки дар аксари дастгоҳҳои ламсӣ ин имконнопазир аст, iOS ин рафторро тақлид мекунад, ки дар натиҷа услубҳои "часпак"-и ҳовер, ки пас аз пахш кардани як элемент боқӣ мемонанд. Ин сабкҳои овезон танҳо вақте хориҷ карда мешаванд, ки корб��рон унсури дигарро пахш кунанд. Ин рафтор асосан номатлуб ҳисобида мешавад ва дар дастгоҳҳои Android ё Windows мушкилот ба назар намерасад.
Дар тӯли версияҳои v4 alpha ва beta мо, мо рамзи нопурра ва шарҳу эзоҳро барои ворид шудан ба сими пурсишҳои медиавӣ дохил кардем, ки услубҳои ҳовериро дар браузерҳои дастгоҳи ламсӣ, ки тақлид карданро доранд, ғайрифаъол мекунад. Ин кор ҳеҷ гоҳ пурра анҷом дода нашудааст ё фаъол карда нашудааст, аммо барои пешгирӣ кардани шикастани пурра, мо тасмим гирифтем, ки ин шимро бекор кунем ва омехтаҳоро ҳамчун миёнабурҳо барои синфҳои псевдо-синфҳо нигоҳ дорем.
Ҳатто дар баъзе браузерҳои муосир, чоп метавонад аҷиб бошад.
Аз Safari v8.0, истифодаи синфи собит паҳнои .containerметавонад боиси истифодаи Safari андозаи ғайриоддӣ хурд ҳуруф ҳангоми чоп. Барои тафсилоти бештар ба шумораи №14868 ва хатогии WebKit #138192 нигаред. Як роҳи ҳалли эҳтимолии CSS зерин аст:
@media print {
.container {
width: auto;
}
}Дар берун аз қуттӣ, 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-и мо низ ба далели ворид кардани роҳи ҳалли хатои муайяни Firefox огоҳиҳои ночиз ва ночиз дар бораи тасдиқи HTML доранд .