Source

Browser lan piranti

Sinau babagan browser lan piranti, saka modern nganti lawas, sing didhukung dening Bootstrap, kalebu quirks lan bug sing dikenal kanggo saben.

Browser sing didhukung

Bootstrap ndhukung rilis paling anyar lan stabil saka kabeh browser lan platform utama. Ing Windows, kita ndhukung Internet Explorer 10-11 / Microsoft Edge .

Browser alternatif sing nggunakake WebKit, Blink, utawa Gecko versi paling anyar, langsung utawa liwat API tampilan web platform, ora didhukung kanthi jelas. Nanging, Bootstrap kudu (ing umume kasus) nampilake lan bisa digunakake kanthi bener ing browser kasebut. Informasi dhukungan sing luwih spesifik diwenehake ing ngisor iki.

Sampeyan bisa nemokake macem-macem browser sing didhukung lan versi ingpackage.json :

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

Kita nggunakake Autoprefixer kanggo nangani dhukungan browser sing dituju liwat awalan CSS, sing nggunakake Browserslist kanggo ngatur versi browser kasebut. Rujuk dokumentasi babagan cara nggabungake alat kasebut menyang proyek sampeyan.

Piranti seluler

Umumé, Bootstrap ndhukung versi paling anyar saka saben browser standar platform utama. Elinga yen browser proxy (kayata Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) ora didhukung.

Chrome Firefox Safari Browser Android & Tampilan Web Microsoft Edge
Android Didhukung Didhukung N/A Android v5.0+ didhukung Didhukung
iOS Didhukung Didhukung Didhukung N/A Didhukung
Windows 10 Mobile N/A N/A N/A N/A Didhukung

Browser desktop

Kajaba iku, versi paling anyar saka akeh browser desktop didhukung.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Didhukung Didhukung N/A N/A Didhukung Didhukung
Windows Didhukung Didhukung Didhukung, IE10+ Didhukung Didhukung Ora didhukung

Kanggo Firefox, saliyane release stabil normal paling anyar, kita uga ndhukung versi Extended Support Release (ESR) Firefox paling anyar.

Ora resmi, Bootstrap kudu katon lan tumindak kanthi becik ing Chromium lan Chrome kanggo Linux, Firefox kanggo Linux, lan Internet Explorer 9, sanajan ora didhukung kanthi resmi.

Kanggo dhaptar sawetara bug browser sing kudu ditindakake Bootstrap, deleng Tembok bug browser .

Internet Explorer

Internet Explorer 10+ didhukung; IE9 lan mudhun ora. Wigati dimangerteni manawa sawetara properti CSS3 lan unsur HTML5 ora didhukung kanthi lengkap ing IE10, utawa mbutuhake sifat awalan kanggo fungsionalitas lengkap. Dolan maring Can I use… kanggo rincian babagan dhukungan browser fitur CSS3 lan HTML5.

Yen sampeyan mbutuhake dhukungan IE8-9, gunakake Bootstrap 3. Iki minangka versi paling stabil saka kode kita lan isih didhukung dening tim kita kanggo perbaikan bug kritis lan owah-owahan dokumentasi. Nanging, ora ana fitur anyar sing bakal ditambahake.

Modal lan dropdown ing seluler

Overflow lan nggulung

Dhukungan kanggo overflow: hidden;unsur <body>cukup winates ing iOS lan Android. Kanggo tujuan kasebut, nalika sampeyan nggulung liwat ndhuwur utawa ngisor modal ing salah siji saka browser piranti kasebut, <body>konten kasebut bakal mulai digulung. Waca bug Chrome #175502 (didandani ing Chrome v40) lan bug WebKit #153852 .

kolom teks iOS lan nggulung

Ing iOS 9.2, nalika modal mbukak, yen tutul awal sadurunge nyeret gulung ana ing wates teks <input>utawa a <textarea>, <body>isi ing ngisor modal bakal digulung tinimbang modal dhewe. Waca bug WebKit #153856 .

Unsur .dropdown-backdropiki ora digunakake ing iOS ing nav amarga kerumitan z-indeksasi. Mangkono, kanggo nutup dropdowns ing navbars, sampeyan kudu langsung klik unsur gulung mudhun (utawa unsur liyane sing bakal murub acara klik ing iOS ).

Zooming browser

Zooming kaca mesthi nampilake artefak rendering ing sawetara komponen, ing Bootstrap lan liyane ing web. Gumantung saka masalah kasebut, kita bisa uga bisa ndandani (telusuri dhisik banjur mbukak masalah yen perlu). Nanging, kita cenderung nglirwakake iki amarga asring ora duwe solusi langsung kajaba solusi hacky.

Lengket :hover/ :focusing iOS

Sanadyan :hoverora bisa ditindakake ing pirang-pirang piranti tutul, iOS niru prilaku iki, nyebabake gaya hover "lengket" sing tetep sawise nutul siji unsur. Gaya hover iki mung dibusak nalika pangguna nutul unsur liyane. Prilaku iki dianggep umume ora dikarepake lan katon ora dadi masalah ing piranti Android utawa Windows.

Saindhenging rilis v4 alpha lan beta, kita kalebu kode sing ora lengkap lan menehi komentar kanggo milih menyang shim query media sing bakal mateni gaya hover ing browser piranti tutul sing niru nglayang. Karya iki ora tau rampung utawa diaktifake kanthi lengkap, nanging kanggo ngindhari karusakan lengkap, kita wis milih kanggo ngilangi shim iki lan tetep mixin minangka trabasan kanggo kelas pseudo.

Printing

Malah ing sawetara browser modern, nyetak bisa dadi aneh.

Minangka Safari v8.0, nggunakake kelas tetep-jembaré .containerbisa nimbulaké Safari nggunakake ukuran font mboten umum cilik nalika nyetak. Deleng masalah #14868 lan bug WebKit #138192 kanggo rincian liyane. Salah sawijining solusi potensial yaiku CSS ing ngisor iki:

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

Browser saham Android

Metu saka kothak, Android 4.1 (lan malah sawetara rilis anyar ketoke) ngirim aplikasi Browser minangka browser web standar pilihan (minangka gantos kanggo Chrome). Sayange, app Browser akeh bug lan inconsistencies karo CSS ing umum.

Pilih menu

Ing <select>unsur, browser Simpenan Android ora bakal nampilake kontrol sisih yen ana border-radiuslan / utawa borderApplied. (Waca pitakonan StackOverflow iki kanggo rincian.) Gunakake snippet kode ing ngisor iki kanggo mbusak CSS nglanggar lan nerjemahake <select>minangka unsur unstyled ing browser Simpenan Android. Agen pangguna sniffing ngindhari gangguan karo browser Chrome, Safari, lan 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>

Pengin ndeleng conto? Priksa demo JS Bin iki.

Validator

Kanggo nyedhiyakake pengalaman sing paling apik kanggo browser lawas lan buggy, Bootstrap nggunakake hack browser CSS ing sawetara panggonan kanggo ngarahake CSS khusus menyang versi browser tartamtu supaya bisa ngatasi bug ing browser kasebut. Hacks iki bisa dingerteni nyebabake validator CSS sambat yen dheweke ora sah. Ing sawetara panggonan, kita uga nggunakake fitur CSS bleeding-edge sing durung distandarisasi kanthi lengkap, nanging iki digunakake kanggo nambah progresif.

Bebaya validasi iki ora masalah ing praktik amarga bagean sing ora diretas saka CSS kita wis divalidasi kanthi lengkap lan bagean sing diretas ora ngganggu fungsi sing bener saka bagean sing ora diretas, mula kita sengaja nglirwakake bebaya tartamtu kasebut.

Dokumen HTML kita uga duwe sawetara bebaya validasi HTML sing ora pati penting lan ora penting amarga kalebu solusi kanggo bug Firefox tartamtu .