背景を画像にしたボタンやタイトルを作るとき、テキストを中央に持ってくるのにpaddingを使うとブラウザによっては変形してしまうことがある。
そこで、paddingではなく、line-height と text-indent で対応してみる。
これで、タグを2重にしたりIEとCSSをわけたりしなくて済む。
しかし、titleなどで2行になるとダメダメ。
CSSの最近のブログ記事
XHTML1.0 TransitionalでPNGの半透明を使って、 Another HTML-lint で100点を取る。
簡単そうに見えて、意外と時間を費やしたのでメモ。
まずPNG半透明にはiepngfix.js を使う。
するとCSSの記述が
* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); } となるので、CSS validator でエラーとなってしまう。
そこでCSSを外に追いやってしまうのだが、下記のようにIEの分岐を使うと減点は0点だがエラーとなる。
それはそれで気持ち悪いので、javascriptで解決しようと思う。
<!--[if lte IE 6 ]> <script src="opt/iepngfix.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="opt/ie.css" media="screen" /> <![endif]-->
ブラウザの判定には、browserinfo.js を使ってみた。
<head>～</head>内に以下のように記述。
<script src="opt/browserinfo.js" type="text/javascript"></script> <script src="opt/switchinfo.js" type="text/javascript"></script>
switchinfo.js内には以下を記述した。
var bi = new BrowserInfo();
if( bi.ieVersion == 6 || bi.ieVersion == 5.5 ) {
document.write('<script src="opt/iepngfix.js" type="text/javascript"></script>');
document.write('<link rel="stylesheet" type="text/css" href="opt/ie.css" media="screen" />');
} これで、Another HTML-lint も CSS validatorもエラーが無くなった。
もう少し、省略できそうだがとりあえず問題は回避したからいいかな・・・
考えればなんとなしに動きが悪そうに思えるが、めくってみると意外にありかも！
ちゃんとめくれてるような気がするし、実装も簡単そう！
コアはjquery
prototype.js ばかり使っていて jquery を使った事が無いので、このへんでたしなんでみようかどうしようか。
でもきっと、やらないだろうな・・・
DEMOページ
ネタ元：Flashを使わないで本をめくる効果
ちゃんとめくれてるような気がするし、実装も簡単そう！
コアはjquery
prototype.js ばかり使っていて jquery を使った事が無いので、このへんでたしなんでみようかどうしようか。
でもきっと、やらないだろうな・・・
DEMOページ
ネタ元：Flashを使わないで本をめくる効果
