Browsers agus innealan
Ionnsaich mu na brobhsairean agus na h-innealan, bho nuadh gu seann, a tha a’ faighinn taic bho Bootstrap, a’ toirt a-steach cuibhrigean is mialan aithnichte airson gach fear.
Bidh Bootstrap a’ toirt taic do na fiosan seasmhach as ùire de gach prìomh bhrobhsair agus àrd-ùrlar. Air Windows, tha sinn a’ toirt taic do Internet Explorer 10-11 / Microsoft Edge .
Chan eil brobhsairean eile a chleachdas an dreach as ùire de WebKit, Blink, no Gecko, ge bith an ann gu dìreach no tro API sealladh lìn an àrd-ùrlar, a’ faighinn taic shònraichte. Ach, bu chòir dha Bootstrap (sa mhòr-chuid de chùisean) taisbeanadh agus obrachadh gu ceart anns na brobhsairean sin cuideachd. Tha fiosrachadh taic nas sònraichte air a thoirt seachad gu h-ìosal.
Gheibh thu ar raon de bhrobhsairean le taic agus na dreachan aca anns napackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Bidh sinn a’ cleachdadh Autoprefixer gus an taic brobhsair a tha san amharc a làimhseachadh tro ro-leasachain CSS, a bhios a’ cleachdadh Browserslist gus na dreachan brobhsair sin a riaghladh. Thoir sùil air na sgrìobhainnean aca airson mar as urrainn dhut na h-innealan sin fhilleadh a-steach do na pròiseactan agad.
San fharsaingeachd, tha Bootstrap a’ toirt taic do na dreachan as ùire de bhrobhsairean bunaiteach gach àrd-ùrlar. Thoir an aire nach eil taic ri brobhsairean progsaidh (leithid Opera Mini, modh Turbo Opera Mobile, UC Browser Mini, Amazon Silk).
| Chrome | Firefox | Safari | Brabhsair Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Le taic | Le taic | Chan eil | Taic airson Android v5.0+ | Le taic |
| iOS | Le taic | Le taic | Le taic | Chan eil | Le taic |
| Windows 10 mobile | Chan eil | Chan eil | Chan eil | Chan eil | Le taic |
San aon dòigh, tha na dreachan as ùire den mhòr-chuid de bhrobhsairean deasg a’ faighinn taic.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Le taic | Le taic | Chan eil | Chan eil | Le taic | Le taic |
| Windows | Le taic | Le taic | Le taic, IE10+ | Le taic | Le taic | Gun taic |
Airson Firefox, a bharrachd air an sgaoileadh stàbaill àbhaisteach as ùire, tha sinn cuideachd a’ toirt taic don dreach as ùire den Sgaoileadh Taic Leudaichte (ESR) de Firefox.
Gu neo-oifigeil, bu chòir do Bootstrap coimhead agus giùlan math gu leòr ann an Chromium agus Chrome airson Linux, Firefox airson Linux, agus Internet Explorer 9, ged nach eil iad a’ faighinn taic oifigeil.
Airson liosta de chuid de na mialan brobhsair a dh’ fheumas Bootstrap a dhol an sàs, faic ar Balla de bhiteagan brabhsair .
Tha Internet Explorer 10+ a’ faighinn taic; Chan eil IE9 agus sìos. Thoir an aire nach eil cuid de thogalaichean CSS3 agus eileamaidean HTML5 a’ faighinn làn thaic ann an IE10, no feumach air togalaichean ro-shuidhichte airson làn ghnìomhachd. Tadhail Am faod mi cleachdadh… airson mion-fhiosrachadh mu thaic bhrobhsair airson feartan CSS3 agus HTML5.
Ma tha feum agad air taic IE8-9, cleachd Bootstrap 3. Is e seo an tionndadh as seasmhaiche den chòd againn agus tha an sgioba againn fhathast a’ faighinn taic airson ceartachaidhean èiginneach agus atharrachaidhean sgrìobhainnean. Ach, cha tèid feartan ùra sam bith a chur ris.
Tha taic airson overflow: hidden;an <body>eileamaid gu math cuingealaichte ann an iOS agus Android. Chun na crìche sin, nuair a sgrolaicheas tu seachad air mullach no bonn modal ann an aon de na brobhsairean sin, <body>tòisichidh an susbaint a’ gluasad. Faic bug Chrome #175502 (stèidhichte ann an Chrome v40) agus bug WebKit #153852 .
Mar iOS 9.2, fhad ‘s a tha modal fosgailte, ma tha suathadh tùsail gluasad-bodhaig taobh a-staigh crìoch teacsa <input>no a <textarea>, thèid an <body>susbaint fon mhodal a sgrùdadh an àite a’ mhodal fhèin. Faic bug WebKit #153856 .
Chan eil an .dropdown-backdropeileamaid air a chleachdadh air iOS anns an nav air sgàth cho iom-fhillte 'sa tha clàr-amais z. Mar sin, gus dropdowns a dhùnadh ann an navbars, feumaidh tu briogadh gu dìreach air an eileamaid a tha a’ tuiteam sìos (no eileamaid sam bith eile a loisgeas tachartas cliog ann an iOS ).
Tha gluasad dhuilleagan gu do-sheachanta a’ toirt seachad stuthan tairgse ann an cuid de cho-phàirtean, an dà chuid ann am Bootstrap agus an còrr den lìon. A rèir na cùise, is dòcha gum bi e comasach dhuinn a chàradh (lorg an toiseach agus an uairsin fosgail cùis ma tha feum air). Ach, tha sinn buailteach a bhith a’ seachnadh iad sin oir gu tric chan eil fuasgladh dìreach aca ach a-mhàin dòighean obrach meallta.
Ged :hovernach eil sin comasach air a’ mhòr-chuid de dh’ innealan suathaidh, bidh iOS a’ dèanamh atharrais air a’ ghiùlan seo, a’ leantainn gu stoidhlichean hover “greamaich” a mhaireas às deidh aon eileamaid a bhrùthadh. Cha tèid na stoidhlichean hover seo a thoirt air falbh ach nuair a chuireas luchd-cleachdaidh suathadh air eileamaid eile. Thathas den bheachd gu bheil an giùlan seo gu ìre mhòr neo-mhiannach agus tha e coltach nach eil e na dhuilgheadas air innealan Android no Windows.
Tro na fiosan v4 alpha agus beta againn, thug sinn a-steach còd neo-choileanta agus thug sinn a-mach còd airson roghnachadh a-steach do shim ceist meadhanan a chuireadh stad air stoidhlichean hover ann am brobhsairean inneal suathaidh a bhios ag atharrais air hovering. Cha deach an obair seo a chrìochnachadh no a chomasachadh a-riamh, ach gus briseadh iomlan a sheachnadh, tha sinn air roghnachadh an shim seo a lughdachadh agus na mixins a chumail mar gheàrr-liostaichean airson na clasaichean meallta.
Eadhon ann an cuid de bhrobhsairean an latha an-diugh, faodaidh clò-bhualadh a bhith neo-àbhaisteach.
Mar Safari v8.0, faodaidh cleachdadh a’ .containerchlas le leud stèidhichte toirt air Safari meud cruth-clò neo-àbhaisteach beag a chleachdadh nuair a thathar a’ clò-bhualadh. Faic iris #14868 agus bug WebKit #138192 airson tuilleadh fiosrachaidh. Is e aon fhuasgladh a dh’ fhaodadh a bhith ann an CSS a leanas:
@media print {
.container {
width: auto;
}
}A-mach às a’ bhogsa, bidh Android 4.1 (agus eadhon fiosan nas ùire a rèir choltais) a’ dol leis an aplacaid Browser mar am brabhsair lìn àbhaisteach as fheàrr leotha (an taca ri Chrome). Gu mì-fhortanach, tha tòrr bhiteagan agus neo-chunbhalachd aig an aplacaid Browser le CSS san fharsaingeachd.
Air <select>eileamaidean, cha sheall brabhsair stoc Android na smachdan taobh ma tha border-radiusagus / no borderair a chuir an sàs. (Faic a’ cheist StackOverflow seo airson mion-fhiosrachadh.) Cleachd a’ chriomag de chòd gu h-ìosal gus an CSS oilbheumach a thoirt air falbh agus a thoirt seachad <select>mar eileamaid gun stoidhle air brobhsair stoc Android. Bidh sniffing an neach-cleachdaidh a’ seachnadh eadar-theachd le brobhsairean Chrome, Safari agus 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>A bheil thu airson eisimpleir fhaicinn? Thoir sùil air an demo JS Bin seo.
Gus an t-eòlas as fheàrr a thoirt do sheann bhrobhsairean agus buggy, bidh Bootstrap a’ cleachdadh hacks brabhsair CSS ann an grunn àiteachan gus CSS sònraichte a chuimseachadh air dreachan brobhsair sònraichte gus obrachadh timcheall air bugaichean anns na brobhsairean fhèin. Tha e tuigseach gu bheil na hacks sin ag adhbhrachadh do luchd-dearbhaidh CSS gearan gu bheil iad neo-dhligheach. Ann an àite no dhà, bidh sinn cuideachd a’ cleachdadh feartan CSS sèididh nach eil fhathast làn àbhaisteach, ach tha iad sin air an cleachdadh dìreach airson àrdachadh adhartach.
Chan eil na rabhaidhean dearbhaidh sin gu diofar ann an cleachdadh leis gu bheil am pàirt neo-hacky den CSS againn a’ dearbhadh gu h-iomlan agus nach eil na cuibhreannan meallta a’ cur bacadh air obrachadh ceart a’ chuibhreann neo-hacky, agus mar sin carson a tha sinn a’ seachnadh nan rabhaidhean sònraichte sin a dh’aona ghnothach.
Tha rabhaidhean dearbhaidh HTML beag is neo-chinnteach aig na docaichean HTML againn mar an ceudna air sgàth ’s gu bheil sinn a’ toirt a-steach dòigh-obrach airson bug Firefox sònraichte .