ForHosting KIT · サイト取得・監視

CSSカスタムプロパティのスコープ確認

CSSカスタムプロパティは、宣言された要素と、継承が中断されない限りその子孫要素で利用できます。このツールは、変数を定義するセレクターと利用するセレクターを比較します。両方の文字列を検証し、セレクターリストにも対応したうえで、各利用分岐が少なくとも1つの定義分岐に構造上含まれるかを示します。ブラウザで計算済みスタイルを調査する前に、デザイントークンが欠ける典型的な原因を見つけられます。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

定義箇所と利用箇所を入力します

定義欄にはカスタムプロパティを宣言するルールのセレクターを、利用欄には<code>var()</code>を呼び出すルールのセレクターを入力してください。たとえば、<code>.theme-dark .card</code>で定義したトークンは、<code>.theme-dark .card > .title</code>で利用できます。これは、宣言を受け取るカードの下位でタイトルが選択されるためです。<code>:root</code>での定義は、ルート要素が文書内容の祖先となるため、グローバルとして扱われます。どちらの欄にも、カンマ区切りのセレクターリストを入力できます。ツールは利用側の各分岐を個別に評価し、すべての分岐が対象範囲に入る場合にのみ、全体を真と判定します。また、対象範囲に入った各利用分岐について、一致した定義分岐を表示するため、長いリストも確認しやすくなります。この確認はセレクター間の関係だけを対象とします。スタイルシート、宣言ブロック、プロパティ名、値を貼り付ける必要はありません。関係する2つのセレクターだけを指定することで、ソース順や値の構文ではなく、カスケードの適用範囲に焦点を絞れます。

構造上の範囲判定を理解します

このツールは、カスタムプロパティが利用可能かどうかのうち、セレクターだけから判断できる部分をモデル化します。定義セレクターが、利用セレクターと同じ要素、またはその祖先要素を特定できるかを調べます。複合条件も維持されます。たとえば、<code>.card.featured</code>での定義が、<code>.card</code>だけを含む利用を覆うとは判断しません。子結合子は子結合子のままである必要がありますが、子孫関係では、利用セレクター内の追加の複合セレクターをまたぐことができます。セレクターリストは、定義側では選択肢、利用側では満たすべき各条件として働きます。この慎重な方式により、セレクター文字列から関係を確認できない場合に、変数が利用可能だと誤って断定することを避けます。実行時の状況によって実際のカスケードが変わる場合はあります。ソース順、条件付きルール、Shadow DOMの境界、インラインスタイル、レイヤー、詳細度、明示的なリセット、実際の文書ツリーは、この2つの入力だけでは評価しません。真という結果は構造上の包含を示すものとして扱い、特定の描画済み文書で最終値を確定する場合は、ブラウザの計算済みスタイルもご確認ください。

検証エラーから曖昧な入力を修正します

各セレクターは比較前に解析されます。セレクターリスト内の空の分岐、対応していない角括弧や丸括弧、未完の結合子、宣言用の記号、不完全なクラス、ID、疑似セレクターのトークンなど、誤った形式がある場合は、推測した結果ではなく入力エラーを返します。この違いは自動処理で重要です。偽は、入力したセレクターは有効でも、要求された利用箇所が構造上の範囲に入らないことを示します。一方、エラーは範囲について結論を出していないことを示します。欄にはセレクターだけを入力してください。波括弧、セミコロン、カスタムプロパティ宣言、CSSルール全体は含めないでください。エスケープ文字、引用符で囲んだ属性値、属性セレクター、関数形式の疑似クラスは、字句分割中もまとまりとして保持されます。その内部のカンマや結合子を最上位の構文と誤認しません。アルゴリズムは決定的で、ネットワーク要求を行わず、入力長にも固定上限があります。そのため、lint工程、変更レビュー、デザイントークン移行スクリプトで利用しても、同じ組み合わせから常に同じ結果を得られます。高度な関係セレクターが実際のDOMでしか確定できない情報を含む場合は、範囲外という結果を慎重に解釈し、対象のマークアップでもご確認ください。

活用例

テーマトークンを監査する

テーマ変数を使うコンポーネントのセレクターが、テーマを有効化するセレクターの配下に保たれているか確認できます。

コンポーネント改修を確認する

名前変更や移動を行ったコンポーネントのセレクターが、カスタムプロパティを所有する構造上の接頭部を失っていないか検出できます。

トークン文書を検証する

デザインシステムのセレクター例を確認し、記載された利用方法と定義範囲の整合性を保てます。

よくある質問

真という結果は何を意味しますか？

有効な利用セレクターの各分岐が、少なくとも1つの定義セレクター分岐と同じ位置か、その構造上の配下にあります。

HTMLや計算済みスタイルも調査しますか？

いいえ。比較対象はセレクターだけです。文書状態、ソース順、レイヤー、Shadow DOM、明示的な上書きは結果に含まれません。

セレクターリストはどのように扱われますか？

定義側の分岐は選択肢です。全体が真になるには、カンマ区切りの利用分岐すべてが、少なくとも1つの定義分岐と一致する必要があります。

偽ではなく入力エラーになるのはなぜですか？

少なくとも1つのセレクターに構文上の誤りがあります。偽は、必要な範囲関係を示さない有効なセレクターに対してのみ返されます。

:rootでの定義はすべての利用を覆いますか？

はい。このツールでは、:root、html、ユニバーサルセレクターをグローバルな定義範囲として扱います。

APIリクエストの料金はいくらですか？

APIリクエスト1件の料金は$0.002です。ブラウザ版はAPIリクエストを行わず、ローカルで実行されます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/web/css-custom-property-scope-check

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/web/css-custom-property-scope-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"definition_selector":".theme-dark .card","usage_selector":".theme-dark .card > .title"}'

const res = await fetch("https://api.kit.forhosting.com/web/css-custom-property-scope-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "definition_selector": ".theme-dark .card",
    "usage_selector": ".theme-dark .card > .title"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/css-custom-property-scope-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "definition_selector": ".theme-dark .card",
    "usage_selector": ".theme-dark .card > .title"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-custom-property-scope-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"definition_selector":".theme-dark .card","usage_selector":".theme-dark .card > .title"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"definition_selector":".theme-dark .card","usage_selector":".theme-dark .card > .title"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-custom-property-scope-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "definition_selector": ".theme-dark .card",
  "usage_selector": ".theme-dark .card > .title"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.css_custom_property_scope_check",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`timeout_sec`	30
`max_crawl_pages`	25

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →