Source

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-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"
]

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 N/A 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. Hija l-aktar verżjoni stabbli tal-kodiċi tagħna u għadha appoġġjata mit-tim tagħna għal bugfixes kritiċi u bidliet fid-dokumentazzjoni. Madankollu, l-ebda karatteristiċi ġodda se jiġu miżjuda magħha.

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 .

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 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 .