Source

Nā polokalamu kele pūnaewele

E aʻo e pili ana i nā mākaʻikaʻi a me nā mea hana, mai kēia manawa a hiki i ka wā kahiko, i kākoʻo ʻia e Bootstrap, me nā quirks a me nā pōpoki i ʻike ʻia no kēlā me kēia.

Nā polokalamu kele pūnaewele i kākoʻo ʻia

Kākoʻo ʻo Bootstrap i nā mea hou a paʻa i hoʻokuʻu ʻia o nā polokalamu kele nui a me nā paepae. Ma Windows, kākoʻo mākou iā Internet Explorer 10-11 / Microsoft Edge .

ʻAʻole kākoʻo ʻia nā polokalamu kele pūnaewele ʻē aʻe e hoʻohana ana i ka mana hou loa o WebKit, Blink, a i ʻole Gecko, inā pololei a ma o ka API ʻike pūnaewele o ka platform. Eia naʻe, pono ʻo Bootstrap (i ka hapanui o nā hihia) e hōʻike a hana pololei i kēia mau polokalamu kele pūnaewele. Hāʻawi ʻia nā ʻike kākoʻo kikoʻī hou aʻe ma lalo nei.

Hiki iā ʻoe ke loaʻa i kā mākou mau polokalamu kele pūnaewele i kākoʻo ʻia a me kā lākou mau mana ma kā mākoupackage.json :

       "browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

      

Hoʻohana mākou i ka Autoprefixer e mālama i ke kākoʻo polokalamu kele pūnaewele i manaʻo ʻia ma o nā prefix CSS, nāna e hoʻohana i ka Browserslist e hoʻokele i kēia mau polokalamu kele pūnaewele. E nānā i kā lākou palapala no ka hoʻohui ʻana i kēia mau mea hana i kāu mau papahana.

Nā polokalamu kelepona

ʻO ka ʻōlelo maʻamau, kākoʻo ʻo Bootstrap i nā mana hou loa o kēlā me kēia kahua paʻamau o nā polokalamu kele pūnaewele. E ʻike ʻaʻole kākoʻo ʻia nā polokalamu kele pūnaewele (e like me Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk).

	Chrome	Firefox	Safari	Kelepona Android & Nānā Pūnaewele	Microsoft Edge
Android	Kākoʻo ʻia	Kākoʻo ʻia	N/A	Kākoʻo ʻia ka Android v5.0+	Kākoʻo ʻia
IOS	Kākoʻo ʻia	Kākoʻo ʻia	Kākoʻo ʻia	N/A	Kākoʻo ʻia
Windows 10 Mobile	N/A	N/A	N/A	N/A	Kākoʻo ʻia

Nā polokalamu kele papapihi

Pēlā nō, kākoʻo ʻia nā mana hou loa o ka hapa nui o nā polokalamu kele pūnaewele.

	Chrome	Firefox	Internet Explorer	Microsoft Edge	ʻOpera	Safari
ʻO Mac	Kākoʻo ʻia	Kākoʻo ʻia	N/A	N/A	Kākoʻo ʻia	Kākoʻo ʻia
Windows	Kākoʻo ʻia	Kākoʻo ʻia	Kākoʻo ʻia, IE10+	Kākoʻo ʻia	Kākoʻo ʻia	ʻAʻole i kākoʻo ʻia

No Firefox, ma waho aʻe o ka hoʻokuʻu paʻa maʻamau hou loa, kākoʻo pū mākou i ka mana Extended Support Release (ESR) hou loa o Firefox.

ʻAʻole pono, pono e nānā a hana maikaʻi ʻo Bootstrap ma Chromium a me Chrome no Linux, Firefox no Linux, a me Internet Explorer 9, ʻoiai ʻaʻole lākou i kākoʻo ʻia.

No ka papa inoa o kekahi o nā lako polokalamu kele pūnaewele a Bootstrap e hakakā ai, e ʻike i kā mākou Wall of browser bugs .

Internet Explorer

Kākoʻo ʻia ʻo Internet Explorer 10+; ʻAʻole ʻo IE9 a i lalo. E ʻoluʻolu e hoʻomaopopo ʻaʻole kākoʻo piha ʻia kekahi mau waiwai CSS3 a me nā mea HTML5 ma IE10, a i ʻole makemake i nā waiwai prefixed no ka hana piha. E kipa Hiki iaʻu ke hoʻohana… no nā kikoʻī e pili ana i ke kākoʻo polokalamu kele pūnaewele o CSS3 a me nā hiʻohiʻona HTML5.

Inā makemake ʻoe i ke kākoʻo IE8-9, e hoʻohana i ka Bootstrap 3. ʻO ia ka mana paʻa loa o kā mākou code a kākoʻo mau ʻia e kā mākou hui no nā bugfix koʻikoʻi a me nā loli palapala. Eia naʻe, ʻaʻohe mea hou e hoʻohui ʻia iā ia.

Nā mods a me nā hāʻule iho ma ke kelepona paʻalima

Ka nui a me ka owili

Ua kaupalena ʻia ke kākoʻo no overflow: hidden;ka <body>mea ma IOS a me Android. I kēlā hopena, ke hele ʻoe ma mua o ka luna a i ʻole ka lalo o kahi modal ma kekahi o nā polokalamu kele pūnaewele, <body>e hoʻomaka ana ka ʻike e ʻōwili. E ʻike iā Chrome bug #175502 (paʻa ma Chrome v40) a me WebKit bug #153852 .

Nā kahua kikokikona iOS a me ka ʻōwili

E like me ka iOS 9.2, ʻoiai e wehe ʻia ana kahi modal, inā ʻo ka pa mua ʻana o kahi ʻōkuhi ʻōwili i loko o ka palena o kahi kikokikona <input>a i ʻole kahi <textarea>, <body>e ʻōwili ʻia ka ʻike ma lalo o ka modal ma kahi o ka modal ponoʻī. E ʻike i ka hewa WebKit #153856 .

ʻAʻole .dropdown-backdrophoʻohana ʻia ka mea ma iOS ma ka nav no ka paʻakikī o ka z-indexing. No laila, e pani i nā hāʻule i nā navbars, pono ʻoe e kaomi pololei i ka mea hāʻule i lalo (a i ʻole kekahi mea ʻē aʻe e puhi i kahi hanana kaomi ma iOS ).

Hoʻonui ʻia ka polokalamu kele pūnaewele

ʻO ka hoʻonui ʻana i ka ʻaoʻao e hōʻike ana i ka hoʻolilo ʻana i nā mea kiʻi i kekahi mau mea, ma Bootstrap a me ke koena o ka pūnaewele. Ma muli o ka pilikia, hiki iā mākou ke hoʻoponopono (e huli mua a wehe i kahi pilikia inā pono). Eia nō naʻe, maʻa mākou e haʻalele i kēia mau mea no ka mea ʻaʻohe o lākou hopena pololei ma mua o nā workarounds hacky.

Pili `:hover`/ `:focus`ma iOS

ʻOiai :hoverʻaʻole hiki i ka hapa nui o nā mea hoʻopā, hoʻolike ʻo IOS i kēia ʻano, e hopena i nā ʻano hover "sticky" e hoʻomau ma hope o ke kaomi ʻana i hoʻokahi mea. Wehe ʻia kēia mau ʻano hover i ka wā e paʻi ai nā mea hoʻohana i kekahi mea ʻē aʻe. Manaʻo ʻia kēia ʻano he mea makemake ʻole a ʻike ʻia ʻaʻole ia he pilikia ma nā polokalamu Android a i ʻole Windows.

I loko o kā mākou v4 alpha a me ka hoʻokuʻu beta, ua hoʻokomo mākou i nā code i hoʻopiha ʻole ʻia a ʻōlelo ʻia no ke koho ʻana i kahi shim hulina media e hoʻopau i nā ʻano hover i nā polokalamu kelepona paʻi e hoʻohālike i ka hover. ʻAʻole i hoʻopau piha ʻia kēia hana, akā no ka pale ʻana i ka haki ʻana, ua koho mākou e hoʻopau i kēia shim a mālama i nā mixins ma ke ʻano he pōkole no nā papa pseudo.

Paʻi ʻana

ʻOiai ma kekahi mau polokalamu kele hou, hiki ke paʻi ʻia.

E like me ka Safari v8.0, hiki i ka hoʻohana ʻana i ka papa ākea paʻa .containerke hoʻohana ʻo Safari i kahi nui liʻiliʻi liʻiliʻi ke paʻi. E nānā i ka pukana #14868 a me WebKit bug #138192 no nā kikoʻī hou aku. ʻO kahi hoʻoponopono kūpono ʻo CSS kēia:

@media print {
  .container {
    width: auto;
  }
}

Pūnaewele waihona Android

Ma waho o ka pahu, hoʻouna ʻia ka Android 4.1 (a me kekahi mau mea hou aʻe) me ka polokalamu Browser ma ke ʻano he polokalamu kele pūnaewele paʻamau (e kū'ē iā Chrome). ʻO ka mea pōʻino, ʻo ka polokalamu kele pūnaewele he nui nā pōpoki a me nā ʻano like ʻole me CSS ma ka laulā.

Ma <select>nā mea, ʻaʻole e hōʻike ka polokalamu kele pūnaewele Android i nā mana ʻaoʻao inā loaʻa kahi border-radiusa/a borderi hoʻohana ʻia. (E nānā i kēia nīnau StackOverflow no nā kikoʻī.) E hoʻohana i ka snippet o ke code ma lalo nei no ka wehe ʻana i ka CSS hewa a hoʻolilo iā ia <select>ma ke ʻano he ʻano ʻole ma ka polokalamu kele pūnaewele Android. ʻAʻole ka mea hoʻohana e honi ana i ka hoʻopilikia ʻana i nā polokalamu kele pūnaewele Chrome, Safari a me 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>

Makemake ʻoe e ʻike i kahi laʻana? E nānā i kēia JS Bin demo.

Nā mea hōʻoia

No ka hāʻawi ʻana i ka ʻike maikaʻi loa i nā polokalamu kele kahiko a me ka buggy, hoʻohana ʻo Bootstrap i nā hack browser CSS ma nā wahi he nui e hoʻopaʻa i ka CSS kūikawā i kekahi mau polokalamu kele pūnaewele i mea e hana ai i nā pōpoki i loko o nā polokalamu kele pūnaewele ponoʻī. Hoʻomaopopo kēia mau hacks i ka hoʻopiʻi ʻana o nā mea hōʻoia CSS no ka hewa ʻole. Ma nā wahi ʻelua, hoʻohana pū mākou i nā hiʻohiʻona CSS bleeding-edge ʻaʻole i hoʻohālikelike piha ʻia, akā hoʻohana wale ʻia kēia mau mea no ka holomua holomua.

ʻAʻole pili kēia mau ʻōlelo hōʻoia i ka hoʻomaʻamaʻa ʻana no ka mea ua hōʻoia piha ka ʻāpana non-hacky o kā mākou CSS a ʻaʻole keʻakeʻa nā ʻāpana hacky i ka hana kūpono o ka ʻāpana non-hacky, no laila ke noʻonoʻo nei mākou i kēia mau ʻōlelo aʻo.

Loaʻa i kā mākou mau palapala HTML kekahi mau ʻōlelo hōʻoia HTML koʻikoʻi ma muli o kā mākou hoʻokomo ʻana i kahi hoʻoponopono no kekahi bug Firefox .

Nā polokalamu kele pūnaewele