ToolPipo

Web・通信・セキュリティ

CSS品質・複雑度チェッカー

CSSを貼るかファイルを1個入れるだけで、Specificity・!important・重複selector・複雑なruleを自動解析します。

  • ✓ 登録不要
  • ✓ ブラウザ内処理
  • ✓ Tool入力の外部送信なし

CSSを入力

.css、最大2MB。貼り付け・選択直後にブラウザ内で解析します。

処理範囲と入力データの取り扱い

CSSはブラウザ内だけで解析され、外部へ送信・保存されません。CSS内のURLへアクセスすることもありません。

CSS Specificityとは

ID、class・属性・pseudo-class、element・pseudo-elementの順でcascadeの優先度へ影響する指標です。本ToolではA-B-C形式で表示します。

:is / :not / :has / :where

:is()・:not()・:has()は引数selector listの最大Specificityを採用し、:where()自身と引数は0として計算します。

!important

常に悪いとは限りませんが、cascadeを確認するときに重要な情報のため、selectorとpropertyを一覧化します。

重複selector

同じselectorが複数ruleにある場合を表示します。意図的な上書きもあるため、自動的にエラーとは判定しません。

CSS複雑度

単一の絶対的な品質スコアでは判断できないため、rule、selector、Specificity、重複、at-ruleなどの個別指標だけを表示します。

よくある質問

CSSを自動修正できますか？

自動修正・整形・圧縮は行いません。

Specificityが高いと悪いCSSですか？

必ずしもそうではありません。設計に応じて確認する指標です。

CSS構文を完全検証できますか？

いいえ。ブラウザで扱われる一般的な構造を分析するToolで、公式validatorの代替ではありません。