Source

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.

Browser eziwagirwa

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

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.

Ebyuma ebikozesebwa ku ssimu

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

Ebikozesebwa ku mmeeza

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

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.

Modals ne dropdowns ku ssimu

Okujjula n’okuyiringisibwa

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 .

Ennimiro z’ebiwandiiko bya iOS n’okutambula

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 kwa Browser

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.

Sticky :hover/ :focusku iOS

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.

Okukuba ebitabo

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;
  }
}

Obubaka bwa sitokisi ya Android

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.

Londa menu

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 .

Abakakasa

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 .