Biraawuzarootaa fi meeshaalee
Waa'ee biraawzarootaa fi meeshaalee, ammayyaa irraa kaasee hanga durii, kan Bootstrap'n deeggaraman, tokkoon tokkoon isaaniif quirks fi bugs beekamoo dabalatee baradhu.
Biraawzaroota deeggaraman
Bootstrap kanneen haaraa, tasgabbaa'oo ta'an kanneen biraawzarootaa fi waltajjiiwwan gurguddoo hunda ni deeggara. Windows irratti, Internet Explorer 10-11 / Microsoft Edge ni deeggarra .
Biraawzaroota filannoo kanneen WebKit, Blink, ykn Gecko isa haaraa fayyadaman, kallattiinis ta'e karaa API ilaalcha weeb waltajjii, ifatti hin deeggaraman. Haa ta'u malee, Bootstrap (yeroo baay'ee) biraawzaroota kana keessattis sirritti agarsiisuu fi hojjechuu qaba. Odeeffannoon deeggarsa addaa dabalataa armaan gaditti kennameera.
Browser keenya kan deeggaramee fi version isaanii kan keenya irraa argachuu dandeessupackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Deeggarsa biraawzari yaadame karaa durtii CSS qabachuuf Autoprefixer fayyadamna , kunis gosoota biraawzari kana bulchuuf Browserslist fayyadama. Meeshaalee kana pirojektoota kee keessatti akkamitti akka walitti makuu dandeessan galmee isaanii ilaali.
Meeshaalee moobaayilaa
Walumaagalatti, Bootstrap tokkoon tokkoon waltajjii guddaa biraawzaroota durtii gosoota haaraa ni deeggara. Hubadhaa, biraawzaroota bakka bu'aa (kan akka Opera Mini, haalata Turbo Opera Mobile, UC Browser Mini, Amazon Silk) akka hin deeggaramne.
| Chrome jedhamuun beekama | Firefox jedhamuun beekama | Safarii | Andirooyidii Biraawuzarii & WebView | Microsoft Edge jedhamuun beekama | |
|---|---|---|---|---|---|
| Andirooyidii | Deeggarameera | Deeggarameera | N/A | Android v5.0+ kan deeggarameedha | Deeggarameera |
| iOS jedhamuun beekama | Deeggarameera | Deeggarameera | Deeggarameera | N/A | Deeggarameera |
| Mobaayila Windows 10 irratti | N/A | N/A | N/A | N/A | Deeggarameera |
Biraawzaroota deeskitooppii
Haaluma walfakkaatuun, irra caalaan biraawzaroota deeskitooppii gosootni haaraan ni deeggaraman.
| Chrome jedhamuun beekama | Firefox jedhamuun beekama | Internet Explorer jedhamuun beekama | Microsoft Edge jedhamuun beekama | Opera | Safarii | |
|---|---|---|---|---|---|---|
| Macaafa Qulqulluu | Deeggarameera | Deeggarameera | N/A | N/A | Deeggarameera | Deeggarameera |
| Windows jedhamuun beekama | Deeggarameera | Deeggarameera | Kan deeggarame, IE10+ | Deeggarameera | Deeggarameera | Hin deeggaramne |
Firefox tiif, gadhiifama tasgabbaa'aa idilee isa haaraatiin alatti, akkasumas gosa Firefox isa haaraa Gadhiifama Deeggarsa Dheeraa (ESR) ni deeggarra.
Akka ofiisaatti, Bootstrap Chromium fi Chrome for Linux, Firefox for Linux, fi Internet Explorer 9 keessatti akka gaariitti ilaaluu fi amala qabaachuu qaba, haa ta'u malee isaan akka ofiisaatti hin deeggaramne.
Tarree dogongora biraawzarii Bootstrap waliin wal'aansoo qabuu qabu tokko tokkoof, Wall of browser bugs keenya ilaali .
Internet Explorer jedhamuun beekama
Internet Explorer 10+ ni deeggara; IE9 fi gadi miti. Maaloo amaloonni CSS3 fi qaamolee HTML5 tokko tokko IE10 keessatti guutummaatti akka hin deeggaramne, ykn dalagaa guutuuf amaloota durtii akka barbaadan beekaa. Deeggarsa biraawzari amaloota CSS3 fi HTML5 bal'inaan argachuuf Can I use... daawwadhu .
Yoo deeggarsa IE8-9 barbaaddan, Bootstrap 3 fayyadamaa.Innis koodii keenyaa isa hunda caalaa tasgabbaa'aa ta'ee fi ammallee garee keenyaan sirreeffama dogongoraa murteessaa fi jijjiirama galmeedhaaf deeggaramee jira. Haa ta'u malee, wanti haaraan itti hin dabalamu.
Moodaalee fi dropdowns mobaayila irratti
Overflow fi scroll gochuu
Deeggarsi for overflow: hidden;on the <body>element iOS fi Android keessatti baayyee daangeffamaadha. Kanaaf, yeroo ati gubbaa ykn jala moodaalii biraawzaroota meeshaalee sanaa keessaa tokko bira darbitu, <body>qabiyyeen sun garagalchuu ni jalqaba. Dogoggora Chrome #175502 ( Chrome v40 keessatti sirreeffame) fi dogongora WebKit #153852 ilaali .
Dirreewwan barruu iOS fi garagalchuu
IOS 9.2 irraa eegalee, moodaaliin tokko banaa ta'ee osoo jiruu, yoo tuqaan jalqabaa sochii qaxxaamuraa daangaa barreeffamaa <input>ykn a keessa ta'e <textarea>, <body>qabiyyeen moodaalichaa jala jiru bakka moodaalichaa ofii isaatii ni qaxxaamurama. Dogoggora WebKit #153856 ilaali .
Navbar Gadi Bu'uu
Elementiin .dropdown-backdropkun iOS irratti nav keessatti hin fayyadamu sababa walxaxiinsa z-indexing irraa kan ka'e. Kanaaf, navbars keessatti tarreewwan cufuuf, kallattiin elementii gadi bu'aa cuqaasuu qabda (ykn elementii biraa kamiyyuu kan taatee cuqaasuu iOS keessatti dhukaasu ).
Browser guddisuu
Fuula guddisuun qaamolee tokko tokko keessatti artifaaktoota agarsiisaa dhiyeessuun waan hin oolle, Bootstrap fi weeb hafe keessatti. Dhimmicha irratti hundaa’uun sirreessuu dandeenya ta’a (dursa barbaadi sana booda yoo barbaachisaa ta’e dhimma tokko banaa). Haa ta’u malee, yeroo baay’ee furmaata kallatti hacky workarounds malee waan hin qabneef kanneen bira darbuuf carraaqna.
Maxxansaa :hover/ :focusiOS irratti
Meeshaalee tuqaalee irra caalaan irratti kan hin danda’amne ta’us :hover, iOS amala kana fakkeessa, kunis akkaataa hover “sticky” kan elementii tokko erga tuqnee booda itti fufu fida. Akkaataawwan hover kun kan haqaman yeroo fayyadamtoonni elementii biraa tuqan qofa. Amalli kun baay'inaan akka hin barbaadamnetti kan ilaalamu yoo ta'u, meeshaalee Andirooyidii ykn Windows irratti dhimma hin taane fakkaata.
Guutummaa v4 alpha fi beta gadhiifaman keenya keessatti, koodii guutuu hin taanee fi yaada kennine shim gaaffii miidiyaa filachuuf kan akkaataa hover browsers meeshaa tuqaalee hovering fakkeessanii hanqisu. Hojiin kun guutummaatti xumuramee ykn dandeessifamee hin beeku, garuu guutummaatti akka hin cabneef, shim kana deprecate gochuu fi mixins akka karaa gabaabaa gita sobaa eeguu filanneerra.
Maxxansa
Biraawzaroota ammayyaa tokko tokko keessattillee maxxansuun quirky ta'uu danda'a.
Safari v8.0 irraa eegalee, fayyadamni gita bal'ina dhaabbataa .containerSafari yeroo maxxansu hammangaa qubee xiqqaa hin baratamne akka fayyadamu gochuu danda'a. Bal'ina isaaf dhimma #14868 fi dogongora WebKit #138192 ilaali. Furmaanni tokko CSS armaan gadiiti:
@media print {
.container {
width: auto;
}
}Andirooyidii istookii biraawzari
Sanduuqa keessaa ba'ee, Android 4.1 (fi illee kanneen haaraa gadhiifaman tokko tokko fakkaata) appii Browser waliin akka filannoo web browser durtii (faallaa Chrome) waliin ergama. Kan nama dhibu, appiin Browser bugs baay'ee fi walumaa galatti CSS waliin wal hin simne qaba.
Menuu filadhu
Elementiiwwan irratti <select>, biraawzariin istookii Andirooyidii yoo jiraate border-radiusfi/ykn borderhojiirra oole to'annoo cinaa hin agarsiisu. ( Bal'ina isaaf gaaffii StackOverflow kana<select> ilaali.) CSS nama mufachiisu haquuf fi akka elementii unstyled ta'etti Android stock browser irratti agarsiisuuf cuqqaa koodii armaan gadii fayyadami . Urgaa'uun bakka bu'aa fayyadamaa Chrome, Safari, fi Mozilla browsers gidduu seenuun ni hambisa.
<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>Fakkeenya arguu barbaadduu? Demo JS Bin kana ilaalaa.
Mirkaneessitoota
Muuxannoo gaarii biraawzaroota durii fi dogongora qabaniif kennuudhaaf, Bootstrap bakka hedduutti CSS browser hacks fayyadamuun CSS addaa gosoota browser murtaa'oo irratti xiyyeeffachuun dogoggora biraawzaroota keessa jiran ofuma isaaniitii irratti hojjechuuf gargaara. Hacks kunniin CSS validators sirrii miti jedhanii akka komatan gochuun isaanii hubatamaadha. Bakka lamatti, akkasumas amaloota CSS dhiiguu-qarqara ammallee guutummaatti sadarkaa hin qabne fayyadamna, garuu kunniin fooyya'iinsa tarkaanfataa qofaaf fayyadamu.
Akeekkachiisni mirkaneessuu kun qabatamaan dhimma hin qabu sababiin isaas kutaan CSS keenyaa inni hacky hin taane guutummaatti mirkaneessa waan ta'eef kutaaleen hacky kutaa hacky hin taane sirnaan hojjechuuf waan hin gufachiifneef, kanarraa ka'uun maaliif akeekkachiisa addaa kana itti yaadnee bira darbina.
Barreeffamoonni HTML keenyas akkasuma sababa dogoggora Firefox murtaa'eef furmaata hammachuu keenyaatiin akeekkachiisa mirkaneessuu HTML salphaa fi bu'aa hin qabne tokko tokko qabu .