雑記

◆ [tDiary][CSS] IEでborder-radiusをがんばる

たださんのこのエントリを見てグスタフかわえぇじゃなかった角が丸いだけで印象がずいぶん違うことに感動したんですが、仕事でも使おうとしたらIEは避けられないよなということで調べてやってみたらいろいろ大変だったのでメモ。

まず、border-radiusには他の主要なブラウザは対応しているのに、IEだけが対応していません。IE9では対応するようですが、さすがトップシェアというか、待ちきれない有志によりIE特有の機能を逆手に取ったハックが公開されています。

このハックの基本的な使い方としては、ダウンロードページから落としてきたborder-radius.htcをcssを記述したファイルと同じディレクトリにコピーし、

.curved {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -khtml-border-radius:10px;
  border-radius:10px;
  behavior:url(border-radius.htc);
}

といった感じのクラスの記述をしておいて、HTMLファイルで

<div class="curved">Curvd div</div>

のように書くだけだそうです。

htcファイルのソースを読むと、

1. border-radius系の属性値から角の円弧のサイズを求める
2. いったん背景を透明にする
3. 処理中の要素のすぐ下(zIndex - 1)に丸角のboxを描く

という処理をやっているようですが、要素が入れ子になったりして複雑な構造になると、処理の途中で失敗して透明になってしまうケースにいくつか遭遇しました。以下に原因と対処を列挙します。

• 外側の要素で不必要な「position:relative;」が指定されている^J→position指定を削除
• 外側の要素に丸角ではないborderがある^J→丸角にしない要素でもbehaviorを指定した上で、背景色と同じにする
• 印刷時に必ず透明になる^J→@media printで背景を強制指定(丸角ではなくなる、印刷については他のブラウザでもいろいろ不具合あり)
• ブラウザの幅を変えたらリロードする必要あり^J→仕様ですということで。

この雑記は、Gardeniaテーマをappend-cssプラグインで上書きして使っていますが、以下のような記述で実現しています。

  div.leftsidebar {
     :
    background-color: #D0FFD0;
    border-color: #D0FFD0;
    behavior:url(border-radius.htc);
  }
  div.leftsidebar h3 {
      :
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    behavior:url(border-radius.htc);
  }
  div.day {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc);
  }
  @media print {
     :
    div.day {
      background-color: #FEFEE9 !important;
      border: #007900 1px solid !important;
    }
  }

ついでに、

  @media print {
    div.leftsidebar { display:none; }
    div.calendar { display:none; }
    div.refererlist { display:none; }
    div.comment { display:none; }
    div#comment-form-section { display:none; }
    #twitterFollowBadge { display:none; }

    div.rightmain {
      margin-left:0 !important;
      width:100%;
    }
  }

という指定も追加して、印刷時には余計な要素を消して、用紙幅いっぱいに本文が印刷されるようにしてみました。

.green. ====