aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/css
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/api/css')
-rw-r--r--files/ja/web/api/css/index.html88
-rw-r--r--files/ja/web/api/css/paintworklet/index.html68
-rw-r--r--files/ja/web/api/css/registerproperty/index.html134
-rw-r--r--files/ja/web/api/css/supports/index.html87
4 files changed, 377 insertions, 0 deletions
diff --git a/files/ja/web/api/css/index.html b/files/ja/web/api/css/index.html
new file mode 100644
index 0000000000..5747634697
--- /dev/null
+++ b/files/ja/web/api/css/index.html
@@ -0,0 +1,88 @@
+---
+title: CSS
+slug: Web/API/CSS
+tags:
+ - API
+ - CSSOM
+ - Interface
+ - Painting
+ - Reference
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><strong><code>CSS</code></strong> インターフェイス は CSS に関連した便利なメソッドを持っています。このインターフェイスにはオブジェクトは実装されていません: 静的メソッドのみを含んでいるため、実用的なインターフェイスになっています。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>CSS インターフェイスはユーティリティインターフェイスです。この型のオブジェクトは作れません: 静的プロパティのみ定義されています。</em></p>
+
+<h3 id="Static_properties" name="Static_properties">静的プロパティ</h3>
+
+<dl>
+ <dt>{{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}</dt>
+ <dd>描画に関するすべてのクラスを担当する Worklet へのアクセスを提供します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>CSS インターフェイスはユーティリティインターフェイスです。この型のオブジェクトは作れません: 静的メソッドのみ定義されています。</em></p>
+
+<h3 id="Static_methods" name="Static_methods">静的メソッド</h3>
+
+<p><em>継承している静的メソッドはありません。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("CSS.registerProperty()")}}</dt>
+ <dd>{{cssxref('--*', 'カスタムプロパティ')}}を登録し、プロパティ型のチェック、デフォルト値、およびそれらの値を継承するまたは継承しないプロパティを許可します。</dd>
+ <dt>{{DOMxRef("CSS.supports()")}}</dt>
+ <dd>与えられたパラメーターで、<em>プロパティと値</em>のペアや条件がサポートされているかどうかを示す {{JSxRef("Boolean")}} を返します。</dd>
+ <dt>{{DOMxRef("CSS.escape()")}}</dt>
+ <dd>主に CSS セレクターの一部として使用するための文字列をエスケープするのに使用できます。</dd>
+ <dt>{{DOMxRef("CSS.factory_functions", 'CSS ファクトリー関数')}}</dt>
+ <dd>使用したファクトリー関数のメソッドの名前を単位としてパラメーターの数値の値を持つ新しい <code><a href="/ja/docs/Web/API/CSSUnitValue">CSSUnitValue</a></code> を返すために使用できます。</dd>
+ <dd>
+ <pre class="notranslate">CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}</pre>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様</th>
+ <th scope="col">状態</th>
+ <th scope="col">コメント</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}</td>
+ <td>{{Spec2('CSS Painting API')}}</td>
+ <td>静的プロパティ <code>paintWorklet</code> の追加</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}</td>
+ <td>{{Spec2('CSSOM')}}</td>
+ <td>静的メソッド <code>escape()</code> の追加</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+ <td>{{Spec2('CSS3 Conditional')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CSS", 1)}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ja/web/api/css/paintworklet/index.html b/files/ja/web/api/css/paintworklet/index.html
new file mode 100644
index 0000000000..7d49a8198f
--- /dev/null
+++ b/files/ja/web/api/css/paintworklet/index.html
@@ -0,0 +1,68 @@
+---
+title: CSS.paintWorklet (静的プロパティ)
+slug: Web/API/CSS/paintWorklet
+tags:
+ - API
+ - CSS
+ - CSS Paint API
+ - Experimental
+ - Houdini
+ - Painting
+ - Property
+ - Reference
+ - Worklet
+ - paintWorklet
+translation_of: Web/API/CSS/paintWorklet
+---
+<p>{{APIRef("CSSOM")}}{{Draft}}{{SeeCompatTable}}{{SecureContext_Header}}</p>
+
+<p><span class="seoSummary"><strong><code>paintWorklet</code></strong> は {{DOMxRef("CSS")}} インターフェイスの静的な読み取り専用プロパティで、{{DOMxRef("PaintWorklet")}} へのアクセスを提供します。 これは、CSS のプロパティがファイルを期待する場所においてプログラムで画像を生成します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <em>worklet</em> = CSS.paintWorklet;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{DOMxRef('PaintWorklet')}} オブジェクト。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の例は、js ファイルから {{DOMxRef('PaintWorklet')}} をロードする方法を示しており、機能検出によってロードします。</p>
+
+<pre class="brush: js notranslate">&lt;script&gt;
+ if ('paintWorklet' in CSS) {
+ CSS.paintWorklet.addModule('checkerboard.js');
+ }
+&lt;/script&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">仕様</th>
+ <th scope="col">状態</th>
+ <th scope="col">コメント</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}</td>
+ <td>{{Spec2('CSS Painting API')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CSS.paintWorklet")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/CSS_Painting_API">CSS Painting API</a></li>
+ <li><a href="/ja/docs/Web/Houdini">Houdini APIs</a></li>
+ <li><a href="/ja/docs/Web/Houdini/learn">Houdini overview</a></li>
+</ul>
diff --git a/files/ja/web/api/css/registerproperty/index.html b/files/ja/web/api/css/registerproperty/index.html
new file mode 100644
index 0000000000..15a693fd5a
--- /dev/null
+++ b/files/ja/web/api/css/registerproperty/index.html
@@ -0,0 +1,134 @@
+---
+title: CSS.registerProperty()
+slug: Web/API/CSS/RegisterProperty
+tags:
+ - CSS
+ - Houdini
+ - Reference
+translation_of: Web/API/CSS/RegisterProperty
+---
+<div>{{SeeCompatTable}}</div>
+
+<p><strong><code>CSS.registerProperty()</code></strong> メソッドは{{cssxref('--*', 'カスタムプロパティ')}}を登録し、プロパティ型のチェック、デフォルト値、およびそれらの値を継承するまたは継承しないプロパティを許可します。</p>
+
+<p>カスタムプロパティを登録すると、カスタムプロパティの振る舞い（許される型は何か、カスタムプロパティがその値を継承するかどうか、カスタムプロパティのデフォルト値は何か）をブラウザーに指示できます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">CSS.registerProperty(<em>PropertyDefinition</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>次のメンバーを含むことができる <code>PropertyDefinition</code> ディクショナリオブジェクトです。</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>定義しているプロパティの名前を示す <code><a href="/ja/docs/Web/API/DOMString">DOMString</a></code>。</dd>
+ <dt><code>syntax</code> {{optional_inline}}</dt>
+ <dd>定義されたプロパティの期待される構文を表す <code><a href="/ja/docs/Web/API/DOMString">DOMString</a></code>。 デフォルトは <code>"*"</code> です。</dd>
+ <dt><code>inherits</code></dt>
+ <dd>定義されたプロパティを継承する必要があるか（<code>true</code>）、否か（<code>false</code>）を定義するブール値。 デフォルトは <code>false</code> です。</dd>
+ <dt><code>initialValue</code> {{optional_inline}}</dt>
+ <dd>定義されたプロパティの初期値を表す <code><a href="/ja/docs/Web/API/DOMString">DOMString</a></code>。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p><code>undefined</code>。</p>
+
+<dl>
+</dl>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>InvalidModificationError</code></dt>
+ <dd>指定された <code>name</code> はすでに登録されています。</dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd>指定された <code>name</code> は（<code>--foo</code> のように、2つのダッシュで始まる）有効なカスタムプロパティ名ではありません。</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>必要なディクショナリメンバーの <code>name</code> または <code>inherits</code>、あるいはその両方が指定されていません。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次の例では、<code>registerProperty()</code> を使用して{{cssxref('--*', 'カスタムプロパティ')}} <code>--my-color</code> を色として登録し、デフォルト値を指定して、その値を継承しません。</p>
+
+<pre class="brush: js notranslate">window.CSS.registerProperty({
+  name: '--my-color',
+  syntax: '&lt;color&gt;',
+  inherits: false,
+  initialValue: '#c0ffee',
+});
+</pre>
+
+<p>この例では、カスタムプロパティ <code>--my-color</code> が構文 <code>&lt;color&gt;</code> を使用して登録されています。 これで、このプロパティを使用して、ホバーまたはフォーカスでグラデーションを遷移（transition）できます。 登録されたプロパティでは遷移が機能しますが、未登録のプロパティでは機能しないことに注意してください！</p>
+
+<pre class="brush: css notranslate">.registered {
+  --my-color: #c0ffee;
+  background-image: linear-gradient(to right, #fff, var(--my-color));
+  transition: --my-color 1s ease-in-out;
+}
+
+.registered:hover,
+.registered:focus {
+  --my-color: #b4d455;
+}
+
+.unregistered {
+  --unregistered: #c0ffee;
+  background-image: linear-gradient(to right, #fff, var(--unregistered));
+  transition: --unregistered 1s ease-in-out;
+}
+
+.unregistered:hover,
+.unregistered:focus {
+  --unregistered: #b4d455;
+}
+button {
+ font-size: 3vw;
+}</pre>
+
+<p>これらのスタイルをいくつかのボタンに追加できます。</p>
+
+<pre class="brush: html notranslate">&lt;button class="registered"&gt;Background Registered&lt;/button&gt;
+&lt;button class="unregistered"&gt;Background Not Registered&lt;/button&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Examples", 320, 320)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">仕様</th>
+ <th scope="col">状態</th>
+ <th scope="col">コメント</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS Properties and Values API', '#the-registerproperty-function', 'The registerProperty() function')}}</td>
+ <td>{{Spec2('CSS Properties and Values API')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.CSS.registerProperty", 1)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS properties and values API の使用</a></li>
+ <li>{{DOMxRef("CSS")}}</li>
+ <li>{{DOMxRef("CSS.supports()")}}</li>
+ <li>{{DOMxRef("CSS.escape()")}}</li>
+ <li>{{DOMxRef("CSS.factory_functions", 'CSS ファクトリー関数')}}</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ja/web/api/css/supports/index.html b/files/ja/web/api/css/supports/index.html
new file mode 100644
index 0000000000..54cde37e4d
--- /dev/null
+++ b/files/ja/web/api/css/supports/index.html
@@ -0,0 +1,87 @@
+---
+title: CSS.supports()
+slug: Web/API/CSS/supports
+tags:
+ - API
+ - CSS
+ - CSSOM
+ - Method
+ - Reference
+ - supports
+ - メソッド
+translation_of: Web/API/CSS/supports
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><code><strong>CSS.supports()</strong></code> メソッドは、ブラウザーが指定された CSS 機能に対応しているかどうかを示す {{jsxref("Boolean")}} 値を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">CSS.supports(<var>propertyName</var>, <var>value</var>);
+CSS.supports(<var>supportCondition</var>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<p>引数の組み合わせが二種類あります。一つ目は、対応しているかどうかをテストする<em>プロパティと値</em>を指定することができます。</p>
+
+<dl>
+ <dt><code><var>propertyName</var></code></dt>
+ <dd>{{domxref("DOMString")}} で、チェックする CSS プロパティの名前が入ります。</dd>
+ <dt><code><var>value</var></code></dt>
+ <dd>{{domxref("DOMString")}} で、チェックする CSS プロパティの値が入ります。</dd>
+</dl>
+
+<p>二つ目の構文は一つの引数を取り、 {{cssxref("@supports")}} の条件に一致させます。</p>
+
+<dl>
+ <dt><code><var>supportCondition</var></code></dt>
+ <dd>{{domxref("DOMString")}} で、チェックする条件が入ります。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>ブラウザーが規則に対応しているのであれば <code>true</code>、そうでなければ <code>false</code>。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">result = CSS.supports("text-decoration-style", "blink");
+result = CSS.supports("display: flex");
+result = CSS.supports("(--foo: red)");
+
+result = CSS.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or
+ (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`);
+
+// result is true or false</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{ SpecName('CSS3 Conditional', '#dom-css-supports', 'CSS: supports()') }}</td>
+ <td>{{ Spec2('CSS3 Conditional') }}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.CSS.supports")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@supports")}} @-規則は、同様の機能を宣言的な方法で行うことができます。</li>
+ <li>{{domxref("CSSSupportsRule")}} は CSSOM のクラスで、 {{cssxref("@supports")}} @-規則を操作することができます。</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-23 20:45:15 +0000