Bootstrap5で開発していたアプリを、Safariで表示したところレンジのスタイルが適用されなかったので、その原因と対処法をご紹介します。
Sassでの読み込み時に発生
CDNやbootstrap.min.css、bootstrap.cssからBootstrapを読み込んでいる場合は、この不具合は発生しません。
※Bootstrapは頻繁に更新されているので、今後、このような環境でも不具合が発生する恐れがあります。
bootstrap.scssから読み込んだ場合に、この不具合が見られました。
どういうことなのか
bootstrapのレンジのスタイルが、Safariで反映されない。
Chrome（正常）↓
Safari↓
原因
Safariなどのブラウザでは、デフォルトのスタイルを無効化するCSSのプロパティである、appearanceにベンダープレフィックス1をつけなくてはならないが、Bootstrap 5のSassではベンダープレフィックスがついていないため。
ちなみに、appearanceはMDNによれば、まだ「実験的な機能」とのことです。
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
appearance (-moz-appearance, -webkit-appearance) by MDN contributors is licensed under CC-BY-SA 2.5
現時点での対応状況は以下リンクから見られます。
2021/05/04時点では、
Chrome、Firefox、Edgeではappearance単独でも機能する
Safariはベンダープレフィックスが必要
IEは、11も含めて完全に非対応
とのことです。
IEが完全に非対応とのことですが、最近はEdgeがChromiumを採用したことなどから、IEのサポートを打ち切るサイトも増えてきているので、あまり気にしなくても良いと思われます。
対処法
以下のCSSをBootstrapを読み込ませた後に追記します。
mystyle.scss
input[type="range"]{
/*レンジ全体のスタイルを整える*/
appearance: none; /*デフォルトのスタイルを無効にする*/
-webkit-appearance: none;/*Webkitの古いブラウザでデフォルトのスタイルを無効にする*/
-moz-appearance: none;/*古いFirefoxでデフォルトのスタイルを無効にする*/
}
input[type="range"]::-webkit-slider-thumb {
/*Webkitブラウザでのレンジのツマミ部分のスタイル*/
-webkit-appearance: none;
appearance: none;
}
input[type="range"]::-moz-range-thumb {
/*Firefoxでのレンジのツマミ部分のスタイル*/
-moz-appearance: none;
appearance: none;
}
対処後は、Safariでも正常に表示されました。
Bootstrap側でこの問題は修正されるのか
この問題を修正したというPull Requestがあったので、近いうちにこの不具合が修正されたものがリリースされると思われます。
（2021/05/04時点での最新版はv5.0.0-beta3なので、v5.0.0-beta4で修正されると思われます。）
そのため、Bootstrapのアップデートがないか定期的にチェックされることをおすすめします。
ちなみに、GitHubでコードを管理している場合は、Dependabotを使うとBootstrapなどのパッケージ2のアップデートを自動で確認し、Pull Requestを出してくれます。
Dependabotの設定方法についての記事を書きましたので、合わせてご覧ください。
フロントエンド強化月間
5/31まで、Qiitaでは「フロントエンド強化月間」を行っています。この記事も、「フロントエンド強化月間」に合わせて執筆されたものです。
参考
CSSのappearanceについて
Bootstrap (GitHub)
特定のブラウザでしか使えない、試験段階のプロパティの頭につく-webkit-や-moz-などの識別子のこと。将来的にCSSの正式な仕様となれば不要になりますが、ベンダープレフィックス付きのプロパティにしか対応していない古いブラウザに対応させるため、ベンダープレフィックス付きのプロパティを併記することがあります。 ↩
Bootstrapなどの、サードパーティのソフトウェアを指します。package.jsonなどのようなファイルには、インストールされたパッケージの名称・バージョンなどが記載されています。 ↩
↧