フェノメナの技術担当のレミです！
「flexboxを使いたいけど、ユーザのブラウザが果たして、それに対応しているのだろうか」と心配する開発者は少なくないでしょう。
flexboxだけでなく、あらゆる新しいCSSプロパティも全て同じ問題を抱えていて、「新しい技術は便利だし使いたいなー」という思いと、使えるユーザが制限されるのではないかという心配が共存しています。
それはもちろん、「なるべく多くのユーザに、リッチでかつ一貫性のある体験を届ける」という志し、ミッションをもつプロフェッショナルならば、少なくともそう思うでしょう。
新しいCSSプロパティを使いつつ、ユーザを限定させないという方法は幾つかあります。
例えば特定のCSSを宣言したり、JSを用いてブラウザが対応しているか検知させるという方法などですが、それがCSSネイティヴでも実現可能になっていることはご存知でしょうか？
それは @supports というCSSの宣言です。
長い説明より事例がわかりやすいでしょう。
@supports (display: flex) {
p { display: flex; }
}
使い方は、メディアクエリーと同じです。
このサンプルコードでは display: flex というCSSにブラウザが対応（英 : support）しているかを確認した上で、大丈夫ならそのCSSを利用するようになっています。
同様に「not（否定）」というキーワードと組み合わせることで、「ブラウザが対応していない」といったケースに向けた記述もできます。
@supports not (display: flex) {
p { float: left; }
}
2012年からサポートが停止したInternet Explorer 11以外、ブラウザの対応状況は非常に良好で、Edgeは完全に対応しています。Internet Explorer 11に対応する必要があるケース以外では、安心して使うことができそうです。
不明な点があれば、弊社ホームページのお問い合わせフォームからご連絡下さい。
是非、次のプロジェクトにでも使って見て下さい！