CSSで書いたmediaqueryをjavascriptに取り込む

今週のJavascrip Weekly、in brief で見つけて「はー、なるほど」と思った（し、つい声が出た）。

Importing CSS Breakpoints Into Javascript

最初に断っておきますが、 matchMedia API が使えるブラウザだけが対象ならここまでやる必要ない気もします。ブレイクポイントの指標さえ決まっていて、cssとjsにその指標を書き込まなければいけないという二重な感じが嫌でなければ、それでも良いのではないかと。

ここでのメリットはjsにブレイクポイントの指標（数値的な）を持ち込まなくて良い点1点に限られる。

どうやってやるのか？

CSS でのブレイクポイント指定

/**
* ブレイクポイントの指標、数値は適当です。お好きにどうぞ
*/
body:before {
  content: "smartphone";
  display: none; /* Prevent from displaying. */
}
@media (min-width: 700px) {
  body:before {
    content: "tablet";
  }
}
@media (min-width: 1100px) {
  body:before {
    content: "desktop";
  }
}

body の before 擬似要素にブレイクポイント毎の文字列仕込むという発想。目から鱗。javascript で引っ張ってくるのだろうと、容易に想像できた。

javascript で擬似要素で指定した文字列を取得する

var breakpoint = {};
breakpoint.refreshValue = function () {
  this.value = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/"/g, '');
};

最後の方に文字列をreplaceしてるんだけど、Firefox and IE だとダブルクオートのまま返ってくるかららしい。へー。

• javascript での擬似要素の値を取得するやり方 参考
  this method popularized by David Walsh

resize イベントに仕込む

$(window).resize(function () {
  breakpoint.refreshValue();
  // ブレイクポイントの値を見て実装する処理など
}).resize();

最後にresize()してるのはload時にresize発火させるためかな。

---

元記事コメント欄に同じようなやり方が2年前くらいからあったことを知る。

Anzeixer

知見がまだまだ浅い。
ほとんどコードの引用ですが、本日は以上です。