[css]font-sizeのパーセント表記一覧（改）

まずは元ネタのエントリを紹介します。
font-sizeのパーセント表記一覧 - Webtech Walker

クロスブラウザ（主にIE達）対応の可変フォントCSSを組むのに役立つ素晴らしいエントリだったので、元記事はそのままにちょっと修正したいところをこちらのエントリで紹介したいと思います。
修正したところでまだ、問題はあるんですがとりあえずエントリを上げちゃおうということにしました。（出勤しなきゃいけないので修正は後日）

元エントリを参考にベースフォントサイズ12〜16pxまでCSSをまとめてgithubに置きましたので、ご自由にお使いください。
ダウンロード
変なところがあれば随時修正していきます。

動作確認したブラウザは次の通りです。
Mac OS 10.7
・Safari 5.1
・Chrome 19
・Firefox 12

Windows XP
・IE8
（肝心のIEチェックが疎かじゃんとかいいたいと思いますが、後日修正アップします汗）

現状の問題点
IE8で「文字サイズの変更」に非対応です。IE8でズームすると、フォントサイズが小さく表示される箇所があります。これはなんとかしたいね。

もうちょっと丁寧なエントリにしたかったんですが、ごめんなさい。
ダウンロード

あと言ってみたかった台詞があるので言ってみます。
Fork me on github!!

[CakePHP1.3]FormHelperが出力する必須項目*について

重い腰を上げてCakePHP1.3.3をダウンロードして使い始めました。
Scaffoldビューのリンクやボタンが角丸になっているなど、CSS3をふんだんに使っているようです。
（ぱっと見で）

とりあえず、Formヘルパーを使ってログイン画面を作ってみたところ、少し不都合な事実に気づいてしまいました。

// views/users/login.ctp
echo $form->create('User', array('action'=>'login');
echo $form->input('User.username');
echo $form->input('User.password');
echo $form->end('ログイン');

モデルで必須項目に設定した項目のラベルが太字と*印（アスタリスク）で表示されています。
注意書きで「*印は必須項目です」と書こうとしたのですが、CSSを良く見ると*は:after疑似クラスで表示されている模様。

/* cake.generic.css L269 */
form .required label:after {
 color: #e32;
 content: '*';
 display:inline;
}

これではIE6はもちろんの事、IE7でも*が表示されません。
IE7以前で*を表示するなら別の方法を考えないといけませんね。
CSSからcontent: '*';を削除して、必須のラベルに手動で*を表示するとか。

CSS2.1に完全準拠していないブラウザからのアクセスを想定するサイトを構築する際には、ちょっと注意しましょう。

いっその事「IE7以前はサポート外です」と表示するか（笑）

（余談）
「FormHelperが出力する必須項目*について」というタイトルにしましたが、*は別にFormヘルパーが出力してるわけでは無いです。
<div class="input text required">というタグを出力しているだけです。
完全にcake.generic.cssの話ですが、私は最初、*印はFormヘルパーが出力していると勘違いしたので、こんなタイトルにしました。