9

WebkitがCSS値と単位モジュールレベルの仕様に関してサポートを提供していることに気づきました。そして、CSSセレクターから別のCSSセレクター（またはDOMスタイル）プロパティを参照する方法があるかどうか誰かが知っているかどうか疑問に思っていましたか？

私はこのようなものがここでの答えになることを期待しています。私が知っていることは、現在のブラウザ実装の場合である可能性が最も高いです。しかし、読み続けてください...

たとえば、アニメーションが要素のサイズを変更する可能性がある場合（これは架空の構文であることに注意してください）。${.element2.width}

<style type="text/css">
.element1 {
  .width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width});
}
.element2 {
  .width: 100px;
}
.element2:hover {
  width: 200px;
  transition: all 0.4s ease-in-out;
}
</style>

この場合、.element2のホバーイベントからトリガーされた遷移に基づいて、.element1の幅が再評価されることを期待します。

前述のスペックを実感します。は作業中のドラフトにすぎませんが、おそらくそのような「参照セレクタープロパティ」を参照するための構文は別の仕様内で定義されています。私はまだ発見していませんか？それとも単に懸念のケースではありません（見落とされた回避策のおかげで）？

4

2 に答える 2

2

リンクした質問への回答を追加しました：https ：//stackoverflow.com/a/11071806/137626

  • グループ化することにより、必要な数のセレクターで同じ宣言ブロックを使用できます（セレクターはコンマで区切られます）
  • このセレクターの前にある宣言ブロック全体を書き直すか、それを実行するプリプロセッサー/マクロを使用せずに、後で同じ宣言ブロックを別のCSSセレクターで再利用することはできません。または、上記のように既存の宣言ブロックに追加します

ここで、CSS自体によってサイズ変更された要素の例を使用します。CSS3メディアクエリ@mediaと、必要な数の宣言ブロックを含むそのルールを使用できます。これらのメディアクエリは、ここでビューポートの幅に適応します。
逆効果をもたらすアニメーションとメディアクエリを介して拡張要素を混合することは、すぐに非常に複雑になります（そして、どのコンテンツで遊んでいるのか疑問に思います）。シンプルに保ちたい場合は、JSが最適です。変数、ループ、イベントがあります;）要素（または任意のCSSセレクター）に単一のクラスを追加または削除することで、CSS3アニメーションを開始できます。
CSS3はJSに置き換わるものではありません（JSはアクティブ化されていないか、どこにでも存在しておらず、CSSという名前の優れたフォールバックがすでに存在するため、JSを使用してHTMLのスタイルを設定しないでください）。

于 2012-06-17T14:31:48.450 に答える
1

sass / scss以下のようなプリコンパイラを使用する以外に、あなたができることはそれを待つかハードコーディングすることだけだと私は信じています。

于 2012-06-17T14:17:57.013 に答える