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

このトピックには1件の返信、2人の参加者があり、最後にDRILL LANCERにより5年、 7ヶ月前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿
2019年4月13日 9:06 AM #15874

amimotojun
参加者

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

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

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

2019年4月13日 10:11 AM #15875
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要素に無理やり対応させるスクリプトのことを指します。
投稿者

投稿