ブラウザとOS
Browsers and devices
BootstrapでサポートされているブラウザとOSについて、新しいものから古いもの、それぞれの癖や既知のバグを学びましょう。
対応ブラウザ
Bootstrapは、すべての主要なブラウザとプラットフォームの最新、安定したリリースをサポートしています。
WebKit、Blink、またはGeckoの最新バージョンを使用する代替ブラウザは、直接またはプラットフォームのウェブビューAPIを経由するかどうかにかかわらず、明示的にサポートされていません。しかし、Bootstrapは、これらのブラウザでも(ほとんどの場合)正しく表示され、機能するはずです。より具体的なサポート情報は、以下で提供されます。
サポートされているブラウザの範囲とそのバージョンは、.browserslistrcファイルで確認することができます:
# https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
CSSプレフィックスにはAutoprefixer、ブラウザのバージョン管理にはBrowserslistを用いて管理しています。これらのツールを統合するには、ドキュメントを参照してください。
モバイルデバイス
主要なプラットフォームの標準ブラウザ最新版をサポートしています。プロキシブラウザ(Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk)などはサポートしません。
Chrome | Firefox | Safari | Android Browser & WebView | |
---|---|---|---|---|
Android | Supported | Supported | — | v6.0+ |
iOS | Supported | Supported | Supported | — |
デスクトップ用ブラウザー
同様にほとんどのデスクトップブラウザ最新版をサポートしています。
Chrome | Firefox | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|
Mac | Supported | Supported | Supported | Supported | Supported |
Windows | Supported | Supported | Supported | Supported | — |
Firefoxは最新の安定版だけでなく, Extended Support Release (ESR)もサポートしています。
公式にはサポートしていませんが、Chromium、Chrome for Linux、Firefox for Linuxでもきちんと表示・動作するはずです。
Internet Explorer
Internet Explorerはサポート外です。 Internet Explorのサポートが必要な場合はBootstrap v4を使ってください。
モバイルでのモーダルやドロップダウン
オーバーフローとスクロール
iOSとAndroidにおける<body>
要素のoverflow: hidden;
はかなり制限があります。そのため、これらのデバイスでModalを上部/下部までスクロールすると<body>
要素の内容がスクロールし始めます。Chromeのバグ #175502 (Chrome v40で修正)とWebKitのバグ #153852を参照してください。
iOSのテキストフィールドとスクロール
iOS 9.2以降では, モーダルオープン時に最初のタッチが<input>
もしくは<textarea>
の境界にある場合, モーダルではなく<body>
がスクロールされます。WebKitのバグ #153856を参照してください。
ナビゲーションバーのドロップダウン
iOSのnavbar
における.dropdown-backdrop
要素はz-indexが複雑なので使えません。つまり, navbar
のdropdownを閉じるには, そのdropdown要素 (または, iOSでクリックイベントを発生させる他の要素)を直接クリックする必要があります。
ブラウザの拡大/縮小
ページのズームは、Bootstrapと他のWebの両方で、いくつかのコンポーネントで必然的にレンダリングアーチファクトを提示します。問題によっては、修正できるかもしれません(まず検索して、必要であれば問題を開いてください)。しかし、これらの問題は、ハッキーな回避策以外の直接的な解決策がないことが多いので、無視する傾向があります。
バリデーション
Bootstrapでは、古いブラウザやバグの多いブラウザに対して可能な限り最高の体験を提供するために、CSSブラウザの解決策を数カ所で使用し、ブラウザ自体のバグを回避するために、特定のブラウザバージョンに特別なCSSを適用します。これらのハックは、当然のことながら、CSSバリデーターから「無効である」と指摘される原因になります。また、まだ完全に標準化されていない最先端のCSS機能を使用している箇所もありますが、これらは純粋にプログレッシブ・エンハンスメントのために使用されています。
なぜなら、CSSの非ハック部分は完全に検証され、ハック部分は非ハック部分の適切な機能を妨げないため、これらの警告は実際には重要ではありません。
HTMLドキュメントも同様に、あるFirefoxのバグの回避策を含むため、些細で取るに足らないHTMLバリデーションの警告が表示されます。