Browsers u apparat
Tgħallem dwar il-browsers u l-apparati, minn moderni għal qodma, li huma appoġġjati minn Bootstrap, inklużi kwirkijiet u bugs magħrufa għal kull wieħed.
Brawżers appoġġjati
Bootstrap jappoġġja l- aħħar rilaxxi stabbli tal-brawżers u l-pjattaformi ewlenin kollha. Fuq il-Windows, aħna nappoġġjaw l-Internet Explorer 10-11 / Microsoft Edge .
Brawżers alternattivi li jużaw l-aħħar verżjoni ta' WebKit, Blink, jew Gecko, kemm jekk direttament jew permezz tal-API tal-vista tal-web tal-pjattaforma, mhumiex appoġġjati b'mod espliċitu. Madankollu, Bootstrap għandu (f'ħafna każijiet) juri u jaħdem b'mod korrett f'dawn il-browsers ukoll. Aktar informazzjoni speċifika dwar l-appoġġ hija pprovduta hawn taħt.
Tista' ssib il-firxa appoġġjata tagħna ta' browsers u l-verżjonijiet tagħhom fil-.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
Aħna nużaw Autoprefixer biex nittrattaw l-appoġġ maħsub għall-brawżer permezz tal-prefissi CSS, li juża Browserslist biex jimmaniġġja dawn il-verżjonijiet tal-browser. Ikkonsulta d-dokumentazzjoni tagħhom dwar kif tintegra dawn l-għodod fil-proġetti tiegħek.
Apparat mobbli
B'mod ġenerali, Bootstrap jappoġġja l-aħħar verżjonijiet tal-browsers default ta' kull pjattaforma ewlenija. Innota li browsers prokura (bħal Opera Mini, il-mod Turbo ta 'Opera Mobile, UC Browser Mini, Amazon Silk) mhumiex appoġġjati.
| Chrome | Firefox | Safari | Browser Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Appoġġjati | Appoġġjati | N/A | Android v5.0+ appoġġjat | Appoġġjati |
| iOS | Appoġġjati | Appoġġjati | Appoġġjati | N/A | Appoġġjati |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Appoġġjati |
Browsers tad-desktop
Bl-istess mod, l-aħħar verżjonijiet tal-biċċa l-kbira tal-browsers tad-desktop huma appoġġjati.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Appoġġjati | Appoġġjati | N/A | Appoġġjati | Appoġġjati | Appoġġjati |
| Windows | Appoġġjati | Appoġġjati | Appoġġjati, IE10+ | Appoġġjati | Appoġġjati | Mhux appoġġjat |
Għal Firefox, minbarra l-aħħar rilaxx normali stabbli, aħna nappoġġjaw ukoll l-aħħar verżjoni Extended Support Release (ESR) ta’ Firefox.
B'mod mhux uffiċjali, Bootstrap għandu jidher u jġib ruħu tajjeb biżżejjed f'Chromium u Chrome għal Linux, Firefox għal Linux, u Internet Explorer 9, għalkemm mhumiex appoġġjati uffiċjalment.
Għal lista ta’ xi wħud mill-bugs tal-browser li Bootstrap għandu jitħabat magħhom, ara l- Ħajt tal-bugs tal-browser tagħna .
Internet Explorer
Internet Explorer 10+ huwa appoġġjat; IE9 u 'l isfel mhuwiex. Jekk jogħġbok kun konxju li xi proprjetajiet CSS3 u elementi HTML5 mhumiex appoġġjati bis-sħiħ f'IE10, jew jeħtieġu proprjetajiet prefissati għal funzjonalità sħiħa. Żur Nista' nuża... għal dettalji dwar l-appoġġ tal-browser tal-karatteristiċi CSS3 u HTML5. Jekk teħtieġ appoġġ IE8-9, uża Bootstrap 3.
Modali u dropdowns fuq il-mowbajl
Overflow u scrolling
L-appoġġ għal overflow: hidden;fuq l- <body>element huwa pjuttost limitat fl-iOS u l-Android. Għal dak il-għan, meta tiskrollja mill-parti ta' fuq jew t'isfel ta' modal f'wieħed mill-browsers ta' dawk l-apparati, il- <body>kontenut jibda jiskrollja. Ara l-bug Chrome #175502 (fissat fi Chrome v40) u l- bug WebKit #153852 .
oqsma tat-test iOS u scrolling
Minn iOS 9.2, filwaqt li modal ikun miftuħ, jekk il-mess inizjali ta 'ġest ta' scroll ikun fil-konfini ta 'testwali <input>jew ta' <textarea>, il- <body>kontenut taħt il-modal se jiġi skrolljat minflok il-modal innifsu. Ara l- bug tal-WebKit #153856 .
Navbar Dropdowns
L- .dropdown-backdropelement ma jintużax fuq iOS fin-nav minħabba l-kumplessità ta 'z-indexing. Għalhekk, biex tagħlaq dropdowns fin-navbars, trid tikklikkja direttament l-element dropdown (jew kwalunkwe element ieħor li se jispara avveniment tal-ikklikkja fl-iOS ).
Żumjar tal-browser
Iż-żum tal-paġna inevitabbilment jippreżenta artifacts tar-rendi f'xi komponenti, kemm f'Bootstrap kif ukoll fil-bqija tal-web. Skont il-kwistjoni, nistgħu nkunu kapaċi nirranġawha (l-ewwel fittex u mbagħad tiftaħ kwistjoni jekk ikun hemm bżonn). Madankollu, għandna t-tendenza li ninjoraw dawn peress li ħafna drabi ma jkollhom l-ebda soluzzjoni diretta għajr soluzzjonijiet hacky.
Sticky :hover/ :focusfuq iOS
Filwaqt li :hovermhuwiex possibbli fuq il-biċċa l-kbira tat-tagħmir tat-touch, l-iOS jimita din l-imġieba, u jirriżulta fi stili ta 'hover "jwaħħal" li jippersistu wara li ttektek element wieħed. Dawn l-istili ta 'hover jitneħħew biss meta l-utenti jisfruttaw element ieħor. Din l-imġieba hija kkunsidrata fil-biċċa l-kbira mhux mixtieqa u tidher li mhix kwistjoni fuq apparati Android jew Windows.
Matul ir-rilaxxi v4 alpha u beta tagħna, aħna inkludejna kodiċi mhux komplut u kkummentat għall-għażla ta 'shim ta' query tal-midja li jiskonnettja stili ta 'hover fil-browsers tat-tagħmir tal-mess li jimitaw id-depożitu. Dan ix-xogħol qatt ma tlesta għal kollox jew ppermettiet, iżda biex jiġi evitat il-ksur sħiħ, għażilna li niddeprekaw dan is-shim u nżommu l-mixins bħala shortcuts għall-psewdo-klassijiet.
Stampar
Anke f'xi browsers moderni, l-istampar jista 'jkun quirky.
Minn Safari v8.0, l-użu tal- .containerklassi ta 'wisa' fissa jista 'jikkawża li Safari juża daqs tat-tipa żgħir mhux tas-soltu meta jistampa. Ara l- ħarġa #14868 u l- bug WebKit #138192 għal aktar dettalji. Soluzzjoni potenzjali waħda hija s-CSS li ġej:
@media print {
.container {
width: auto;
}
}
Brawżer tal-istokk tal-Android
Mill-kaxxa, Android 4.1 (u anki xi ħarġiet aktar ġodda apparentement) jintbagħtu bl-app tal-Browser bħala l-web browser default tal-għażla (kuntrarju għal Chrome). Sfortunatament, l-app tal-Browser għandha ħafna bugs u inkonsistenzi mas-CSS b'mod ġenerali.
Agħżel menu
Fuq <select>elementi, il-brawżer tal-istokk Android mhux se juri l-kontrolli tal-ġenb jekk ikun hemm border-radiusu/jew borderapplikat. (Ara din il-mistoqsija StackOverflow għad-dettalji.) Uża s-snippet tal-kodiċi hawn taħt biex tneħħi s-CSS li toffendi u tirrendi l- <select>bħala element unstyled fuq il-brawżer tal-istokk tal-Android. L-aġent tal-utent li jxomm jevita interferenza mal-browsers Chrome, Safari, u 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>
Trid tara eżempju? Iċċekkja din id-demo ta' JS Bin .
Validaturi
Sabiex tipprovdi l-aħjar esperjenza possibbli għal browsers qodma u buggy, Bootstrap juża hacks tal-brawżer CSS f'diversi postijiet biex jimmira CSS speċjali għal ċerti verżjonijiet tal-brawżer sabiex jaħdem madwar bugs fil-browsers infushom. Dawn il-hacks jistgħu jifhmu li l-validaturi tas-CSS jilmentaw li huma invalidi. F'xi postijiet, nużaw ukoll karatteristiċi CSS ta' tmiem il-ħin li għadhom mhumiex standardizzati għal kollox, iżda dawn jintużaw purament għal titjib progressiv.
Dawn it-twissijiet ta 'validazzjoni ma jimpurtax fil-prattika peress li l-porzjon mhux hacky tas-CSS tagħna jivvalida bis-sħiħ u l-porzjonijiet hacky ma jinterferixxux mal-funzjonament tajjeb tal-porzjon mhux hacky, għalhekk aħna deliberatament ninjoraw dawn it-twissijiet partikolari.
Id-dokumenti HTML tagħna bl-istess mod għandhom xi twissijiet ta' validazzjoni HTML trivjali u inkonsegwenzjali minħabba l-inklużjoni tagħna ta' soluzzjoni għal ċertu bug ta' Firefox .