読者です 読者をやめる 読者になる 読者になる

Progressive Enhancement 的角丸

HTML CSS IE
<div class="setsumeibun">
  <h3>説明とは</h3>
  <p>説明です。</p>

<!-- コメントが、記事個別ページだと消えるのはなぜ…。 -->
<!--[if lt IE 8.0]>
<img src="7x7_eee_fff.gif" width="7" height="7" alt="" style="position:absolute; left:0; top:0;"/>
<img src="7x7_eee_fff.gif" width="7" height="7" alt="" style="position:absolute; right:0; top:0; filter:fliph();"/>
<img src="7x7_eee_fff.gif" width="7" height="7" alt="" style="position:absolute; right:0; bottom:0; filter:fliph() flipv();"/>
<img src="7x7_eee_fff.gif" width="7" height="7" alt="" style="position:absolute; left:0; bottom:0; filter:flipv();"/>
<![endif]-->
</div>
.setsumeibun {
position:relative;
width:600px;/*指定しないとIE6でpaddingとabsoluteがうまくかみあわん。*/
padding:10px 5px;
margin:15px;
background:#eee;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}

※HTMLのコメントは記事の個別ページだと消えるんですね…。なぜ…。HTMLの中にコメントが見えなければ日別ページかトップを見てください。

IEで使ってる画像はサンプルないですけど、左上が欠けてる(背景色になってる)画像で、あとはフィルタで回して流用。

Firefox3/Safari3/IE6/IE7 でみれた。わーい。画像一個しか使ってないのが良いかなとか思うわけです。ビヘイビアとかJavaScriptで後から差し込んでもいいかなあ。

何?要素が増える?。IEだけに出力される上のimgタグ四つが現実のアクセシビリティをどんだけ損なうか…。自分には、それって極小さいでしょとしか評価できないっす。

さらに角丸領域に内容が食い込めないとか色々ありますが、バランスで。対応外環境でも背景色やpaddingが生きてるので、まま、角がとがってるだけでデザインは大きく崩れないし、なにより気軽に使えていいかなーと、今日思いました。さまざまな障害は Jeremy Keith さんに習った魂でなんとかひとつ Progressive に乗り越えてゆきたい!