Browsers and devices(ブラウザとOS)
Bootstrap でサポートされているブラウザと OS について、新しいものから古いもの、それぞれの癖や既知のバグを学びましょう。
Supported browsers
メジャーなブラウザの OS の 最新・安定版 をサポートします。レガシーEdge(EdgeHTMLレイアウトエンジン)を含みます。
WebKit、Blink、またはGeckoの最新バージョンを使用する代替ブラウザは、明示的にサポートされていません。しかし、ほとんどの場合、これらのブラウザで正しく表示および動作するはずです。より具体的なサポート情報は以下を参照してください。
サポート対象のブラウザとバージョンは in our .browserslistrc file で確認できます:
# 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 を用いて管理しています。これらのツールを統合するには、ドキュメントを参照してください。
Mobile devices
主要なプラットフォームの標準ブラウザ最新をサポートしています。プロキシブラウザ(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 | — |
Desktop browsers
同様にほとんどのデスクトップブラウザ最新をサポートしています。
| 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 を使ってください。
Modals and dropdowns on mobile
Overflow and scrolling
iOS と Android における <body> 要素の overflow: hidden; はかなり制限があります。そのため、これらのデバイスで Modal を上部/下部までスクロールすると <body> 要素の内容がスクロールし始めます。Chrome bug #175502 (Chrome v40 で修正) と WebKit bug #153852 を参照してください。
iOS text fields and scrolling
iOS 9.2 以降では, モーダルオープン時に最初のタッチが <input> もしくは <textarea> の境界にある場合, モーダルではなく <body> がスクロールされます。WebKit bug #153856 を参照してください。
Navbar Dropdowns
iOS の navbar における .dropdown-backdrop 要素は z-index が複雑なので使えません。つまり, navbar の dropdown を閉じるには, その dropdown 要素 (または, iOS でクリックイベントを発生させる他の要素) を直接クリックする必要があります。
Browser zooming
ページのズームすると, いくつかのコンポーネントが意図しないレンダリング結果になることがあります。我々は問題によっては修正するかもしれません(もし, 最初に発見したら必要に応じてイシューを作成してください)。ただし, ハック以外の手段がないことが多いので, これらを無視する傾向があります。
Validators
Bootstrap は古いブラウザやバグの多いブラウザに最良のエクスペリエンスを提供するために、特定のブラウザおよびバージョンで、いくつか CSS ハック を用いてブラウザ自体のバグを回避しています。 これらのハックによって CSS バリデータが警告を出すようになります。まだ完全に標準化されていない、最新の CSS 機能をいくつか使用していますが。これらは純粋にプログレッシブ・エンハンスメントのために使用されています。
CSS バリデータの警告は重要ではありません。なぜなら CSS ハック部分は完全に検証し、CSS ハック以外の機能を妨げていないからです。したがって、これらの警告を意図的に無視します。
私たちの HTML には、特定の Firefox バグ に対する回避策が含まれているため、検証結果の警告は気にする必要はありません。