VWSとは フォーラム Lightning CSSカスタマイズ適用前にデータを操作したい

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

このトピックには1件の返信が含まれ、2人の参加者がいます。3 ヶ月前 RICK さんが最後の更新を行いました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • 投稿者
    投稿
  • #15874

    amimotojun
    参加者

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

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

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

    #15875

    RICK
    参加者
    /**
     * 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要素に無理やり対応させるスクリプトのことを指します。

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

このトピックに返信するにはログインが必要です。