From b78cd2fcecb026018f8f7f01021965f809b0bb00 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 26 Apr 2021 02:00:37 +0900 Subject: Web/CSS/CSS_Houdini を新規翻訳 (#496) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/03/04 の英語版に基づき新規翻訳 --- files/ja/web/css/css_houdini/index.html | 83 +++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 files/ja/web/css/css_houdini/index.html (limited to 'files/ja') diff --git a/files/ja/web/css/css_houdini/index.html b/files/ja/web/css/css_houdini/index.html new file mode 100644 index 0000000000..c5daace8b0 --- /dev/null +++ b/files/ja/web/css/css_houdini/index.html @@ -0,0 +1,83 @@ +--- +title: CSS Houdini +slug: Web/CSS/CSS_Houdini +tags: + - CSS + - Houdini + - Experimental + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Houdini +--- +
{{CSSRef}}
+ +

CSS Houdini は、 CSS エンジンの一部を公開する一連の API です。これにより、開発者は CSS の拡張機能を簡単に作成することができます。これらの拡張機能は、ブラウザーでまだ利用できない機能を代替したり、レイアウトの新しい方法を試したり、クリエイティブな境界線やその他の効果を追加したりするものです。

+ +

多くの Houdini の例では、 API の創造的な可能性が紹介されていますが、実用的な使用例もたくさんあります。例えば、 Houdini を使って、型のチェックや既定値を持つ高度なカスタムプロパティを作成することができます。

+ +

基本的な例

+ +

通常の CSS カスタムプロパティは、プロパティの名前と値から成ります。したがって、 --background-color というカスタムプロパティを生成し、色の値を取るようにするとします。この値は、 CSS 内で色の値であるかのように扱われます。

+ +
:root {
+  --background-color: blue;
+}
+
+.box {
+  background-color: var(--background-color);
+}
+ +

しかし、上記の例では、このプロパティに他の値を使用したり、長さを設定することを止めることはできません。そうすると、 background-color: 12px は有効ではないので、このプロパティが使用されている場所には背景色が設定されません。ブラウザーは、有効でないと認識した CSS に出会うと、その行を捨ててしまうからです。

+ +

しかし {{cssxref("@property")}} を使用すると、 {{CSSxRef("@property/syntax","syntax")}} に <color> を指定してカスタムプロパティを設定することができます。これは、このプロパティが有効な色である値を持つ必要があることを示します。

+ +
@property --background-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: blue;
+}
+ +

Houdini ワークレット

+ +

Houdini の機能の一つにワークレット ({{domxref("Worklet")}}) があります。ワークレットとは JavaScriptで書かれたモジュールで、 Houdini の API の一つを使って CSS を拡張するものです。ワークレットの例は {{domxref("PaintWorklet.registerPaint()")}} のページで見ることができます。いったんワークレットが登録されると、他の値と同様に CSS で使用することができます。つまり、 JavaScript の開発者でなくても、他の人が作成したワークレットを使って Houdini API にアクセスすることができます。

+ +

Houdini.how のウェブサイトには、自分のサイトで試すことができるたくさんのワークレットがあります。

+ +

リファレンス

+ +

CSS アット規則と記述子

+ +

{{CSSxRef("@property")}} アット規則で高度なカスタムプロパティを登録することができます。

+ + + +

Houdini API リファレンス

+ + + +

Houdini ガイド

+ + + +

外部リソース

+ + -- cgit v1.2.3-54-g00ecf