2015-03-03

media_query_listのパース

Media Queriesの各クエリーは、featureとexpのセットもしくはmedia_typeでexpressionが、expressionをandで繋いでmedia_queryが、media_queryをカンマで繋いでmedia_query_listになり、それで完成する。そこそこ正確にパースしてJavaScriptから扱えるようにするためには、まずカンマで区切り、更にandキーワードまたはスペースで区切り、更に同じfeatureがあることを考慮した多次元配列に変換してやる必要がありそうだ。

まず存在しなさそうだが、以下のようなクエリーも理論上はありうる。

only
  screen and
  (min-width: 1em) and
  (min-width: 2em),
not
  (min-width: 3em) and
  (min-height: 4em) and
  (min-height: 5em)

例えばこのようなクエリーを以下のようにできれば良さそうだ。

var mediaQueryList = [
  {
    'min-width': ['1em', '2em'],
    'only': true,
    'screen': true
  },
  {
    'min-height': ['4em', 5em'],
    'min-width': ['3em'],
    'not': true
  }
];

こうするための実装を書いているけどすごい面倒くさくて嫌になってきている。min-widthが複数回出てきても良いとか想定していなかった。

パースは出来たとしてもどう扱ってソートするかでまた面倒くさい。min-widthに絞っていてもmedia_queryの中で最大かつその中で最小を基準にソートする必要がありそうだ。他にprint, (min-width: 1em)みたいなものの判断も難しい。もうちょっと時間かかりそうだ。