Iziphequluli namadivayisi
Funda mayelana neziphequluli namadivayisi, kusukela kwesimanje kuya kwakudala, asekelwa yi-Bootstrap, okuhlanganisa izingqinamba neziphazamisi ezaziwayo ngayinye.
I-Bootstrap isekela ukukhishwa kwakamuva, okuzinzile kwazo zonke iziphequluli ezinkulu nezinkundla. Ku-Windows, sisekela i-Internet Explorer 10-11 / Microsoft Edge .
Ezinye iziphequluli ezisebenzisa inguqulo yakamuva ye-WebKit, i-Blink, noma i-Gecko, kungaba ngokuqondile noma nge-API yokubuka iwebhu yesikhulumi, azisekelwa ngokusobala. Nokho, i-Bootstrap kufanele (ezikhathini eziningi) ibonise futhi isebenze kahle nakulezi ziphequluli. Ulwazi oluthe xaxa losekelo lunikezwe ngezansi.
Ungathola uhla lwethu olusekelwayo lweziphequluli nezinguqulo zazo kwethipackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Sisebenzisa i -Autoprefixer ukuze siphathe ukwesekwa kwesiphequluli esihlosiwe ngokusebenzisa iziqalo ze-CSS, ezisebenzisa uhlu Lwesiphequluli ukuphatha lezi zinguqulo zesiphequluli. Bheka imibhalo yabo mayelana nendlela yokuhlanganisa lawa mathuluzi kumaphrojekthi akho.
Ngokuvamile, i-Bootstrap isekela izinguqulo zakamuva zeziphequluli ezizenzakalelayo zengxenyekazi ngayinye enkulu. Qaphela ukuthi iziphequluli zommeleli (ezifana ne-Opera Mini, imodi ye-Opera Mobile Turbo, i-UC Browser Mini, i-Amazon Silk) azisekelwe.
| I-Chrome | IFirefox | Safari | Isiphequluli se-Android ne-WebView | I-Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Isekelwe | Isekelwe | N/A | I-Android v5.0+ iyasekelwa | Isekelwe |
| iOS | Isekelwe | Isekelwe | Isekelwe | N/A | Isekelwe |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Isekelwe |
Ngokufanayo, izinguqulo zakamuva zeziphequluli eziningi zedeskithophu ziyasekelwa.
| I-Chrome | IFirefox | I-Internet Explorer | I-Microsoft Edge | I-Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Isekelwe | Isekelwe | N/A | N/A | Isekelwe | Isekelwe |
| IWindows | Isekelwe | Isekelwe | Isekelwe, IE10+ | Isekelwe | Isekelwe | Ayisekelwe |
KuFirefox, ngaphezu kokukhishwa kwakamuva okuzinzile okujwayelekile, siphinde sisekele inguqulo yakamuva yokukhululwa kokusekelwa okunwetshiwe (ESR) yeFirefox.
Ngokungafanele, i-Bootstrap kufanele ibukeke futhi iziphathe kahle ngokwanele ku-Chromium ne-Chrome ye-Linux, i-Firefox ye-Linux, ne-Internet Explorer 9, nakuba zingasekelwe ngokusemthethweni.
Ukuze uthole uhlu lwezinye iziphazamisi zesiphequluli i-Bootstrap okufanele ibhekane nazo, bheka i-Wall yethu yeziphazamisi zesiphequluli .
I-Internet Explorer 10+ iyasekelwa; IE9 naphansi ayikho. Sicela uqaphele ukuthi ezinye izici ze-CSS3 nezinto ze-HTML5 azisekelwa ngokugcwele ku-IE10, noma zidinga izakhiwo ezinesiqalo ukuze zisebenze ngokugcwele. Vakashela Can I use... ukuze uthole imininingwane yosekelo lwesiphequluli lwe-CSS3 kanye nezici ze-HTML5.
Uma udinga usekelo lwe-IE8-9, sebenzisa i-Bootstrap 3. Iyinguqulo ezinzile kakhulu yekhodi yethu futhi isasekelwa ithimba lethu ekulungiseni iziphazamisi ezibalulekile nezinguquko zemibhalo. Nokho, azikho izici ezintsha ezizongezwa kuyo.
Ukusekelwa kwesici kukhawulelwe ku-iOS naku-Android overflow: hidden;. <body>Ukuze wenze lokho, uma uskrola udlule phezulu noma phansi kwe-modal kunoma yisiphi salezo ziphequluli zalawo madivayisi, <body>okuqukethwe kuzoqala ukuskrola. Bona iphutha le- Chrome #175502 (elilungiswe ku-Chrome v40) kanye nesiphazamisi se- WebKit #153852 .
Kusukela ku-iOS 9.2, ngenkathi i-modal ivuliwe, uma ukuthinta kokuqala kokuthinta kokuskrola kungaphakathi komngcele wombhalo <input>noma we- <textarea>, <body>okuqukethwe okungaphansi kwe-modal kuzoskrolwa esikhundleni se-modal ngokwayo. Bona iphutha le-WebKit #153856 .
Isici .dropdown-backdropasisetshenziswa ku-iOS ku-nav ngenxa yobunkimbinkimbi be-z-indexing. Ngakho, ukuze uvale okwehliswayo kuma-navbar, kufanele uchofoze ngokuqondile into yokudonsela phansi (noma iyiphi enye into ezoqhumisa umcimbi wokuchofoza ku-iOS ).
Ukusondeza ikhasi kuveza ngokungagwemeki ukunikezwa kwama-artifact kwezinye izingxenye, ku-Bootstrap nakuyo yonke iwebhu. Kuye ngenkinga, singase sikwazi ukuyilungisa (sesha kuqala bese sivula inkinga uma kudingeka). Kodwa-ke, sivame ukukuziba lezi njengoba ngokuvamile zingenaso isixazululo esiqondile ngaphandle kwama-hacky workaround.
Nakuba :hoverkungenakwenzeka kumadivaysi amaningi okuthinta, i-iOS ilingisa lokhu kuziphatha, okuholela ezitayela "okunamathelayo" eziqhubekayo ngemva kokuthepha into eyodwa. Lezi zitayela zokuhambisa phezulu zisuswa kuphela uma abasebenzisi bathepha enye into. Lokhu kuziphatha kuthathwa njengokungafuneki kakhulu futhi kubonakala kungeyona inkinga kumadivayisi e-Android noma e-Windows.
Kukho konke ukukhishwa kwethu kwe-v4 ye-alpha ne-beta, sifake ikhodi engaphelele futhi sabeka amazwana yokungena embuzweni wemidiya ongakhubaza izitayela ezihamba phambili kuziphequluli zedivayisi yokuthinta ezilingisa ukuhambahamba. Lo msebenzi awuzange uqedwe ngokugcwele noma unikwe amandla ngokugcwele, kodwa ukuze sigweme ukuphuka ngokuphelele, sikhethe ukuhoxisa le shim futhi sigcine imiksi njengezinqamuleli zamakilasi-mbumbulu.
Ngisho nakwezinye iziphequluli zesimanje, ukuphrinta kungaba quirky.
Kusukela ku-Safari v8.0, ukusetshenziswa kwesigaba sobubanzi obugxilile .containerkungabangela i-Safari ukuthi isebenzise usayizi wefonti omncane ngokungavamile lapho iphrinta. Bona ukukhishwa okungu-#14868 kanye ne- WebKit bug #138192 ukuze uthole imininingwane eyengeziwe. Isixazululo esisodwa esingaba khona yile CSS elandelayo:
@media print {
.container {
width: auto;
}
}Ngaphandle kwebhokisi, i-Android 4.1 (kanye nokunye okusha okukhishiwe ngokusobala) kuhamba ngomkhumbi ngohlelo lokusebenza Lwesiphequluli njengesiphequluli sewebhu esizenzakalelayo esikhethwayo (ngokungafani ne-Chrome). Ngeshwa, uhlelo lokusebenza Lwesiphequluli luneziphazamisi eziningi nokungahambisani ne-CSS ngokuvamile.
Ezicini <select>, isiphequluli sesitoko se-Android ngeke sibonise izilawuli eziseceleni uma kukhona border-radiuskanye/noma borderkusetshenziswe. (Bona lo mbuzo we-StackOverflow ukuze uthole imininingwane.) Sebenzisa amazwibela ekhodi ngezansi ukuze ususe i-CSS ehlukumezayo futhi unikeze <select>njengento engabhalwanga isitayela kusiphequluli sesitoko se-Android. Umsebenzisi ohogelayo ugwema ukuphazamiseka kweziphequluli ze-Chrome, Safari, ne-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>Ufuna ukubona isibonelo? Bheka le demo ye-JS Bin.
Ukuze unikeze umuzwa ongcono kakhulu ongakhona kuziphequluli ezindala nezinesiphazamiso, i-Bootstrap isebenzisa ama- hack esiphequluli se-CSS ezindaweni ezimbalwa ukuze iqondise i-CSS ekhethekile kuzinguqulo ezithile zesiphequluli ukuze isebenze eduze kweziphazamisi kuziphequluli ngokwazo. Lawa ma-hacks ngokuqondakalayo abangela abaqinisekisi be-CSS ukuthi bakhononde ngokuthi awavumelekile. Ezindaweni ezimbalwa, sisebenzisa izici ze-CSS ezophayo ezingakamiswa ngokugcwele, kodwa lezi zisetshenziselwa ukuthuthukisa okuqhubekayo.
Lezi zexwayiso zokuqinisekisa azinandaba ekusebenzeni njengoba ingxenye engeyona eyokugebenga ye-CSS yethu iqinisekisa ngokugcwele futhi izingxenye ezikhohlisayo aziphazamisi ukusebenza kahle kwengxenye engeyona eyokugebenga, yingakho siziba ngamabomu lezi zexwayiso.
Amadokhumenti ethu e-HTML ngokufanayo anezexwayiso zokuqinisekisa ze-HTML ezingasho lutho nezingabalulekile ngenxa yokufakwa kwethu kwe-workaround yesiphazamisi esithile seFirefox .