<custom-ident>

<custom-ident> は CSS のデータ型で、識別子として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

構文

<custom-ident> の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が異なります。これは 1 文字以上の下記の文字のから成ります。

  • 任意のアルファベット (A-Z, a-z)
  • 任意の数字 (0-9)
  • ハイフン (-)
  • アンダースコア (_)
  • [エスケープ文字] (バックスラッシュ \ に続く)
  • Unicode 文字 (バックスラッシュ \ と、それに続く 1 - 6 桁の 16 進数の形式で Unicode コードポイントを表す)

なお、 id1、Id1、iD1、ID1 は大文字と小文字を区別するため、すべて異なった識別子として扱われます。

エスケープ文字

あらゆる Unicode コードポイントを <custom-ident> や引用 <string> の一部として、エスケープすることで含めることができます。

CSS では、文字をエスケープする方法がいくつかあります。エスケープシーケンスはバックスラッシュ (\) で始まり、以下のものが続きます。

  • 1～6 桁の 16 進数 (ABCDEF0123456789)。 16 進数にはオプションで空白が続くこともあります。 16 進のエスケープシーケンスは、この数字で指定された値の Unicode コードポイントに置き換わります。空白は、シーケンスの後に実際の 16 進数を（置き換えることなく）続けることを可能にします。
  • 16 進数でも改行文字でもない Unicode コードポイント。

例:

  • "&B" は \26 B または \000026B と書くことができます。
  • "hi.there" は hi\.there または hi\002Ethere と書くことができます。
  • "toto?" は toto\?, toto\3F, toto\00003F のように書くことができます。

エスケープシーケンスの後に実際のホワイトスペースを含める場合は、エスケープシーケンスに 2 つのホワイトスペースを入れてください。

禁止されている値

<custom-ident> を引用符または二重引用符の間に置いてはいけません。こうすると、 <string> として識別されてしまいます。さらに、先頭の文字は、数字や、ハイフン (-) に数字が続いたものであってはなりません。

曖昧さを避けるため、 <custom-ident> を使用する各プロパティでは、特定の値の使用が禁止されています。

animation-name

グローバル CSS 値 (unset, initial, inherit) を禁止し、 none も禁止しています。

counter-reset, counter-increment

グローバル CSS 値 (unset, initial, inherit) を禁止し、 none も禁止しています。

@counter-style, list-style-type

グローバル CSS 値 (unset, initial, inherit) と、次の値を禁止しています。

  • none
  • inline
  • outside

また、さまざまなブラウザーで、いくつかの定義済みの値が実装されています。

  • disc
  • circle
  • square
  • decimal
  • cjk-decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-alpha
  • lower-latin
  • upper-alpha
  • upper-latin
  • arabic-indic
  • armenian
  • bengali
  • cambodian
  • cjk-earthly-branch
  • cjk-heavenly-stem
  • cjk-ideographic
  • devanagari
  • ethiopic-numeric
  • georgian
  • gujarati
  • gurmukhi
  • hebrew
  • hiragana
  • hiragana-iroha
  • japanese-formal
  • japanese-informal
  • kannada
  • katakana
  • katakana-iroha
  • khmer
  • korean-hangul-formal
  • korean-hanja-formal
  • korean-hanja-informal
  • lao
  • lower-armenian
  • malayalam
  • mongolian
  • myanmar
  • oriya
  • persian
  • simp-chinese-formal
  • simp-chinese-informal
  • tamil
  • telugu
  • thai
  • tibetan
  • trad-chinese-formal
  • trad-chinese-informal
  • upper-armenian
  • disclosure-open
  • disclosure-close
grid-row-start, grid-row-end, grid-column-start, grid-column-end

span 値を禁止しています。

view-transition-name

グローバル CSS 値 (unset, initial, inherit) および none の値を禁止しています。

will-change

グローバル CSS 値 (unset, initial, inherit) および will-change, auto, scroll-position, contents の値を禁止しています。

例

有効な識別子

nono79            アルファベットと数字の組み合わせ
ground-level      アルファベットとダッシュの組み合わせ
-test             ダッシュとそれに続くアルファベット
_internal         アンダースコアとそれに続くアルファベット
\22 toto          Unicode 文字とそれに続くアルファベット
bili\.bob         ピリオドが正しくエスケープされている

無効な識別子

34rem             数字で始まってはいけない
-12rad            ダッシュで始まって数字が続いてはいけない
bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけ
'bilibob'         <string> になります
"bilibob"         <string> になります

仕様書

Specification
CSS Values and Units Module Level 4
# custom-idents
CSS Will Change Module Level 1
# valdef-will-change-custom-ident
CSS Counter Styles Level 3
# typedef-counter-style-name
CSS Lists and Counters Module Level 3
# counter-properties

ブラウザーの互換性

このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。

関連情報