Webフォント人気に引きずられるようにtext-transoformプロパティもよく使われるようになってきました。SteelfishやFranchiseをヘッダや見出しで使って大文字にするとかよく見かけますね。そしてかっこいい。ですがその実装に違いがいくつかあることはあまり知られていないような気がします。ひとつはcapitalizeの挙動で、もうひとつはコピーした時の挙動です。
まずtext-transformプロパティの取りうる値について。
none- 何もしない。デフォルトの値。
capitalize- 語頭を大文字にする。
uppercase- 全て大文字にする。
lowercase- 全て小文字にする。
CSS3ではこれらに加えてfull-widthとfill-kanaという半角全角切り替えのための値を同時に指定することが出来るようになっていますが、今のところ実装がないので気にする必要はないでしょう。
capitalizeの扱いの違い
Demo: Test page for text-transform #1
違いが現れるのは単語同士をハイフンでつなげた場合です。ChromeやSafariのWebKit系とInternet Explorerではハイフンに続く文字も大文字になるのに対して、FirefoxとOperaでは大文字になりません。
語頭を大文字にする曲名や本のタイトルではハイフンに続く文字も大文字にしているケースが多いので、FirefoxとOperaの挙動がマイナーなようですね。
コピーされる文字列
Demo: Test page for text-transform #2
text-transformプロパティを適用した文字列をコピーした時に、クリップボードに入る文字列に違いが出ます。ChromeやSafariのWebKit系では見たまま、つまりuppercaseなら全て大文字化された文字列が入り、FirefoxとOpera、Internet Explorerでは元の状態の文字列が入ります。
こちらは表示には差が出ないのでもっと気づくことが少ないです。どちらかというと見たままコピーされるWebKit系の挙動の方がユーザーに優しいような気がします。
ちなみにfont-variantプロパティでsmall-capsを指定した文字列は似たような見た目にはなりますが、全てのブラウザで元の状態の文字列がコピーされます。
こういった基礎知識以上ベスト・プラクティス未満なネタをまとめたサイトを作ろうと画策しいるようなしていないような。