CSS識別子と文字列のエスケープシーケンス

CSSエスケープシーケンス

CSSにはHTMLやJavaScriptとは異なる独自のエスケープルールがあります。エスケープが必要なコンテキストは2つ：文字列値（"..." や '...'）内と、識別子（クラス名、ID、プロパティ名）内です。

CSS識別子でのエスケープ

CSS識別子（クラス名、ID、カスタムプロパティ名）には厳格なルールがあります。識別子は数字で始めることができず、多くの特殊文字はエスケープなしでは使用できません。エスケープ構文はバックスラッシュの後に文字を続けます。

識別子でのUnicodeエスケープ

CSSはバックスラッシュの後に1-6桁の16進数とオプションの末尾スペースによるUnicodeエスケープをサポートします。

CSS文字列値でのエスケープ

クォートで囲まれた文字列内で、CSSは以下を認識します：

\\"   → リテラルダブルクォート
\\'   → リテラルシングルクォート
\\\\   → リテラルバックスラッシュ
\\n   → 改行（contentプロパティ等で使用）
\\A   → 改行（U+000Aの16進エスケープ）
\\HH  → 16進コードポイントによる任意のUnicode文字

JavaScript: CSS.escape()

CSS.escape() APIはプログラム的に識別子のエスケープを処理します：

CSS.escape("1st-item")     // "\\31 st-item"
CSS.escape("my:id")        // "my\\:id"

// querySelectorでの使用：
document.querySelector(`#${CSS.escape(userInput)}`);

CSSエスケープが重要な理由

CSS.escape() なしで動的に構築されたセレクタにユーザー入力が含まれると、破損したり悪用されたりする可能性があります。

CSSカスタムプロパティでのエスケープ

カスタムプロパティ（--*）は受け入れる文字がより寛容ですが、calc() や url() で使用される値は標準のエスケープルールに従います。