Arakatzaileak eta gailuak
Ikasi Bootstrap-ek onartzen dituen arakatzaile eta gailuei buruz, modernoetatik zaharrera, bakoitzaren bitxikeria eta akats ezagunak barne.
Bootstrap-ek arakatzaile eta plataforma nagusi guztien azken bertsio egonkorrak onartzen ditu. Windows-en, Internet Explorer 10-11 / Microsoft Edge onartzen dugu .
WebKit, Blink edo Gecko-ren azken bertsioa erabiltzen duten arakatzaile alternatiboak, zuzenean edo plataformaren web ikuspegiaren APIaren bidez, ez dira esplizituki onartzen. Hala ere, Bootstrap-ek (kasu gehienetan) behar bezala erakutsi eta funtzionatu beharko luke arakatzaile hauetan ere. Laguntza-informazio zehatzagoa behean ematen da.
Onartutako gure nabigatzaile sorta eta haien bertsioak aurki ditzakezu gurepackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Autoprefixer erabiltzen dugu arakatzaileen laguntza nahi duzun CSS aurrizkien bidez kudeatzeko, zeinak Browserslist erabiltzen du arakatzaileen bertsio hauek kudeatzeko. Kontsultatu haien dokumentazioa tresna hauek zure proiektuetan nola integratzeko.
Oro har, Bootstrap-ek plataforma nagusi bakoitzaren arakatzaile lehenetsien azken bertsioak onartzen ditu. Kontuan izan proxy arakatzaileak (adibidez, Opera Mini, Opera Mobile-ren Turbo modua, UC Browser Mini, Amazon Silk) ez direla onartzen.
| Chrome | Firefox | Safaria | Android arakatzailea eta WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Onartua | Onartua | N/A | Android v5.0+ onartzen da | Onartua |
| iOS | Onartua | Onartua | Onartua | N/A | Onartua |
| Windows 10 Mugikorra | N/A | N/A | N/A | N/A | Onartua |
Era berean, mahaigaineko arakatzaile gehienen azken bertsioak onartzen dira.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safaria | |
|---|---|---|---|---|---|---|
| Mac | Onartua | Onartua | N/A | N/A | Onartua | Onartua |
| Leihoak | Onartua | Onartua | Onartua, IE10+ | Onartua | Onartua | Ez da onartzen |
Firefoxerako, azken bertsio egonkor arruntaz gain, Firefox-en azken laguntza hedatua (ESR) bertsioa ere onartzen dugu.
Ez-ofizialki, Bootstrap-ek nahikoa itxura eta portaera izan beharko luke Chromium eta Chrome Linux-en, Firefox Linux-en eta Internet Explorer 9-n, ofizialki onartzen ez diren arren.
Bootstrap-ek aurre egin behar dion arakatzailearen akatsen zerrenda ikusteko, ikus gure arakatzailearen akatsen horma .
Internet Explorer 10+ onartzen da; IE9 eta behera ez da. Kontuan izan CSS3 propietate eta HTML5 elementu batzuk ez direla guztiz onartzen IE10-n, edo funtzionalitate osoa lortzeko aurrizkizko propietateak behar dituztela. Bisitatu Can I use… CSS3 eta HTML5 funtzioen arakatzailearen laguntzari buruzko xehetasunak lortzeko.
IE8-9 laguntza behar baduzu, erabili Bootstrap 3. Gure kodearen bertsio egonkorrena da eta gure taldeak onartzen du akatsen konponketa eta dokumentazio aldaketa kritikoetarako. Hala ere, ez zaio ezaugarri berririk gehituko.
Elementurako laguntza nahiko mugatua da iOS eta Android-en overflow: hidden;. <body>Horretarako, gailu horietako edozein arakatzaileetan modal baten goiko edo behealdetik mugitzen zarenean, <body>edukia korritzen hasiko da. Ikusi Chrome akatsa #175502 (Chrome v40-n konponduta) eta WebKit akatsa #153852 .
iOS 9.2-tik aurrera, modal bat irekita dagoen bitartean, korritze-keinu baten hasierako ukitua testu baten <input>edo baten mugaren barruan badago <textarea>, <body>modalaren azpian dagoen edukia korrituko da modalaren ordez. Ikusi WebKit akatsa #153856 .
Elementua .dropdown-backdropez da iOS-n erabiltzen nabigazioan, z-indexazioaren konplexutasuna dela eta. Horrela, nabigazio-barren goitibeherako zerrendak ixteko, zuzenean egin behar duzu klik goitibeherako elementuan (edo iOS-en klik-gertaera bat piztuko duen beste edozein elementu ).
Orriaren zoomak ezinbestean errendatze-artefaktuak aurkezten ditu osagai batzuetan, bai Bootstrap-en eta baita gainerako sarean ere. Arazoaren arabera, konpondu ahal izango dugu (lehenik bilatu eta gero arazo bat ireki behar izanez gero). Hala ere, hauek alde batera utzi ohi ditugu, askotan ez baitute soluzio zuzenik hackearen konponbideez gain.
Ukipeneko :hovergailu gehienetan posible ez den arren, iOS-ek portaera hori imitatzen du, eta ondorioz elementu bat sakatu ondoren irauten duten pasabide-estilo "itxikorrak" izaten dira. Erabiltzaileek beste elementu bat ukitzen dutenean soilik kentzen dira pasatzeko estilo hauek. Jokabide hau desiragarritzat jotzen da, eta ez dirudi arazo bat Android edo Windows gailuetan.
Gure v4 alpha eta beta bertsioetan zehar, kode osatugabea eta iruzkindutakoa sartu dugu pasabidearen gainean emulatzen duten ukipen-gailuen arakatzaileetan pasabide-estiloak desgaituko dituen multimedia-kontsulta shim bat aukeratzeko. Lan hau ez zen inoiz guztiz osatu edo gaitu, baina erabat apurtzea ekiditeko, shim hau zaharkitzea eta mixin-ak sasi-klaseetarako lasterbide gisa mantentzea aukeratu dugu.
Nahiz eta arakatzaile moderno batzuetan inprimatzea bitxia izan daiteke.
Safari v8.0-tik aurrera, zabalera finkoko .containerklasea erabiltzeak Safari-k letra-tipo ezohiko tamaina txikia erabiltzea eragin dezake inprimatzerakoan. Ikusi #14868 alea eta WebKit #138192 akatsa xehetasun gehiagorako. Balizko konponbide bat CSS hau da:
@media print {
.container {
width: auto;
}
}Kutxaz kanpo, Android 4.1 (eta, itxuraz, bertsio berriagoak ere) Arakatzailea aplikazioarekin bidaltzen da aukeratutako web arakatzaile lehenetsi gisa (Chrome-ren aurka). Zoritxarrez, Arakatzailea aplikazioak akats eta inkoherentzia asko ditu CSSrekin orokorrean.
Elementuetan , <select>Android stock arakatzaileak ez ditu alboko kontrolak bistaratuko border-radiuseta/edo borderaplikatuta badago. (Ikusi StackOverflow galdera hau xehetasunetarako.) Erabili beheko kode zatia CSS iraingarria kentzeko eta <select>estilorik gabeko elementu gisa errendatzeko Android stock arakatzailean. Erabiltzaile-agenteak sniffak Chrome, Safari eta Mozilla arakatzaileekin interferentziak saihesten ditu.
<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>Adibide bat ikusi nahi? Ikusi JS Bin demo hau.
Arakatzaile zahar eta akatsenei ahalik eta esperientzia onena eskaintzeko, Bootstrap- ek CSS arakatzaileen hackeak erabiltzen ditu hainbat tokitan CSS bereziak arakatzaileen bertsio jakin batzuetara bideratzeko, arakatzaileen akatsak konpontzeko. Hackeatu hauek CSS baliozkotzaileak baliogabeak direla kexatzea eragiten dute. Leku pare batean, oraindik guztiz estandarizatu gabeko CSS funtzionaltasun modernoak ere erabiltzen ditugu, baina hobekuntza progresiborako soilik erabiltzen dira.
Balidazio-abisu hauek ez dute axola praktikan, gure CSS-aren zati ez-hacky-ak guztiz balioztatzen baitu eta zati hackyek ez baitute oztopatzen zati ez-hacky-aren funtzionamendu egokia, horregatik nahita alde batera uzten ditugu abisu jakin hauek.
Gure HTML dokumentuek, halaber, HTML baliozkotze-abisu hutsal eta garrantzizko batzuk dituzte, Firefox-en akats jakin baterako konponbide bat sartu dugulako .