CSSカスタマイズ適用前にデータを操作したい

[amimotojun]

先日、初めてCSS変数の機能を知り、使ってみたのですが、IE11が対応していないことを知りませんでした。
代わりの方法をいろいろ考えているところですが、CSSカスタマイズ適用前にデータを操作できるようなフックとかはあるのでしょうか。

具体的には、CSSカスタマイズ適用前に「デフォルトのキーカラー値の設定を現在のキーカラーの値に置換する」というような処理がしたい、ということです。

他にももしもCSS変数の代わりに使える、動的にCSSの値を設定するいい方がありましたら宜しくお願い致します。

[DRILL LANCER]

/**
 * Key Color CSS
 */
function my_lightning_keycolor_css() {
    $options        = get_option( 'lightning_theme_options' );
    $color_key      = ( isset( $options['color_key'] ) ) ? esc_html( $options['color_key'] ) : '#337ab7';
    $color_key_dark = ( isset( $options['color_key_dark'] ) ) ? esc_html( $options['color_key_dark'] ) : '#2e6da4';
    ?>
    <style type="text/css">
        .bg-main{background-color: <?php echo esc_html( $color_key ); ?>}
        .bg-dark{background-color: <?php echo esc_html( $color_key_dark ); ?>}
　　　　.bd-main{border-color: <?php echo esc_html( $color_key ); ?>}
        .bd-dark{border-color: <?php echo esc_html( $color_key_dark ); ?>}
        .text-main{color: <?php echo esc_html( $color_key_dark ); ?>}
        .text-dark{color: <?php echo esc_html( $color_key_dark ); ?>}
    </style>
    <?php
}
add_action( 'wp_enqueue_scripts', 'my_lightning_keycolor_css' );

とりあえず、上記のように設定しておいて
<p class="text-main bg-dark bd-main">あああああ</p>
という感じで使ってみてはいかがでしょうか？

::beforeや::after等の疑似要素を使用する場合は必要に応じて上記に追加する感じで・・・

もしくは、「css variables ie11 polyfill」あたりで検索して、
検索結果の中から納得行くポリフィルを見つけ出し導入して無理やりCSS変数に対応させるのも手かもしれません。
ポリフィルというのは古いIEを新しいCSS要素に無理やり対応させるスクリプトのことを指します。

[投稿者]

投稿