border-radius.htc使ってみた

#guide {
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    behavior: url(border-radius.htc);
}

けど、なんか動かない。

地道に調べた結果、html { background-color: #000; }が干渉していたらしい。

これを消すと動くし、消してもそれほど問題のないプロパティだったのだけど、使わないことにした。

その理由はともかく、わかったことをメモ。

behaviorとは

IE独自の、htcファイルをcss中に仕込み、javascriptで記述された操作を実行する仕様。

詳しいことは知らんけど、何でもあり?

すごいような気もするけど、たかがcssのプロパティ1つのためにこんなごついものを触りたくない。

円の半径

htcはjavascriptで書かれたものなので覗けば読める。

そこで、円の半径を取得する部分のコードはどうなっているかいうと、こんな感じになっている。

  1. -moz-border-radiusの値を取得。(たぶん一項目だけ)
  2. なければ(0でも)-webkit-border-radiusの値を取得。(たぶん一項目だけ)
  3. なければ(0でも)border-radiusの値を取得。(たぶん一項目だけ)
  4. なければ(0でも)-khtml-border-radiusの値を取得。(たぶん一項目だけ)

というわけで、角丸の半径は四隅すべて同じになる。

ついでに他のブラウザ用に四隅別々に指定していても、一項目しか取得できなそうだから、左上分が0pxだと結局0px。

四隅でひとつの値しか指定できないのは、ボックスが外縁に接しているならそこに潜り込ませたりすればなんとかできることもある。

border-radiusの適用されたボックスを重ねると

filter: alpha(opacity:N)が利かない。

背後のボックスと融合し、文字とかすげえ重なる。つまりfilter: alpha(opacity:0)と同じことに。

これはつらい。頑張ればなんとか出来るかも?


飽きたのでここまで。

まとめ

  • 単純な指定で、かつ重ねないなら使える。
  • スタイルシート側でIEを吸収できるのは感動的。

参照

Curved corner (border-radius) cross browser | HTML Remix

One Comment

  1. Posted 2017年9月8日 at 8:39 PM | Permalink

    So to be able too confiem the standards are met, homes
    made must reach the dedicated practices of energy effectiveness, conservation,
    prevention of pollution, comfort and in many cases the affect the environment.
    The downside is thgat all flowers handle preservative that
    well, so make sure you read any instructions that include the preservative.
    The kids enjoy making them as well as of all you can even rely on them as
    decorations for your classroom or in your own home.

5 Trackbacks

  1. [...] にも対応させるライブラリ。検証結果を記事にしてくれていますよ。 border-radius.htc使ってみた [...]

  2. By 前回の補足 | KUJIRA note on 2010年9月15日 at 10:08 AM

    [...]  詳しくはこのページをご覧ください。 [...]

  3. [...] りもしない。border-radius.htc使ってみた [...]

  4. [...] [border-radius.htc使ってみた – 放置演算子] [...]

  5. By www.ninjavouchers.co.uk on 2016年10月16日 at 2:13 PM

    http://www.ninjavouchers.co.uk

    border-radius.htc使ってみた – 放置演算子

Post a Comment

Your email is never shared.

引く

PageTop