メインブラウザの直近2バージョンのサポート状況をチェックする
まず、bootstrap.cssのメインブラウザの直近の2バージョンのサポート状況をチェックしてみる。
$(npm bin)/doiuse --browsers 'last 2 version' node_modules/bootstrap/dist/css/bootstrap.css
すると以下のようにずらりとサポートされていないものや、一部サポートのもののリストが表示される。
node_modules/bootstrap/dist/css/bootstrap.css:9:1: CSS text-size-adjust not supported by: IE (10,11), Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38) (text-size-adjust)
node_modules/bootstrap/dist/css/bootstrap.css:10:1: CSS text-size-adjust not supported by: IE (10,11), Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38) (text-size-adjust)
node_modules/bootstrap/dist/css/bootstrap.css:131:1: CSS Appearance not supported by: IE (10,11), IE Mobile (10) and only partially supported by: Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38), iOS Safari (9.0-9.2,9.3), IE Mobile (11) (css-appearance)
...
これだと流石に見にくいので、どういうエラーがあるのか知るために、適当に整形してみる。あんまりパースしやすい形式ではないけど、cutやsortやuniqを使って強引に整形してみる。最初の数字がそのエラーが出た回数で、それ以降がエラーの内容になっている。
$ $(npm bin)/doiuse --browsers 'last 2 version' node_modules/bootstrap/dist/css/bootstrap.css | cut -d':' -f 4- | sort | uniq -c | sort -rn
12 CSS Filter Effects not supported by: IE (10,11), Edge (12), IE Mobile (10,11) and only partially supported by: Edge (13) (css-filters)
10 CSS3 Cursors (original values) not supported by: iOS Safari (9.0-9.2,9.3), IE Mobile (10,11) and only partially supported by: Edge (12,13) (css3-cursors)
5 CSS Appearance not supported by: IE (10,11), IE Mobile (10) and only partially supported by: Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38), iOS Safari (9.0-9.2,9.3), IE Mobile (11) (css-appearance)
4 CSS3 3D Transforms only partially supported by: IE (10,11), IE Mobile (10,11) (transforms3d)
...
これを見ると、基本的には直近のブラウザには対応しているけど、一部分だけブラウザサポートしていないCSSが混ざっていることが分かった。CSS Filter EffectsというのはIE 10や11ではサポートしていないみたい。caniuse を見てもそうだった。
しかし、このCSSの中にはモバイルブラウザ用のものも混ざっていたりしてそれが誤検出されている場合もあるし、もしかしたらJSを使うと出来るのかもしれないので、Bootstrapのsupport で見て取れるように、基本的には対応していることが分かる。