Browser dan perangkat
Pelajari tentang browser dan perangkat, dari modern hingga lama, yang didukung oleh Bootstrap, termasuk kebiasaan dan bug yang diketahui masing-masing.
Browser yang didukung
Bootstrap mendukung rilis terbaru dan stabil dari semua browser dan platform utama. Di Windows, kami mendukung Internet Explorer 10-11 / Microsoft Edge .
Peramban alternatif yang menggunakan versi terbaru WebKit, Blink, atau Gecko, baik secara langsung atau melalui API tampilan web platform, tidak didukung secara eksplisit. Namun, Bootstrap harus (dalam banyak kasus) ditampilkan dan berfungsi dengan benar di browser ini juga. Informasi dukungan yang lebih spesifik disediakan di bawah ini.
Anda dapat menemukan berbagai browser yang kami dukung dan versinya di.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
Kami menggunakan Autoprefixer untuk menangani dukungan browser yang dimaksud melalui awalan CSS, yang menggunakan Daftar Browser untuk mengelola versi browser ini. Lihat dokumentasi mereka tentang cara mengintegrasikan alat-alat ini ke dalam proyek Anda.
Perangkat seluler
Secara umum, Bootstrap mendukung versi terbaru dari masing-masing browser default platform utama. Perhatikan bahwa browser proxy (seperti Opera Mini, mode Turbo Opera Mobile, UC Browser Mini, Amazon Silk) tidak didukung.
| Chrome | Firefox | Safari | Peramban Android & Tampilan Web | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Didukung | Didukung | T/A | Android v5.0+ didukung | Didukung |
| iOS | Didukung | Didukung | Didukung | T/A | Didukung |
| Windows 10 Seluler | T/A | T/A | T/A | T/A | Didukung |
Peramban desktop
Demikian pula, versi terbaru dari sebagian besar browser desktop didukung.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Didukung | Didukung | T/A | Didukung | Didukung | Didukung |
| jendela | Didukung | Didukung | Didukung, IE10+ | Didukung | Didukung | Tidak didukung |
Untuk Firefox, selain rilis stabil normal terbaru, kami juga mendukung Firefox versi Extended Support Release (ESR) terbaru.
Secara tidak resmi, Bootstrap akan terlihat dan berperilaku cukup baik di Chromium dan Chrome untuk Linux, Firefox untuk Linux, dan Internet Explorer 9, meskipun tidak didukung secara resmi.
Untuk daftar beberapa bug browser yang harus dihadapi Bootstrap, lihat Dinding bug browser kami .
Internet Explorer
Internet Explorer 10+ didukung; IE9 dan ke bawah tidak. Perlu diketahui bahwa beberapa properti CSS3 dan elemen HTML5 tidak sepenuhnya didukung di IE10, atau memerlukan properti awalan untuk fungsionalitas penuh. Kunjungi Dapatkah saya menggunakan… untuk detail tentang dukungan browser untuk fitur CSS3 dan HTML5. Jika Anda memerlukan dukungan IE8-9, gunakan Bootstrap 3.
Modal dan dropdown di ponsel
Meluap dan bergulir
Dukungan untuk overflow: hidden;elemen <body>ini cukup terbatas di iOS dan Android. Untuk itu, ketika Anda menggulir melewati bagian atas atau bawah modal di salah satu browser perangkat tersebut, <body>konten akan mulai bergulir. Lihat bug Chrome #175502 (diperbaiki di Chrome v40) dan bug WebKit #153852 .
Bidang teks dan pengguliran iOS
Pada iOS 9.2, saat modal terbuka, jika sentuhan awal gerakan gulir berada dalam batas tekstual <input>atau a <textarea>, <body>konten di bawah modal akan digulir alih-alih modal itu sendiri. Lihat bug WebKit #153856 .
Dropdown Navbar
Elemen .dropdown-backdroptidak digunakan di iOS di nav karena kerumitan pengindeksan-z. Jadi, untuk menutup dropdown di navbars, Anda harus langsung mengklik elemen dropdown (atau elemen lain apa pun yang akan mengaktifkan event click di iOS ).
Pembesaran peramban
Pembesaran halaman pasti menghadirkan artefak rendering di beberapa komponen, baik di Bootstrap dan bagian web lainnya. Bergantung pada masalahnya, kami mungkin dapat memperbaikinya (cari dulu, lalu buka masalah jika perlu). Namun, kami cenderung mengabaikannya karena sering kali tidak ada solusi langsung selain solusi peretasan.
Lengket :hover/ :focusdi iOS
Meskipun :hovertidak memungkinkan di sebagian besar perangkat sentuh, iOS mengemulasi perilaku ini, menghasilkan gaya melayang "lengket" yang bertahan setelah mengetuk satu elemen. Gaya melayang ini hanya dihapus saat pengguna mengetuk elemen lain. Perilaku ini dianggap sebagian besar tidak diinginkan dan tampaknya tidak menjadi masalah pada perangkat Android atau Windows.
Sepanjang rilis alfa dan beta v4 kami, kami menyertakan kode yang tidak lengkap dan dikomentari untuk memilih ke dalam shim kueri media yang akan menonaktifkan gaya melayang di browser perangkat sentuh yang meniru melayang. Pekerjaan ini tidak pernah sepenuhnya selesai atau diaktifkan, tetapi untuk menghindari kerusakan total, kami telah memilih untuk tidak menggunakan shim ini dan menyimpan mixin sebagai pintasan untuk kelas semu.
Pencetakan
Bahkan di beberapa browser modern, pencetakan bisa jadi unik.
Pada Safari v8.0, penggunaan kelas lebar tetap .containerdapat menyebabkan Safari menggunakan ukuran font yang sangat kecil saat mencetak. Lihat masalah #14868 dan bug WebKit #138192 untuk detail selengkapnya. Salah satu solusi potensial adalah CSS berikut:
@media print {
.container {
width: auto;
}
}
Peramban stok Android
Di luar kotak, Android 4.1 (dan bahkan beberapa rilis yang lebih baru tampaknya) dikirimkan dengan aplikasi Browser sebagai browser web pilihan default (sebagai lawan dari Chrome). Sayangnya, aplikasi Browser memiliki banyak bug dan inkonsistensi dengan CSS secara umum.
Pilih menu
Pada <select>elemen, browser stok Android tidak akan menampilkan kontrol samping jika ada border-radiusdan/atau borderditerapkan. (Lihat pertanyaan StackOverflow ini untuk detailnya.) Gunakan cuplikan kode di bawah ini untuk menghapus CSS yang melanggar dan merendernya <select>sebagai elemen tanpa gaya di browser stok Android. Mengendus agen pengguna menghindari gangguan dengan browser Chrome, Safari, dan 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>
Mau lihat contohnya? Lihat demo JS Bin ini .
Validator
Untuk memberikan pengalaman terbaik bagi browser lama dan buggy, Bootstrap menggunakan peretasan browser CSS di beberapa tempat untuk menargetkan CSS khusus ke versi browser tertentu untuk mengatasi bug di browser itu sendiri. Peretasan ini dapat dimengerti menyebabkan validator CSS mengeluh bahwa mereka tidak valid. Di beberapa tempat, kami juga menggunakan fitur CSS mutakhir yang belum sepenuhnya terstandarisasi, tetapi ini digunakan murni untuk peningkatan progresif.
Peringatan validasi ini tidak penting dalam praktiknya karena bagian non-retas dari CSS kami benar-benar memvalidasi dan bagian yang diretas tidak mengganggu berfungsinya bagian non-retas, oleh karena itu kami sengaja mengabaikan peringatan khusus ini.
Dokumen HTML kami juga memiliki beberapa peringatan validasi HTML yang sepele dan tidak penting karena kami menyertakan solusi untuk bug Firefox tertentu .