英文の先頭だけ大文字で、他は小文字にする場合のCSSでのやり方を質問されて、
text-transform で一発やんけと思ったけど、そうでも無く考えさせられたのでメモ。 (後半ポエム)

text-transform とは

HTMLに記述されている英文の表示を、大文字/小文字を指定するためのCSSプロパティです。

元ソース(html)

<h1>May the FORCE be with you.</h1>

|CSS|意味|表示|
|:----|:----|:----|:----|
| h1 { text-transform: none; } | 記述そのまま | May the FORCE be with you. |
| h1 { text-transform: uppercase; } | すべて大文字 | MAY THE FORCE BE WITH YOU. |
| h1 { text-transform: lowercase; } | すべて小文字 | may the force be with you. |
| h1 { text-transform: capitalize; } | 単語の先頭だけ大文字 | May The Force Be With You. |

文頭だけ大文字にするには？

text-transform: capitalize; だと、文中の各単語の頭文字が大文字になってしまう。
冒頭の「文の先頭だけ大文字にする」には以下のようにする。

css

h1 { 
  text-transform: lowercase;   /* 全体を小文字にリセット */
}

h1::first-letter {
  text-transform: capitalize;  /* 先頭文字だけ大文字化 */
}

まず当該のセレクタ全体に対し、 lowercase で全体を小文字にリセットし、 ::first-letter 疑似要素で先頭だけ capitalize する。

|CSS|意味|表示|
|:----|:----|:----|:----|
| 上記 | 文頭の1文字だけ大文字 | May the force be with you. |

text-transform と ::first-letter は、ほとんどのブラウザでサポートされているが、 IE8以前のIEではCSS2時代のシングルコロンの疑似クラスしか受けつけないので注意。

考察

1. 手法の妥当性

上述の通り text-transform を使用して大文字/小文字表示のある程度のコントロールは効く。
しかしこの手段は「どうしても」という時に使う程度に考えておき、
実際表示されたい様にHTMLにもともと記述するのが本来的であると考える。

※ 例えば、上記の方法だと「I AM SAM.」の場合に「I am sam.」となってしまい、期待値の「I am Sam.」が実現できない。

2. セマンティクス(意味性)

次にこの手法がアクセシビリティやセマンティクスの面でHTMLの品質に与える影響を考える。

F2: 達成基準 1.3.1 の失敗例－適切なマークアップ又はテキストを用いずに、テキストの見た目の表現の変化を用いて情報を伝えている | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/F2.html

上のページの「失敗例3」では、強調するために span class="yell" などのマークアップをし、text-transform を使用している例があるが、このように強調目的で表現する場合には strong や em など「強調」というセマンティクス(意味性)を持つタグでマークアップする方がHTML５としては本来的だ。

3. アクセシビリティ

次にアクセシビリティの観点でこの手法がいいのかを考えてみた。

コードとして

CSSで文字情報の内容や見た目を操作するもの（例えば ::before 擬似要素に content プロパティでテキストを出力するような方法）は、感覚的にアクセシビリティ的によろしくないのかな、と思い込んでいたが、以下を読む限りそうではなさそう。

C22: テキストの視覚的な表現を制御するために、CSS を使用する | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/C22.html

※もちろん ↑の content の例は言語に依存したテキスト情報をCSS側にハードコードするという点でメンテナブルではなく、HTML/CSSの棲み分けとしても気持ちがわるい。
（そういう場合は自分だったら content: attr("data-***"); とかで情報をHTML側に集約させるとか？）

可読性として

というかアクセシビリティという点で言えば、「可読性」(読みやすさ) がそもそもの論点か。
大文字の方が読みやすい(例えば略語など)で、局所的に uppercase をかけるというなら妥当かと思うが、
であればもともとHTMLにそのように記述するのがやはり本来的。

音声リーダー対応

強調ないし装飾の目的でHTML上、全てを大文字に記述してしまうと、音声リーダーの読上げが期待値通りにならないという点も紹介されていた。

NG

<span>FORCE</span>       <!-- 読上げ "エフオーアールシーイ―" -->

OK

<span>Force</span>       <!-- 読上げ "フォース" -->

この問題を回避する場合、CSS側で見た目上 uppercaseにする方法が妥当。

<span style="text-transform:uppercase">Force</span>

↑の方法であれば視覚的に「FORCE」と表示し、音声リーダーは「フォース」と読んでくれる。

参考
アクセシビリティガイドライン > 39. ユーザーが一般的に理解できる外来語・外国語を除き、外国語を必要以上に用いない... ：三井住友銀行
http://www.smbc.co.jp/accessibility/guidelines/guideline_39.html

まとめると、特段意味がなく装飾だけの目的で大文字/小文字のCSS操作をする際には、視覚的に読みづらくなってないかを考慮し、する場合は音声リーダのことも考えると良い。というところか。