Flexboxやグリッドレイアウトなど、比較的新しい機能を使おうとすると、古いブラウザでレイアウトが崩れてしまう事がよくあります。
そのため、WEBデザインが完成したあと、できるだけ多くのブラウザで表示を確認、ということが必要になります。
そして、崩れていた場合、ベンダープレフィックスというのを入れて対応できるかを検討することになります。
※要するに、まだ正式決定されていないCSSの書式について、各ブラウザがそれぞれ独自に異なる対応をしてしまっているため、それぞれに合わせた記述の仕方をすべて入れてやる必要があるわけですね。
IE, Chrome, Firefox のベンダープレフィクス
| Internet Explorer | -ms- |
| Firefox | -moz- |
| GoogleChrome | -webkit- |
例えば、グリッドレイアウトの指定で、正式には
grid-template-rows:75px 75px;
grid-template-columns:100px 100px 100px;
のように書けば良いのですが、IE11では
-ms-grid-rows:75px 75px;
-ms-grid-columns:100px 100px 100px;
と書く必要がある、みたいな感じ。
しかし、各ブラウザの書き方をいちいち全部覚えておくのも大変ですし、自動で変換してくれるサービスとかないのかな？と思ったら・・・やっぱり、ありました！
Autoprefixer CSS online
左のペインにCSSを書き込むと、右のペインに即座に各種ベンダープレフィックスが付加されたCSSが表示されますので、それをコピペればＯＫですね。
これは便利！＼(^o^)／
比較的、Firefox がCSSの基準に忠実に対応した表示をするということなので、Firefoxでデザインしておいて、完成した後にこのサービスで一気にベンダープレフィックスを付加して完成としています。
しかし、コードも煩雑で見にくくなりますし、どうしても必要という場合でない、古い機能でも実現できるレイアウトの場合は、あまり最新機能を焦って採用する必要もないかな、と個人的には思いますが。。。
コメント