問題タブ [css-variables]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 「継承」の値を CSS カスタム プロパティに設定するにはどうすればよいですか?
カスタム プロパティの値を に設定すると、inherit他のすべての CSS プロパティに期待することとまったく同じことが行われます。つまり、親の同じプロパティ値を継承します。
通常のプロパティ継承:
カスタム プロパティの継承 (明示的):
カスタム プロパティの継承 (暗黙的):
すべてのカスタム プロパティ ( とは異なりborderます) はデフォルトで継承されます
私の質問
その値を実際にキーワードに計算する場合、カスタム プロパティにのリテラル値をどのように設定しますか?inheritinherit
この例では、2 番目figcaption(ホバー時) に親の赤い境界線を継承させたいので、 に設定--foobarしinheritます。ただし、例 2 に示すように、これは に計算されませんinherit。親のプロパティ--foobar(存在する場合) から継承される値に計算されます。この場合は緑です。
CSS 作成者がこのように設計した理由を完全に理解しています。--foobar他の CSS プロパティと同じなので、設定inheritはその値を継承する必要があります。だから私は、2番目figcaptionに親の境界線を継承させるための回避策があるかどうか尋ねていると思います。
注、私はやることを考えました
しかし、これは CSS 変数を使用する目的に反します。
figure > figcaptionすべてが値を使用する他の多くのプロパティがある場合var(--foobar)、ホバーシナリオのためにそれらをもう一度再定義したくありません。これらのプロパティを一度だけ設定してから、コンテキストに基づいて変数を再割り当てしたいと思います。
css - ::before/::afterコンテンツで使用するために、CSS変数値に引用符を追加するにはどうすればよいですか?
次のコードがあります。
--textがそのまま挿入されて生成されるため (引用符なし)、これは機能しませんcontent: success。
明らかにできます--text: 'success'が、常にではありません — 変数が複数のプロパティ間で再利用されている場合、それらの一部には引用符が適切ではありません。
content引用符自体を追加することは可能ですか? 何かのようなもの
完璧になります。
css - CSS カラー変数に不透明度を適用するにはどうすればよいですか?
私は electron でアプリを設計しているので、CSS 変数にアクセスできます。で色変数を定義しましたvars.css：
この色を で使用したいのですmain.cssが、不透明度が適用されています。
どうすればこれを行うことができますか？私はプリプロセッサを使用しておらず、CSS のみを使用しています。すべて CSS の回答を希望しますが、JavaScript/jQuery は受け入れます。
opacity透過してはいけない背景画像を使用しているため使用できません。
css - 変数値を負にする
変数を負にする方法を見つけようとしています。right: calc(0-var(--skyve-bredde));少し試してみましたがうまくいきませんでした。これは変数です:
値はrightおよびwidth属性で使用されます。どんな助けでも大歓迎です、ありがとう。
css - CSS calc の結果を取得してカスタム プロパティを設定する
マイクロクラスを介して数値を指定するための CSS フレームワークをテストしています。たとえば、次のようなもの<div class="fifty percent wide">は に変換される場合がありますwidth: 50%。実装では、CSS 変数 (カスタム プロパティ) を使用します。
次の CSS を検討してください。
それはすべて問題なく、うまく機能します。問題は、テスト スイートを作成して、その結果が のカスタム プロパティのfifty percent値になることを確認することです。残念ながら、の値を調べるために使用すると、(未解決、未計算の) "calc" 文字列全体が表示されます。の値を調べると、「512px」などの解決済みの値が得られます。--percent50%getComputedStyle--percentwidth
カスタムCSSプロパティの解決された計算値をプログラムで取得して検証する方法はありますか? それとも、「計算」式の評価を強制する API ですか?
html - Polymer の Mixin、クラス、およびカスタム要素
my-mixins.html次を含むという名前のファイルを作成します。
次に、要素を作成しますmy-element.html。
機能している間--red(想定どおり)、機能.greenしませんでした。これはスタイリングがこぼれないようにするためなどだと思いますが…実際のルールは何ですか？--redなぜ設定され、モジュールで利用できるようになったのですかgreen?