ബ്രൗസറുകളും ഉപകരണങ്ങളും
ബൂട്ട്സ്ട്രാപ്പ് പിന്തുണയ്ക്കുന്ന ആധുനികം മുതൽ പഴയത് വരെയുള്ള ബ്രൗസറുകളെയും ഉപകരണങ്ങളെയും കുറിച്ച് അറിയുക.
പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾ
എല്ലാ പ്രധാന ബ്രൗസറുകളുടെയും പ്ലാറ്റ്‌ഫോമുകളുടെയും ഏറ്റവും പുതിയതും സ്ഥിരതയുള്ളതുമായ റിലീസുകളെ ബൂട്ട്സ്ട്രാപ്പ് പിന്തുണയ്ക്കുന്നു . വിൻഡോസിൽ, ഞങ്ങൾ Internet Explorer 10-11 / Microsoft Edge പിന്തുണയ്ക്കുന്നു .
WebKit, Blink അല്ലെങ്കിൽ Gecko എന്നിവയുടെ ഏറ്റവും പുതിയ പതിപ്പ് ഉപയോഗിക്കുന്ന ഇതര ബ്രൗസറുകൾ നേരിട്ടോ അല്ലെങ്കിൽ പ്ലാറ്റ്‌ഫോമിന്റെ വെബ് വ്യൂ API വഴിയോ, വ്യക്തമായി പിന്തുണയ്ക്കുന്നില്ല. എന്നിരുന്നാലും, ഈ ബ്രൗസറുകളിലും ബൂട്ട്സ്ട്രാപ്പ് (മിക്ക കേസുകളിലും) പ്രദർശിപ്പിക്കുകയും ശരിയായി പ്രവർത്തിക്കുകയും വേണം. കൂടുതൽ നിർദ്ദിഷ്ട പിന്തുണാ വിവരങ്ങൾ ചുവടെ നൽകിയിരിക്കുന്നു.
ഞങ്ങളുടെ.browserslistrc file പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളും അവയുടെ പതിപ്പുകളും ഇനിപ്പറയുന്നതിൽ നിങ്ങൾക്ക് കണ്ടെത്താനാകും :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
ഈ ബ്രൗസർ പതിപ്പുകൾ നിയന്ത്രിക്കാൻ ബ്രൗസർലിസ്റ്റ് ഉപയോഗിക്കുന്ന CSS പ്രിഫിക്‌സുകൾ വഴി ഉദ്ദേശിച്ച ബ്രൗസർ പിന്തുണ കൈകാര്യം ചെയ്യാൻ ഞങ്ങൾ Autoprefixer ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ പ്രോജക്റ്റുകളിലേക്ക് ഈ ടൂളുകൾ എങ്ങനെ സംയോജിപ്പിക്കാം എന്നതിന് അവരുടെ ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക.
മൊബൈൽ ഉപകരണങ്ങൾ
പൊതുവായി പറഞ്ഞാൽ, ഓരോ പ്രധാന പ്ലാറ്റ്‌ഫോമിന്റെയും ഡിഫോൾട്ട് ബ്രൗസറുകളുടെ ഏറ്റവും പുതിയ പതിപ്പുകളെ ബൂട്ട്സ്ട്രാപ്പ് പിന്തുണയ്ക്കുന്നു. പ്രോക്‌സി ബ്രൗസറുകൾ (ഓപ്പറ മിനി, ഓപ്പറ മൊബൈലിന്റെ ടർബോ മോഡ്, യുസി ബ്രൗസർ മിനി, ആമസോൺ സിൽക്ക് പോലുള്ളവ) പിന്തുണയ്ക്കുന്നില്ലെന്ന കാര്യം ശ്രദ്ധിക്കുക.
| ക്രോം | ഫയർഫോക്സ് | സഫാരി | ആൻഡ്രോയിഡ് ബ്രൗസറും വെബ്‌വ്യൂവും | മൈക്രോസോഫ്റ്റ് എഡ്ജ് | |
|---|---|---|---|---|---|
| ആൻഡ്രോയിഡ് | പിന്തുണച്ചു | പിന്തുണച്ചു | N/A | Android v5.0+ പിന്തുണയ്ക്കുന്നു | പിന്തുണച്ചു |
| ഐഒഎസ് | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണച്ചു | N/A | പിന്തുണച്ചു |
| വിൻഡോസ് 10 മൊബൈൽ | N/A | N/A | N/A | N/A | പിന്തുണച്ചു |
ഡെസ്ക്ടോപ്പ് ബ്രൗസറുകൾ
അതുപോലെ, മിക്ക ഡെസ്ക്ടോപ്പ് ബ്രൗസറുകളുടെയും ഏറ്റവും പുതിയ പതിപ്പുകൾ പിന്തുണയ്ക്കുന്നു.
| ക്രോം | ഫയർഫോക്സ് | ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | മൈക്രോസോഫ്റ്റ് എഡ്ജ് | ഓപ്പറ | സഫാരി | |
|---|---|---|---|---|---|---|
| മാക് | പിന്തുണച്ചു | പിന്തുണച്ചു | N/A | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണച്ചു |
| വിൻഡോസ് | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണയ്ക്കുന്നു, IE10+ | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണയ്ക്കുന്നില്ല |
Firefox-ന്, ഏറ്റവും പുതിയ സാധാരണ സ്ഥിരതയുള്ള റിലീസിന് പുറമേ, Firefox-ന്റെ ഏറ്റവും പുതിയ എക്സ്റ്റെൻഡഡ് സപ്പോർട്ട് റിലീസ് (ESR) പതിപ്പിനെയും ഞങ്ങൾ പിന്തുണയ്ക്കുന്നു.
അനൗദ്യോഗികമായി, ബൂട്ട്സ്ട്രാപ്പ് ലിനക്സിനായി Chromium, Chrome, Linux-നുള്ള Firefox, Internet Explorer 9 എന്നിവയിൽ വേണ്ടത്ര നന്നായി കാണുകയും പെരുമാറുകയും വേണം, അവ ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്നില്ലെങ്കിലും.
ബൂട്ട്സ്ട്രാപ്പ് കൈകാര്യം ചെയ്യേണ്ട ചില ബ്രൗസർ ബഗുകളുടെ ഒരു ലിസ്റ്റിനായി, ബ്രൗസർ ബഗുകളുടെ മതിൽ കാണുക .
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ
Internet Explorer 10+ പിന്തുണയ്ക്കുന്നു; IE9 ഉം താഴേക്കും അല്ല. ചില CSS3 പ്രോപ്പർട്ടികളും HTML5 ഘടകങ്ങളും IE10-ൽ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ല, അല്ലെങ്കിൽ പൂർണ്ണമായ പ്രവർത്തനത്തിന് പ്രിഫിക്‌സ് ചെയ്‌ത പ്രോപ്പർട്ടികൾ ആവശ്യമാണെന്ന് ദയവായി ശ്രദ്ധിക്കുക. CSS3, HTML5 ഫീച്ചറുകളുടെ ബ്രൗസർ പിന്തുണയെക്കുറിച്ചുള്ള വിശദാംശങ്ങൾക്ക് എനിക്ക് ഉപയോഗിക്കാമോ... സന്ദർശിക്കുക . നിങ്ങൾക്ക് IE8-9 പിന്തുണ ആവശ്യമുണ്ടെങ്കിൽ, ബൂട്ട്സ്ട്രാപ്പ് 3 ഉപയോഗിക്കുക.
മൊബൈലിലെ മോഡലുകളും ഡ്രോപ്പ്ഡൗണുകളും
ഓവർഫ്ലോയും സ്ക്രോളിംഗും
ഘടകത്തിനായുള്ള പിന്തുണ overflow: hidden;iOS <body>, Android എന്നിവയിൽ വളരെ പരിമിതമാണ്. അതിനായി, ആ ഉപകരണങ്ങളുടെ ഏതെങ്കിലും ബ്രൗസറുകളിൽ നിങ്ങൾ ഒരു മോഡലിന്റെ മുകളിലോ താഴെയോ സ്ക്രോൾ ചെയ്യുമ്പോൾ, <body>ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യാൻ തുടങ്ങും. Chrome ബഗ് #175502 (Chrome v40-ൽ പരിഹരിച്ചിരിക്കുന്നു), WebKit ബഗ് #153852 എന്നിവ കാണുക .
iOS ടെക്സ്റ്റ് ഫീൽഡുകളും സ്ക്രോളിംഗും
<input>iOS 9.2 പോലെ, ഒരു മോഡൽ തുറന്നിരിക്കുമ്പോൾ, ഒരു സ്ക്രോൾ ആംഗ്യത്തിന്റെ പ്രാരംഭ സ്പർശനം ഒരു ടെക്‌സ്‌ച്വൽ അല്ലെങ്കിൽ a എന്നതിന്റെ പരിധിക്കുള്ളിലാണെങ്കിൽ, <textarea>മോഡലിന് <body>കീഴിലുള്ള ഉള്ളടക്കം മോഡലിന് പകരം സ്ക്രോൾ ചെയ്യപ്പെടും. WebKit ബഗ് #153856 കാണുക .
നവബാർ ഡ്രോപ്പ്ഡൗണുകൾ
.dropdown-backdropz-ഇൻഡക്‌സിംഗിന്റെ സങ്കീർണ്ണത കാരണം nav-ലെ iOS-ൽ ഈ ഘടകം ഉപയോഗിക്കുന്നില്ല. അതിനാൽ, നാവ്ബാറുകളിലെ ഡ്രോപ്പ്ഡൗണുകൾ അടയ്ക്കുന്നതിന്, നിങ്ങൾ നേരിട്ട് ഡ്രോപ്പ്ഡൗൺ എലമെന്റിൽ ക്ലിക്ക് ചെയ്യണം (അല്ലെങ്കിൽ iOS-ൽ ഒരു ക്ലിക്ക് ഇവന്റ് ഫയർ ചെയ്യുന്ന മറ്റേതെങ്കിലും ഘടകം ).
ബ്രൗസർ സൂം ചെയ്യുന്നു
പേജ് സൂമിംഗ് അനിവാര്യമായും ചില ഘടകങ്ങളിൽ റെൻഡറിംഗ് ആർട്ടിഫാക്‌റ്റുകൾ ബൂട്ട്‌സ്‌ട്രാപ്പിലും മറ്റ് വെബിലും അവതരിപ്പിക്കുന്നു. പ്രശ്‌നത്തെ ആശ്രയിച്ച്, ഞങ്ങൾക്ക് അത് പരിഹരിക്കാൻ കഴിഞ്ഞേക്കും (ആദ്യം തിരയുക, തുടർന്ന് ആവശ്യമെങ്കിൽ ഒരു പ്രശ്നം തുറക്കുക). എന്നിരുന്നാലും, ഹാക്കി പരിഹാരങ്ങളല്ലാതെ അവയ്ക്ക് പലപ്പോഴും നേരിട്ടുള്ള പരിഹാരങ്ങളില്ലാത്തതിനാൽ ഞങ്ങൾ ഇവയെ അവഗണിക്കുന്നു.
സ്റ്റിക്കി :hover/ :focusiOS-ൽ
മിക്ക :hoverടച്ച് ഉപകരണങ്ങളിലും സാധ്യമല്ലെങ്കിലും, iOS ഈ സ്വഭാവം അനുകരിക്കുന്നു, ഒരു ഘടകം ടാപ്പുചെയ്‌തതിന് ശേഷവും നിലനിൽക്കുന്ന "സ്റ്റിക്കി" ഹോവർ ശൈലികൾ ഉണ്ടാകുന്നു. ഉപയോക്താക്കൾ മറ്റൊരു ഘടകം ടാപ്പുചെയ്യുമ്പോൾ മാത്രമേ ഈ ഹോവർ ശൈലികൾ നീക്കംചെയ്യൂ. ഈ സ്വഭാവം ഏറെക്കുറെ അനഭിലഷണീയമായി കണക്കാക്കപ്പെടുന്നു, ഇത് Android അല്ലെങ്കിൽ Windows ഉപകരണങ്ങളിൽ ഒരു പ്രശ്നമല്ല.
ഞങ്ങളുടെ v4 ആൽഫ, ബീറ്റ റിലീസുകളിൽ ഉടനീളം, ഹോവറിംഗ് അനുകരിക്കുന്ന ടച്ച് ഉപകരണ ബ്രൗസറുകളിൽ ഹോവർ ശൈലികൾ പ്രവർത്തനരഹിതമാക്കുന്ന ഒരു മീഡിയ ക്വറി ഷിം തിരഞ്ഞെടുക്കുന്നതിന് ഞങ്ങൾ അപൂർണ്ണവും കമന്റ് ചെയ്തതുമായ കോഡ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ഈ ജോലി ഒരിക്കലും പൂർണ്ണമായി പൂർത്തീകരിക്കുകയോ പ്രവർത്തനക്ഷമമാക്കുകയോ ചെയ്തിട്ടില്ല, എന്നാൽ പൂർണ്ണമായ തകർച്ച ഒഴിവാക്കാൻ, ഈ ഷിം ഒഴിവാക്കാനും മിക്സിനുകളെ വ്യാജ ക്ലാസുകൾക്കുള്ള കുറുക്കുവഴികളായി നിലനിർത്താനും ഞങ്ങൾ തിരഞ്ഞെടുത്തു .
പ്രിന്റിംഗ്
ചില ആധുനിക ബ്രൗസറുകളിൽ പോലും, പ്രിന്റിംഗ് വിചിത്രമായിരിക്കും.
Safari v8.0 പോലെ, ഫിക്സഡ്-വിഡ്ത്ത് .containerക്ലാസ് ഉപയോഗിക്കുന്നത് സഫാരി പ്രിന്റ് ചെയ്യുമ്പോൾ അസാധാരണമാംവിധം ചെറിയ ഫോണ്ട് സൈസ് ഉപയോഗിക്കുന്നതിന് കാരണമാകും. കൂടുതൽ വിവരങ്ങൾക്ക് ലക്കം #14868 , WebKit bug #138192 എന്നിവ കാണുക. ഇനിപ്പറയുന്ന CSS ആണ് സാധ്യമായ ഒരു പരിഹാരം:
@media print {
.container {
width: auto;
}
}
ആൻഡ്രോയിഡ് സ്റ്റോക്ക് ബ്രൗസർ
ബോക്‌സിന് പുറത്ത്, Android 4.1 (കൂടാതെ ചില പുതിയ റിലീസുകൾ പോലും) ബ്രൗസർ ആപ്പിന്റെ ഡിഫോൾട്ട് വെബ് ബ്രൗസറായി തിരഞ്ഞെടുക്കുന്നു (Chrome-ന് വിപരീതമായി). നിർഭാഗ്യവശാൽ, ബ്രൗസർ ആപ്പിന് പൊതുവെ CSS-ൽ ധാരാളം ബഗുകളും പൊരുത്തക്കേടുകളും ഉണ്ട്.
മെനു തിരഞ്ഞെടുക്കുക
ഘടകങ്ങളിൽ , കൂടാതെ/അല്ലെങ്കിൽ പ്രയോഗിച്ചാൽ <select>, Android സ്റ്റോക്ക് ബ്രൗസർ സൈഡ് നിയന്ത്രണങ്ങൾ പ്രദർശിപ്പിക്കില്ല . ( വിശദാംശങ്ങൾക്ക് ഈ StackOverflow ചോദ്യം കാണുക.) കുറ്റകരമായ CSS നീക്കം ചെയ്യാനും Android സ്റ്റോക്ക് ബ്രൗസറിൽ ഒരു ശൈലിയില്ലാത്ത ഘടകമായി റെൻഡർ ചെയ്യാനും ചുവടെയുള്ള കോഡിന്റെ സ്‌നിപ്പെറ്റ് ഉപയോഗിക്കുക . ഉപയോക്തൃ ഏജന്റ് സ്നിഫിംഗ് Chrome, Safari, Mozilla ബ്രൗസറുകളുമായുള്ള ഇടപെടൽ ഒഴിവാക്കുന്നു.border-radiusborder<select>
<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>
ഒരു ഉദാഹരണം കാണണോ? ഈ JS Bin ഡെമോ പരിശോധിക്കുക .
മൂല്യനിർണ്ണയക്കാർ
പഴയതും ബഗ്ഗിയുള്ളതുമായ ബ്രൗസറുകൾക്ക് സാധ്യമായ ഏറ്റവും മികച്ച അനുഭവം നൽകുന്നതിന്, ബ്രൗസറുകളിലെ ബഗുകൾ പരിഹരിക്കുന്നതിന് ചില ബ്രൗസർ പതിപ്പുകളിലേക്ക് പ്രത്യേക CSS ടാർഗെറ്റുചെയ്യുന്നതിന് ബൂട്ട്സ്ട്രാപ്പ് പല സ്ഥലങ്ങളിലും CSS ബ്രൗസർ ഹാക്കുകൾ ഉപയോഗിക്കുന്നു. ഈ ഹാക്കുകൾ മനസ്സിലാക്കാവുന്നതേയുള്ളൂ, അവ അസാധുവാണെന്ന് CSS മൂല്യനിർണ്ണയക്കാർ പരാതിപ്പെടാൻ ഇടയാക്കുന്നു. രണ്ട് സ്ഥലങ്ങളിൽ, ഇതുവരെ പൂർണ്ണമായി സ്റ്റാൻഡേർഡ് ചെയ്യാത്ത ബ്ലീഡിംഗ് എഡ്ജ് CSS ഫീച്ചറുകളും ഞങ്ങൾ ഉപയോഗിക്കുന്നു, എന്നാൽ ഇവ പുരോഗമനപരമായ മെച്ചപ്പെടുത്തലിനായി ഉപയോഗിക്കുന്നു.
ഞങ്ങളുടെ CSS-ന്റെ ഹാക്കി അല്ലാത്ത ഭാഗം പൂർണ്ണമായി സാധൂകരിക്കുകയും ഹാക്കി അല്ലാത്ത ഭാഗത്തിന്റെ ശരിയായ പ്രവർത്തനത്തിൽ ഹാക്കി ഭാഗങ്ങൾ ഇടപെടാതിരിക്കുകയും ചെയ്യുന്നതിനാൽ ഈ മൂല്യനിർണ്ണയ മുന്നറിയിപ്പുകൾ പ്രായോഗികമായി പ്രശ്നമല്ല, അതിനാൽ ഈ പ്രത്യേക മുന്നറിയിപ്പുകൾ ഞങ്ങൾ മനഃപൂർവ്വം അവഗണിക്കുന്നത് എന്തുകൊണ്ട്.
ഞങ്ങളുടെ HTML ഡോക്‌സിനും അതുപോലെ ചില നിസ്സാരവും അപ്രസക്തവുമായ HTML മൂല്യനിർണ്ണയ മുന്നറിയിപ്പുകൾ ഉണ്ട് .