• JOIN US ON SNS
  • 株式会社monomode
    私たちは札幌・東京を拠点に活動するWEB制作、ホームページ制作会社です。WEB制作やネットショップ制作を主軸にウェブ上のプロモーション展開をサポートしています。

【CSS grid番外編】featureクエリで、未対応ブラウザ表示の制御

【CSS grid番外編】featureクエリで、未対応ブラウザ表示の制御

こんにちは。トゥインクルです。

 

CSSのグリッドについて調べていて、一個「ほえええ」となったものがあったので、紹介します(cssのgridレイアウトについてはこちらの記事をどうぞ)

 

それがfeature queriesというもの。

 

feature queries(フィーチャークエリ)とは

 

ある特定のプロパティをサポートしているブラウザのみに適応させるCSSを書けるというもの。

レスポンシブ対応の際にメディアクエリを使用したことがある方は多いと思いますが、それにかなり近いです。メディアクエリは、ブラウザサイズで分岐させて、「750px以上だけこのCSSを活かす」という風に使いますが、それをプロパティのサポートの有無に置き換えて「グリッドのプロパティをサポートしているブラウザにだけこのCSSを活かす」という風にできるのです。

 

 

使い方

使い方は簡単。

 

で、現在閲覧に使用しているのブラウザがカッコ内のプロパティに対応しているか確認出来て、波カッコの中身にサポートブラウザのみに適応される表記が出来ます。

 

例えば、グリッドに対応しているかの判別は、

 

という感じになります。

 

ブラウザ対応状況(2017年6月現在)

 

じゃあ、このフィーチャークエリ自体のサポートはどうなんでしょう。

 

IE未対応。

 

……

 

 

 

IEにこそ力を発揮しそうなクエリがまさかのIE未対応という、なんかシュールな状況でした。

 

ただ、サポートされたら今後使えそうです。

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
トゥイスク 美雪

トゥイスク 美雪

フロントエンジニアのトゥイスクです。 名前の割に生粋の日本人です。 日々美味しい担々麺屋を探しています。

関連記事

  • RSS rss
  • feedly FEEDLY Feedlyで追加する
mautic is open source marketing automation
ページトップへ戻る