Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

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);
umi_kappa
週4で阿佐ヶ谷の飲み屋で芋飲んでます。いつもいるねって言われるけど、ちゃんと仕事してますよ。JSとかアプリとかでIoTなコンテンツを作るお仕事やってます。
http://umikappa.main.jp/
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away