Swihlamusela-marito ni switirhisiwa
Dyondza hi swihlamusela-marito na switirhisiwa, ku suka eka swa manguva lawa ku ya eka swa khale, leswi seketeriwaka hi Bootstrap, ku katsa na swihlawulekisi leswi tivekaka na swihoxo eka xin’wana na xin’wana.
Bootstrap yi seketela ku humesiwa ka sweswinyana, loku tiyeke ka swihlamusela-marito hinkwaswo leswikulu ni tipulatifomo. Eka Windows, hi seketela Internet Explorer 10-11 / Microsoft Edge .
Swihlamusela-marito swin’wana leswi tirhisaka vuhundzuluxeri bya sweswinyana bya WebKit, Blink, kumbe Gecko, hambi hi ku kongoma kumbe hi ku tirhisa API ya xivono xa webu xa pulatifomo, a swi seketeriwi hi ku kongoma. Kambe, Bootstrap yi fanele (eka swiyimo swo tala) ku kombisa ni ku tirha kahle eka swihlamusela-marito leswi na swona. Vuxokoxoko byo tala byo kongoma bya nseketelo byi nyikiwile laha hansi.
U nga kuma nxaxamelo wa hina lowu seketeriwaka wa swihlamusela-marito ni tivhidiyo ta swona eka hinapackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Hi tirhisa Autoprefixer ku khoma nseketelo wa swihlamusela-marito lowu kunguhatiweke hi ku tirhisa swirhangi swa CSS, leswi tirhisaka Browserslist ku lawula tivhidiyo leti ta swihlamusela-marito. Languta matsalwa ya vona ku kuma ndlela yo hlanganisa switirhisiwa leswi eka tiphurojeke ta wena.
Hi ku angarhela, Bootstrap yi seketela vuhundzuluxeri bya sweswinyana bya swihlamusela-marito swa xiviri swa pulatifomo yin’wana ni yin’wana leyikulu. Xiya leswaku swihlamusela-marito swa vuyimeri (swo tanihi Opera Mini, movha wa Turbo wa Opera Mobile, UC Browser Mini, Amazon Silk) a swi seketeriwi.
| Chrome | Firefox ya kona | Safari ya kona | Xihlamusela-marito xa Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ku seketeriwa | Ku seketeriwa | N/A | Android v5.0+ yi seketeriwile | Ku seketeriwa |
| iOS | Ku seketeriwa | Ku seketeriwa | Ku seketeriwa | N/A | Ku seketeriwa |
| Windows 10 Xitirhisiwa xa le mavokweni | N/A | N/A | N/A | N/A | Ku seketeriwa |
Hilaha ku fanaka, tivhidiyo ta sweswinyana ta swihlamusela-marito swo tala swa le desktop swa seketeriwa.
| Chrome | Firefox ya kona | Xihlovo xa Internet | Microsoft Edge | Opera | Safari ya kona | |
|---|---|---|---|---|---|---|
| Mac | Ku seketeriwa | Ku seketeriwa | N/A | N/A | Ku seketeriwa | Ku seketeriwa |
| Mafasitere | Ku seketeriwa | Ku seketeriwa | Ku seketeriwa, IE10+ | Ku seketeriwa | Ku seketeriwa | A swi seketeriwi |
Eka Firefox, ku engetela eka nkandziyiso wa sweswinyana wa ntolovelo lowu tiyeke, hi tlhela hi seketela vuhundzuluxeri bya sweswinyana bya Nkandziyiso wa Nseketelo lowu Engeteriweke (ESR) wa Firefox.
Hi ndlela leyi nga riki ya ximfumo, Bootstrap yi fanele ku languteka no tikhoma kahle ku ringana eka Chromium na Chrome ya Linux, Firefox ya Linux, na Internet Explorer 9, hambi leswi swi nga seketeriwiki ximfumo.
Ku kuma nxaxamelo wa swin’wana swa swihoxo swa browser leswi Bootstrap yi faneleke ku lwisana na swona, vona Rirhangu ra hina ra swihoxo swa browser .
Internet Explorer 10+ ya seketeriwa; IE9 na le hansi a hi swona. Hi kombela u tiva leswaku swihlawulekisi swin’wana swa CSS3 na swiaki swa HTML5 a swi seketeriwi hi ku helela eka IE10, kumbe swi lava swihlawulekisi leswi nga ni swirhangi leswaku swi tirha hi ku helela. Endzela Xana ndzi nga tirhisa... ku kuma vuxokoxoko bya nseketelo wa browser ya swihlawulekisi swa CSS3 na HTML5.
Loko u lava nseketelo wa IE8-9, tirhisa Bootstrap 3. I vuhundzuluxeri lebyi tiyeke swinene bya khodi ya hina naswona bya ha seketeriwa hi ntlawa wa hina eka ku lulamisiwa ka swihoxo swa nkoka na ku cinca ka matsalwa. Hambiswiritano, ku hava swilo leswintshwa leswi nga ta engeteriwa eka yona.
Nseketelo wa overflow: hidden;eka <body>elemente wu ringaniseriwile swinene eka iOS na Android. Leswaku u endla sweswo, loko u hundza ehenhla kumbe ehansi ka modal eka xin’wana xa swihlamusela-marito swa switirhisiwa sweswo, leswi <body>nga endzeni swi ta sungula ku rhendzeleka. Vona xihoxo xa Chrome #175502 (xi lulamisiwile eka Chrome v40) na xihoxo xa WebKit #153852 .
Ku sukela eka iOS 9.2, loko modal yi ri karhi yi pfulekile, loko ku khumba ko sungula ka xikombiso xa ku rhendzeleka ku ri endzeni ka ndzilakano wa tsalwa <input>kumbe a <textarea>, leswi <body>nga ehansi ka modal swi ta rhendzeleka ematshan’weni ya modal hi yoxe. Vona xihoxo xa WebKit #153856 .
Element .dropdown-backdropleyi a yi tirhisiwi eka iOS eka nav hikwalaho ka ku rharhangana ka z-indexing. Xisweswo, ku pfala swilo leswi nga ehansi eka ti-navbar, u fanele ku tikhoma hi ku kongoma xiaki lexi nga ehansi (kumbe xiaki xin’wana ni xin’wana lexi nga ta duvula xiendlakalo xo tsindziyela eka iOS ).
Ku kurisa pheji hi ndlela leyi nga papalatekiki ku humesa swilo swa khale swa ku hundzuluxela eka swiphemu swin’wana, eka Bootstrap ni le ka webu hinkwayo. Ku ya hi mhaka, hi nga ha swi kota ku yi lulamisa (rhanga hi lavisisa ivi u pfula mhaka loko swi laveka). Kambe, hi tala ku honisa leswi tanihi leswi hakanyingi swi nga riki na ntlhantlho lowu kongomeke handle ka swintshuxo swa hacky.
Hambileswi :hoverswi nga kotekiki eka switirhisiwa swo tala swo khumba, iOS yi tekelela mahanyelo lawa, leswi endlaka leswaku ku va ni switayele swa ku hover leswi “namarhelanaka” leswi tshamaka swi ri kona endzhaku ko ba elemente yin’we. Switayili leswi swa hover swi susiwa ntsena loko vatirhisi va ba elemente yin’wana. Mahanyelo lawa ngopfu-ngopfu ma tekiwa ma nga laviwi naswona ma vonaka ma nga ri mhaka eka switirhisiwa swa Android kumbe swa Windows.
Eka nkandziyiso wa hina hinkwawo wa v4 alpha na beta, hi katsa khodi leyi nga helelangiki na ku nyika mavonelo ya ku hlawula eka shim ya xivutiso xa midiya leyi nga ta tshikisa switayele swa hover eka swihlamusela-marito swa switirhisiwa swo khumba leswi tekelelaka ku hover. Ntirho lowu a wu nga si tshama wu hetiwa hi ku helela kumbe ku tirhisiwa, kambe ku papalata ku tshoveka loku heleleke, hi hlawurile ku deprecate shim leyi no hlayisa ti mixins tanihi tindlela to koma ta ti pseudo-classes.
Hambi ku ri eka swihlamusela-marito swin’wana swa manguva lawa, ku kandziyisa ku nga va loku hlamarisaka.
Ku sukela eka Safari v8.0, ku tirhisiwa ka tlilasi ya ku anama loku nga cinciki .containerswi nga endla leswaku Safari yi tirhisa sayizi ya fonto leyitsongo hi ndlela leyi nga tolovelekangiki loko yi kandziyisa. Vona nkandziyiso wa #14868 na WebKit bug #138192 ku kuma vuxokoxoko byo tala. Xin’wana lexi nga ha tshungulaka i CSS leyi landzelaka:
@media print {
.container {
width: auto;
}
}Ku huma ebokisini, Android 4.1 (naswona hambi ku ri swin’wana leswintshwa swi tikomba) yi rhumeriwa na app ya Browser tanihi xihlamusela-marito xa webu xa ntolovelo xa ku hlawula (ku hambana na Chrome). Khombo ra kona, app ya Browser yi na swihoxo swo tala na ku nga fambisani na CSS hi ku angarhela.
Eka <select>swiaki, xihlamusela-marito xa xitoko xa Android a xi nge kombisi vulawuri bya le tlhelo loko ku ri na border-radiusna/kumbe ku bordertirhisiwile. (Vona xivutiso lexi xa StackOverflow ku kuma vuxokoxoko.) Tirhisa xiphemu xa khodi leyi nga laha hansi ku susa CSS leyi khunguvanyisaka ni ku hundzuluxela the <select>tanihi xiphemu lexi nga endliwangiki xitayili eka xihlamusela-marito xa xitoko xa Android. Ku nun’hwetela ka muyimeri wa mutirhisi ku papalata ku kavanyeteka ka swihlamusela-marito swa Chrome, Safari, na 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>Xana u lava ku vona xikombiso? Languta demo leyi ya JS Bin.
Leswaku yi nyika ntokoto lowunene lowu kotekaka eka swihlamusela-marito swa khale ni leswi nga ni swihoxo, Bootstrap yi tirhisa ku hakeriwa ka swihlamusela-marito swa CSS etindhawini to hlayanyana ku kongomisa CSS yo hlawuleka eka vuhundzuluxeri byo karhi bya swihlamusela-marito leswaku yi ta tirha ku rhendzela swihoxo eka swihlamusela-marito hi swoxe. Ti hack leti hi ndlela leyi twisisekaka ti endla leswaku va-CSS validator va vilela leswaku a va tirhi. Eka tindhawu timbirhi, hi tlhela hi tirhisa swihlawulekisi swa CSS swa bleeding-edge leswi nga si ringanisiwaka hi ku helela, kambe leswi swi tirhisiwa ntsena ku antswisa loku yaka emahlweni.
Switsundzuxo leswi swa ku tiyisisa a swi na mhaka hi ku tirhisa tanihileswi xiphemu lexi nga riki xa hacky xa CSS ya hina xi tiyisisaka hi ku helela naswona swiphemu swa hacky a swi kavanyeti ku tirha kahle ka xiphemu lexi nga riki xa hacky, hi yona mhaka leyi hi honisaka hi vomu switsundzuxo leswi swo karhi.
Tidokisi ta hina ta HTML na tona ti na switsundzuxo swo karhi swa ku tiyisisiwa ka HTML leswi nga riki swa nkoka na leswi nga riki na nkoka hikwalaho ka ku katsa ka hina ka ndlela yo tshungula xihoxo xo karhi xa Firefox .