問題タブ [css-variables]

私は非常に長いCSSファイルに取り組んでいます。クライアントが配色の変更を要求できることは知っていますが、変数に色を割り当てて、変数を変更して、それを使用するすべての要素に新しい色を適用することは可能でしょうか?

PHP を使用して CSS ファイルを動的に変更することはできないことに注意してください。

CSS 変数を使用しようとしています。オンラインでチュートリアルを探していますが、これまでのところすべて機能しています。

これが私のCSSです：

私も試しました：

それらのどれも機能しません。何が間違っていますか? ありがとう

CSS 変数を使っていくつかの実験を試みていますが、これを機能させることも、それに関するドキュメントを見つけることもできませんでした。CSS3 セレクターで CSS var を使用できるかどうかは誰にもわかりませんか?

私がやろうとしていることを説明するために、次の例を作成しました。この例は Chrome のみです。

JSFIDDLE

http://jsfiddle.net/68Rrn/

CSS

HTML

Chrome ブラウザがバージョン 28 からバージョン 29 に切り替わったところです。切り替えた後、css3 コードが新しいバージョンで動作しなくなりました。ブラウザをバージョン 28 に戻さずに問題を解決する方法を誰か知っているかどうか疑問に思っていました。

UPDATE Chrome 29 から Chrome 30 に移行する Chrome 30 により、CSS 変数も削除されました。実験的な WebKit 機能を有効にするフラグはオプションではなくなりました。

私は実験的な WebKit 機能、特に CSS 変数を使用しています。次の機能は、私が特にやり直したいものです。

以前は、CSS 変数を使用するために必要だったのは、フラグを有効にすることだけでした (次の画像を参照)。

私は完全な CSS タブ ナビゲーションに取り組んでいます。これが私がやりたいことです: http://jsfiddle.net/7fZnn/1/

しかし、インライン CSS を使用してタブを配置したくありません。そこで、このインライン CSS を置き換えることができるものを調査します。私はそれらを見つけます：

• attr() 関数、:before または :after を使用して要素を選択した場合の content 属性でのみサポートされます
• CSS カウンター。それは素晴らしいことですが、attr() 関数として、これは content 属性でのみ機能します
• CSS 変数、これは Firefox 29 で動作するはずですが、実際には 30 を使用しています。

CSS変数（およびコメントのカウンター）を含む私のコードは次のとおりです：http://jsfiddle.net/j8wxQ/2/

HTML

CSS

それで、私は何を逃したのですか？目標を達成するために他の何かを使用できると思いますか?

ご協力いただきありがとうございます！

以前、古いバージョンの Chrome について非常によく似た質問をしました。ただし、今回は Windows 7 の Chrome 34 (バージョン 34.0.1847.131 m) で、CSS 変数を機能させるのに再び苦労しています (他の OS では試していません)。

構文が変更されていることがわかります (古いものについては、上記のリンクの質問を参照してください)。新しいものは、現在CSS 変数仕様に含まれているものです。:

注意することも重要です。実験的な Web プラットフォーム機能を有効にするフラグが有効になっています。ただし、このフィドルを見ると、Chrome 34 で動作する古い構文も新しい構文も取得できません。

グーグルで調べても、既知の Chrome バグは見つかりませんでした。それを機能させるために何か新しいことをしなければならないかどうか興味がありますか? 私は何か間違ったことをしましたか？他の誰かがこれに遭遇しましたか？

Firefox の最新バージョンはCSS 変数をサポートしていますが、Chrome、IE、およびその他のブラウザーの負荷はサポートしていません。DOM ノードにアクセスしたり、ブラウザーがこの機能をサポートしているかどうかを返す小さなメソッドを作成したりできるはずですが、現在これを実行できるものを見つけることができませんでした。必要なのは、ブラウザが機能をサポートしていない場合にコードを実行するための条件として使用できるソリューションです。次のようなものです。

「複数行」のスプライト CSS アニメーションを作成しようとしていました (これに触発されました: http://codepen.io/simurai/pen/vmhuJ ) 。background-position-x-y

の欠如については、 https-x/-y ://bugzilla.mozilla.org/show_bug.cgi?id=550426 で詳細に説明されており、提案された解決策 ( background-position-y doesn't work in Firefox (via CSS)? ) は最近 Firefox に導入されたCSS 変数を使用します。

@keyframesただし、アニメーションからの CSS 変数の更新はサポートされていないようです。

ここに JSFiddle があります (注: Firefox のみ): http://jsfiddle.net/phoj0kq5/
アニメーションが実行されていることを確認するためだけに、アニメーションにちらつきの境界線を追加しましたが、カニは指を鳴らしません.. CSS を使用していますか?変数が間違っているか、単にアニメーションをサポートしていませんか?

編集

Chrome で実際に動作するフィドルを更新しました (まだ Firefox では動作しません): http://jsfiddle.net/phoj0kq5/1/