Browser n’ebyuma ebikozesebwa
Manya ku browser n’ebyuma, okuva ku mulembe okutuuka ku bikadde, ebiwagirwa Bootstrap, omuli quirks n’obuzibu ebimanyiddwa ku buli kimu.
Bootstrap ewagira ebifulumizibwa ebisembyeyo, ebitebenkedde ebya browser ne platforms zonna enkulu. Ku Windows, tuwagira Internet Explorer 10-11 / Microsoft Edge .
Browser endala ezikozesa enkyusa ya WebKit, Blink, oba Gecko eyasembyeyo, oba butereevu oba nga ziyita mu API y’okulaba omukutu ku mukutu, teziwagirwa mu bulambulukufu. Naye, Bootstrap erina (mu mbeera ezisinga) okulaga era okukola obulungi mu browser zino nazo. Ebisingawo ebikwata ku buyambi biweereddwa wansi.
Osobola okusanga browser zaffe eziwagirwa n'enkyusa zazo mu yaffepackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Tukozesa Autoprefixer okukwata obuwagizi bwa browser obugendereddwa nga tuyita mu CSS prefixes, ekozesa Browserslist okuddukanya enkyusa za browser zino. Weebuuze ku biwandiiko byabwe ku ngeri y’okugatta ebikozesebwa bino mu pulojekiti zo.
Okutwaliza awamu, Bootstrap ewagira enkyusa ezisembyeyo eza buli mukutu omukulu ogwa browser ezisookerwako. Weetegereze nti proxy browsers (nga Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) teziwagirwa.
| Chrome | Firefox yaayo | Safari | Android Browser & Okulaba ku mukutu gwa yintaneeti | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ewagirwa | Ewagirwa | N/A | Android v5.0+ ewagirwa | Ewagirwa |
| iOS | Ewagirwa | Ewagirwa | Ewagirwa | N/A | Ewagirwa |
| Windows 10 Essimu ey’omu ngalo | N/A | N/A | N/A | N/A | Ewagirwa |
Mu ngeri y’emu, enkyusa ezisembyeyo eza desktop browser ezisinga ziwagirwa.
| Chrome | Firefox yaayo | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Ewagirwa | Ewagirwa | N/A | N/A | Ewagirwa | Ewagirwa |
| Amadirisa | Ewagirwa | Ewagirwa | Ewagirwa, IE10+ | Ewagirwa | Ewagirwa | Tewagirwa |
Ku Firefox, ng’oggyeeko okufulumizibwa okwa bulijjo okutebenkedde okusembyeyo, era tuwagira enkyusa ya Firefox eya Extended Support Release (ESR) eyasembyeyo.
Mu ngeri etali ntongole, Bootstrap erina okulabika n’okweyisa obulungi ekimala mu Chromium ne Chrome ku Linux, Firefox ku Linux, ne Internet Explorer 9, wadde nga teziwagirwa mu butongole.
Olukalala lw’ebimu ku buzibu bwa bbulawuzi Bootstrap bw’erina okulwana nabyo, laba Bbugwe waffe ow’obuzibu bwa bbulawuzi .
Internet Explorer 10+ ewagirwa; IE9 ne wansi si bwe kiri. Nsaba omanye nti ebimu ku bikozesebwa bya CSS3 n'ebintu bya HTML5 tebiwagirwa mu bujjuvu mu IE10, oba byetaaga ebikozesebwa ebisookerwako okusobola okukola mu bujjuvu. Kyalira Nsobola okukozesa... okumanya ebisingawo ku buwagizi bwa browser obw'ebintu bya CSS3 ne HTML5.
Bw’oba weetaaga obuwagizi bwa IE8-9, kozesa Bootstrap 3. Ye nkyusa esinga okubeera ennywevu eya koodi yaffe era ekyawagirwa ttiimu yaffe olw’okutereeza obuzibu obukulu n’enkyukakyuka mu biwandiiko. Wabula tewali bipya bigenda kwongerwako.
Obuwagizi bwa overflow: hidden;ku <body>elementi bukoma nnyo mu iOS ne Android. Ku nsonga eyo, bw’oyita waggulu oba wansi ku modal mu bumu ku bbulawuzi z’ebyuma ebyo, <body>ebirimu bijja kutandika okutambula. Laba ekizibu kya Chrome #175502 (ekitereezeddwa mu Chrome v40) n'ekizibu kya WebKit #153852 .
Okuva ku iOS 9.2, nga modal eggule, singa okukwata okusooka okw’akabonero k’omuzingo kuba mu nsalo y’ekiwandiiko <input>oba a <textarea>, <body>ebirimu wansi wa modal bijja kuyiringisibwa mu kifo kya modal yennyini. Laba ekizibu kya WebKit #153856 .
Element .dropdown-backdroptekozesebwa ku iOS mu nav olw'obuzibu bwa z-indexing. Bwe kityo, okuggalawo ebigwa mu navbars, olina okunyiga butereevu ekintu ekigwa wansi (oba ekintu ekirala kyonna ekijja okukuba ekintu ekinyiga mu iOS ).
Okuzimba omuko tekyewalika kwanjula ebikozesebwa mu kulaga mu bitundu ebimu, byombi mu Bootstrap n’omukutu gwonna. Okusinziira ku nsonga, tuyinza okusobola okugitereeza (sooka onoonye n’oluvannyuma oggulewo ensonga bwe kiba kyetaagisa). Naye, tutera okubuusa amaaso bino kuba bitera obutaba na solution butereevu okuggyako hacky workarounds.
Wadde :hovernga tekisoboka ku byuma ebisinga okukwata, iOS ekoppa enneeyisa eno, ekivaamu “sticky” hover styles eziwangaala oluvannyuma lw’okukuba elementi emu. Emisono gino egya hover giggyibwawo nga abakozesa bakuba ku elementi endala yokka. Enneeyisa eno okusinga etwalibwa ng’etaagala era erabika nga si nsonga ku byuma bya Android oba Windows.
Mu v4 alpha ne beta releases zaffe zonna, twassaamu code ezitali ntuufu era ne commented out olw'okulonda mu media query shim eyandiremesezza hover styles mu touch device browsers ezikoppa hovering. Omulimu guno tegwaggwangako mu bujjuvu oba okusobozesa, naye okwewala okumenya ddala, tusazeewo okusuula shim eno ne tukuuma mixins nga shortcuts for the pseudo-classes.
Ne mu browser ezimu ez’omulembe, okukuba ebitabo kuyinza okuba okw’ekyewuunyo.
Okuva ku Safari v8.0, okukozesa ekibiina ky’obugazi obutakyukakyuka .containerkiyinza okuleetera Safari okukozesa sayizi y’empandiika entono mu ngeri etaali ya bulijjo ng’ekuba ebitabo. Laba ensonga #14868 ne WebKit bug #138192 okumanya ebisingawo. Ekimu ku biyinza okugonjoolwa ye CSS eno wammanga:
@media print {
.container {
width: auto;
}
}Okuva mu kibokisi, Android 4.1 (n’ebimu ku bipya ebifulumiziddwa kirabika) egenda ne Browser app nga web browser eya bulijjo gy’olonze (okuwukana ku Chrome). Ebyembi, app ya Browser erina obuzibu bungi n’obutakwatagana ne CSS okutwaliza awamu.
Ku <select>elements, Android stock browser tejja kulaga side controls singa wabaawo border-radiusera/oba borderessiddwako. (Laba ekibuuzo kino ekya StackOverflow okumanya ebisingawo.) Kozesa akatundu ka koodi wansi okuggyawo CSS enyiiza n’okulaga the <select>nga ekintu ekitaliiko sitayiro ku Android stock browser. Okuwunyiriza kwa agenti w’omukozesa kwewala okutaataaganya Chrome, Safari, ne Mozilla browsers.
<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>Oyagala kulaba kyakulabirako? Laba demo eno eya JS Bin.
Okusobola okuwa obumanyirivu obusinga obulungi eri browser enkadde n’erimu obuzibu, Bootstrap ekozesa CSS browser hacks mu bifo ebiwerako okutunuulira CSS ey’enjawulo ku browser versions ezimu okusobola okukola ku bugs mu browsers zennyini. Hacks zino kitegeerekeka kireetera abakakasa CSS okwemulugunya nti si ntuufu. Mu bifo bibiri, era tukozesa bleeding-edge CSS features ezitannaba kutuuka ku mutindo mu bujjuvu, naye bino bikozesebwa purely for progressive enhancement.
Okulabula kuno okw’okukakasa tekulina makulu mu nkola okuva ekitundu ekitali kya hacky ekya CSS yaffe bwe kikola okukakasa mu bujjuvu era ebitundu ebiriko hacky tebiyingirira nkola nnungi ey’ekitundu ekitali kya hacky, y’ensonga lwaki tubuusa amaaso mu bugenderevu okulabula kuno okw’enjawulo.
Ebiwandiiko byaffe ebya HTML nabyo birina okulabula okumu okutali kwa makulu era okutali kwa mugaso ku kukakasa HTML olw'okussaamu kwaffe eky'okugonjoola ekizibu ekimu ekya Firefox .