全部大文字のテキストに text-transform: capitalize が絶対に効かない理由

このように、text-transform: capitalizeは、全部大文字のテキストには効果がありません。

これは仕様通りの挙動です。

CSS 1 仕様書

'capitalize'
uppercases the first character of each word
Cascading Style Sheets, level 1

意訳： それぞれの単語の最初の文字を大文字にする。

CSS 2.1 仕様書

capitalize
Puts the first character of each word in uppercase; other characters are unaffected.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

意訳： それぞれの単語の最初の文字を大文字にする。それ以外の文字には影響しない。

CSS Text Module Level 3 仕様書（暫定）

capitalize
Puts the first typographic letter unit of each word, if lowercase, in titlecase; other characters are unaffected.
CSS Text Module Level 3

意訳： それぞれの単語の最初のtypographic letter unitが小文字の場合にそれを大文字にする。それ以外の文字には影響しない。

細かいことは違いますが、一貫して単語の1文字目にしか言及していないことが分かります。
つまり、全部大文字の単語の2文字目以降を小文字にする機能はtext-transform: capitalizeにはありません。

AngularのPipeとは挙動が違う

話が急にAngularへ飛びます。

Angularの標準のPipeである uppercase, lowercase, titlecaseは、表示でなく出力する文字自体を置き換える機能ですが、その変換の挙動はtext-transformと似ています。

• https://angular.io/api/common/UpperCasePipe
• https://angular.io/api/common/LowerCasePipe
• https://angular.io/api/common/TitleCasePipe

しかし、こちらの機能は2文字目以降にも影響してくれるため、

<p>{{ 'HELLO WORLD' | titlecase }}</p>

の出力は

<p>Hello World</p>

と同じになります。最近Angularをよく使っていたため、このtitlecaseの挙動がtext-transform: capitalizeと一緒だと誤解してしまっていた。

CSSだけで常にtitlecaseにする方法はまだない

.alternative-capitalize {
  text-transform: lowercase;

  &:first-letter {
    text-transform: uppercase;
  }
}

なお上記のようなコードで、1文字目だけを常に大文字化することは可能ですが、単語ごとに1文字目を大文字化することはやっぱり実装できません。

おわりに

何年CSS書いてるんだっていう感じですが、非常にベーシックなプロパティすら完全には把握していなかったのが残念でした。これからも謙虚な気持ちで学んでいきたいものです！