【トラブル】コードエディタ利用時に、パターン反映がうまくいかない

問題

コードエディタ利用時に、パターン反映がうまくいかない

解決方法

ページ読み込みにおけるタイミングが原因でパターン反映が安定しない、チラつきが発生してしまうケースと、CSSのバッティングが原因のケースに分けて対応方法をご案内します。

ページ読み込みにおけるタイミングが原因でパターン反映が安定しない、またはチラつきが発生してしまうケース

コードエディタで作成されたパターンが反映したりしなかったり、チラつきが発生するケースがございます。原因としましてはページ読み込みにおけるタイミングの問題です。

こちらの事象が発生する場合、JavaScriptの setInterval() 機能を利用して、該当要素が認識され次第パターンを反映されるようにすると、事象を解決することが可能です。

/* タイマーを記述するので、複数のタイマーが記述しないように、既存のタイマーを解除する */

if (window.timerX) clearInterval(window.timerX);

/* タイマーを記述する */

window.timerX = setInterval(function() {

  /* 要素確認IF条件を記述する */

  if (vwo_$(“該当要素のCSSセレクター”).length) {

    /* 要素が認識されたら、コードが繰り返さないようにタイマーを解除する */

    clearInterval(window.timerX);

    … 要素に反映したいコード …

  }

}, 100); /* 100ミリ秒単位でタイマー内のコードが繰り返す */

Attention!

実装したい内容に合わせて、上記のコードをカスタマイズしてご利用ください。例えば複数の要素でそれぞれのタイマーを作成したい場合、 window.timerE1 と window.timerE2 でそれぞれタイマーを記述すれば可能になります。

CSSのバッティングが原因で、CSSが反映されないケース

コードエディタでCSSを追加する際に、CSSが反映されないケースがございます。

原因としましてはCSSの優先順位におけるバッティングが考えられます。CSSの !important 属性を利用することで、解決が可能です。

.example {

  color: red !important;

  font-size: 21px !important;

}