link-parameters プロパティ (CSS)
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more browser support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
link-parameters は CSS のプロパティで、CSS の env() 関数によって属性が設定された SVG などの外部リソースの値を設定します。
構文
css
/* 単一の値 */
link-parameters: param(--color, red);
/* 複数の値 */
link-parameters:
param(--color1, red),
param(--color2, blue),
param(--color3, green);
値
公式定義
例
外部 SVG ファイルの色を更新
この例では、左側の元の SVG は、stroke 属性に env(--color1, chartreuse)、fill 属性に env(--color2, darkgreen) が設定された正方形です。link-parameters プロパティを使用することで、右側の更新後の正方形において、複数の CSS の param() 関数を用いて、これら両方の属性を更新しています。
html
<div class="squares">
<img
class="original"
src="square.svg"
alt="シャルトリューズ色の境界線と濃い緑色の塗りつぶしがある正方形。" />
<img
class="updated"
src="square.svg"
alt="赤い境界線とトマト色の塗りつぶしをつけている正方形。" />
</div>
css
.updated {
link-parameters:
param(--color1, red),
param(--color2, tomato);
}
仕様書
| 仕様書 |
|---|
| CSS Linked Parameters Module Level 1 # propdef-link-parameters |