iOS 8以下でinsertRuleを使うときはベンダープレフィックスがないとエラーになることが

JavaScriptからCSSへスタイルを追加できるinsertRule

普段JavaScriptからスタイルを制御するときはelement.style.display = "none"といったふうにstyleを使うことが多いと思います。そういった中で、CSS3の@keyframesなどは指定する要素が多く、なかなかstyleを使いづらい。そこで、CSSにスタイルを追加できるinsertRuleを使うことにしました。

JavaScriptから@keyframesのtransformの値を操作したいときのコード。

var css = document.styleSheets[0];

var scale = 0.5;

css.insertRule(
  "@keyframes show-anime{" +
  "0%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
  "20%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
  "50%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
  "75%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
  "100%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}}", 0);

iOS 8以下でエラーが出るときはベンダープレフィックスをつけるべし

insertRuleを使ってCSSに@keyframesを追加すると、iOS 8以下でエラーが出ます。エラーの内容は、@keyframesが対応していないといったものです。そこで、iOS 8以下のときはベンダプレフィックスのついた@-webkit-keyframesを指定するとエラーが出なくなります。

// @keyframesを変数でもっておく
var cssKeyframes = "@keyframes";

if (/(iPhone)/g.test(navigator.userAgent)) {
  navigator.userAgent.match(/iPhone OS (\w+){1,3}/g);
  var osv = RegExp.$1.split("_")[0];
  if(osv <= 8) { // iOS 8以下
    // iOS 8以下の時だけベンダープレフェックスをつける
    cssKeyframes = "@-webkit-keyframes";
  }
}

var css = document.styleSheets[0];

var scale = 0.5;

// @keyframesを設定する
css.insertRule(
  cssKeyframes + " show-anime{" +
  "0%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
  "20%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
  "50%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
  "75%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
  "100%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}}", 0);