ブラウザとOS

Bootstrap でサポートされているブラウザと OS について, 新しいものから古いもの, それぞれの癖や既知のバグを学びましょう。

サポートブラウザ

Bootstrap はメジャーなブラウザの OS の 最新, 安定版 をサポートします。Internet Explorer 10-11, Microsoft Edge を含みます。

最新の Webkit, Blink, Gecko をレンダリングエンジンとするブラウザのサポートは明示していませんが, ほとんどの場合, 正しく表示し動作するはずです。詳細は以下の通りです。

サポート対象のブラウザとバージョンは package.json で確認できます:

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

CSS プレフィックスには Autoprefixer, ブラウザのバージョン管理には Browserslist を用いて管理しています。これらのツールを統合するには, ドキュメントを参照してください。

モバイル

Bootstrap は主要なプラットフォームの標準ブラウザ最新をサポートしています。プロキシブラウザ(Opera ミニ, Opera モバイルターボモード, UC ブラウザミニ, Amazon シルク)などはサポートしません。

	Chrome	Firefox	Safari	Android Browser & WebView	Microsoft Edge
Android	サポート	サポート	N/A	Android v5.0 以降サポート	サポート
iOS	サポート	サポート	サポート	N/A	サポート
Windows 10 Mobile	N/A	N/A	N/A	N/A	サポート

デスクトップ

同様にほとんどのデスクトップブラウザ最新をサポートしています。

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	サポート	サポート	N/A	N/A	サポート	サポート
Windows	サポート	サポート	IE10 以降サポート	サポート	サポート	非サポート

Firefox は最新の安定版だけでなく, Extended Support Release (ESR) もサポートしています。

サポート外ですが Chrominum, Linux 用 Chrome, Internet Explorer 9 でも正常に表示・動作するはずです。

Bootstrap が取り組んでいるブラウザのバグについては Wall of browser bugs を参照してください。

Internet Explorer

Internet Explorer 10 以降をサポートします(IE9 以前は対象外)。一部の HTML5 要素と CSS3 プロパティは IE10 では完全にサポートされていないので, プレフィックス付きのプロパティが必要であることに注意してください。HTML5 と CSS3 の実装状況については Can I use… を参照してください。

IE8-9 をサポートする場合は Bootstrap 3 を使ってください。 これは最も安定したバージョンで, クリティカルなバグの修正やドキュメントの保守についてもチームによってサポートされています。ただし, 新機能は追加されません。

モバイルでの Modals と dropdowns

Overflow と scrolling

iOS と Android における <body> 要素の overflow: hidden; はかなり制限があります。そのため, これらのデバイスで Modal を上部/下部までスクロールすると <body> 要素の内容がスクロールし始めます。Chrome bug #175502 (Chrome v40 で修正) と WebKit bug #153852 を参照してください。

iOS のテキストフィールドとスクロール

iOS 9.2 以降では, モーダルオープン時に最初のタッチが <input> もしくは <textarea> の境界にある場合, モーダルではなく <body> がスクロールされます。WebKit bug #153856 を参照してください。

iOS の navbar における .dropdown-backdrop 要素は z-index が複雑なので使えません。つまり, navbar の dropdown を閉じるには, その dropdown 要素 (または, iOS でクリックイベントを発生させる他の要素) を直接クリックする必要があります。

ブラウザズーム

ページのズームすると, いくつかのコンポーネントが意図しないレンダリング結果になることがあります。我々は問題によっては修正するかもしれません(もし, 最初に発見したら必要に応じてイシューを作成してください)。ただし, ハック以外の手段がないことが多いので, これらを無視する傾向があります。

iOS における Sticky `:hover`/`:focus`

ほとんどのタッチデバイスでは :hover が使えませんが, iOS では使えます。その結果, 1 つの要素をタップしたあとでも持続する “sticky” ホバースタイルになります。このスタイルは, 他の要素をタップすると削除されます。望ましくない動作ですが Android や Windows では問題になりません。

v4 のアルファ版とベータ版をリリースしたとき, “sticky” ホバースタイルを無効にする不完全でコメントアウトされたコードが含まれていました。完全に解決していませんが, 破損をさけるためこの shim を廃止し擬似クラスの mixin にしました。

印刷

モダンなブラウザでも, 正常に印刷できないことがあります。

Safari v8.0 以降では, .container クラスを使用すると, 印刷時に Safari のフォントサイズが小さくなる可能性があります。詳細は issue #14868 と WebKit bug #138192 を参照してください。回避策の 1 つは次の CSS です。

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

Android ブラウザ

Android 4.1 (さらにいくつかの新しいリリースされた OS) はブラウザアプリ (Chrome ではなく) を標準ブラウザとして提供しています。残念なことにブラウザアプリには, CSS においてたくさんのバグがあり標準的ではありません。

Select メニュー

<select> 要素で border-radius または border が適用されている場合, Android ブラウザはフォームのコントロール部分を表示しません。(詳細はこの StackOverflow の質問を参照してください)。以下のスニペットで Android ブラウザで問題の CSS を削除し <select> がスタイル無しの要素としてレンダリングできます。ユーザエージェント判定で Chrome, Safari, 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>

サンプルはこの JS Bin のデモを参照してください。

バリデータ

Bootstrap は古いブラウザやバグの多いブラウザに最良のエクスペリエンスを提供するために, 特定のブラウザおよびバージョンで, いくつか CSS ハックを用いてブラウザ自体のバグを回避しています。これらのハックによって CSS バリデータが警告を出すようになります。まだ完全に標準化されていない, 最新の CSS 機能をいくつか使用していますが, これらは純粋にプログレッシブ・エンハンスメントのために使用されています。

CSS バリデータの警告は重要ではありません。なぜなら CSS ハック部分は完全に検証し, CSS ハック以外の機能を妨げていないからです。したがって, これらの警告を意図的に無視します。

私たちの HTML 文書には, 特定の Firefox バグに対する回避策が含まれているため, 同様に HTML 検証の警告も重要ではりません。