「behavior(.htc)」IE限定CSS機能 よさげなのピックアップ

behavior(ビヘイビア。ファイル化の場合、拡張子は.htc)

IE5.0以上のみ対応する独自CSS機能で、CSSからJavascriptによく似たJscriptを実行することができる。CSSプロパティにて、IE7では実装されてるけどそれ未満のバージョン(IE6など)では実装されてない場合に使用するケースが特に有用な存在となり、時代遅れゆえにちょっとだけ脚光を浴びてます。

記述例はこんな感じ、めちゃ楽。

body {
behavior:url(csshover2.htc);
}

expression系は、処理によってブラウザの動作を遅くするのですが、「まあCSSの切り分けでIE6のみに読み込ませて、他のモダンブラウザはサクサク動ことだしいいんじゃないの」みたいな存在感があります。



「透過PNG(アルファチャンネルPNG)」をちゃんと表示するiepngfix.htc

このビヘイビアは2006年12月頃にはやって、IE7に実装決まって需要が高まったのが理由みたい。

IEでアルファチャンネルPNGを表示する (iepngfix.htc) - youmos

ライセンス:LGPL 2.1

A要素(Aタグ)、つまりリンクが押せない、きかないという問題がある。A要素に「position:relative;」を指定する、または「background:transparent;」とすれば押せるケースがあるけど、経験上ではabsoluteの中のrelativeの中でrelative指定みたいに、入れ子にすると回避が難しくなる。解決法はこちら

画像サイズ(width・heightが伸びたり切られたり)に困ったときは、3パターンの画像サイズ表示方法をそれぞれ用途に考えて、htcのコピー別ファイルを作って「crop,image,scale」の値で使い分けるのもよし。

「:hover」を実行するcsshover2.htc

クラス名が変わってしまう仕様なので、csshover.htc を使うと ~onhover といったクラスが裏で追加される - れぶろぐ (2008-01-11)を読んでおくこと

DIGITAL NOTE BOOK/script || IE BehaviorやLightboxなどの導入方法

ライセンス:LGPL 2.1

「border-radius」に似た角丸効果を実行するround.htc

下記の3つができないのですが、それでもいいような気が・・・

  • 角の半径が固定。
  • 縦方向のpaddingが他ブラウザと異なってくる。
  • 丸い角に沿ったborderを表示できない。

「round.htc」 border-radius + -moz-border-radius + (Nifty Corners * IE behavior)

ライセンス: Unknown

「:forcus」を実行するformFcs.htc

「input[type="text"]:focus」と、「textarea:focus」を実行する。
ユーザビリティに優しげな機能がIE6で使えないのにしょげかえって、しょうがないからどこかの英語ページを見ながら1から書いて自作した記憶がある。正直効率が悪そうな予感がするが関数とかわかりません。CSSに調整が必要だと思う、とりあえずIE6で出来ない下記のクラスタを使うことが可能になります。

input[type="text"], textarea {
color:#00f;
}

input[type="text"]:focus, textarea:focus {
background:#e7ffd7;
}

ダウンロード:formFcs.htc

「min-width」と「max-width」を実行するiefixed.htc

サイズ指定はpx単位限定。

ieFixed HTC - min-width max-widthをIE6で利用する - youmos

ライセンス:Creative Commons Attribution-NonCommercial License.

CSS3の「box-sizing」を実行するboxsizing.htc

コーディングは楽そうだけど、これが標準実装される頃にはIE6は切り捨てたい。

Box Sizing Behavior (WebFX)

ライセンス:不明

リサイズ可能なdivを作り、内包する要素をリサイズ可能にするresizable.htc

結構すごいアイデアだと思う・・・動画とかもこれでリサイズできないかなー。

Mugi's Homepage(※現在リンク切れ。The Internet Archiveからのみ入手可能)(2007、7/21 時点の確認)

ライセンス:コードに該当著作者であることが明記されていること(2007、7/21 時点の確認)

border-radius、box-shadow、border-image、-pie-background、-pie-watch-ancestorsのプロパティ、rgba color、gradientsを実行する CSS3 PIE

CSS3でよく使われる機能をビヘイビア化したスクリプト。

  • border-radius・・・角丸とか
  • box-shadow・・・レイヤなどにドロップシャドウみたいな
  • border-image・・・ボーダーに背景画像指定できる
  • -pie-background・・・これにgradientsを併用してグラデーションをかけたり、rgba colorを利用したりできるるぽい
  • pie-watch-ancestors・・・PIEでの独自実装機能。Documaintationでは「親要素のクラス名が変更されたときに正しくレンダリングする」ぽいことが書いてあるように読めたがはてさて。Javascriptなどで動的にクラスが変更されたときに、IE6~7で再レンダリングされない問題があるのかな、なんて思いました。

Supported CSS3 Features – CSS3 PIE: CSS3 decorations for IE

参考URL
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%62%30%63%37%33%62%63%34%64%30%65%64%38%63%33%64%36%34%34%65%36%34%65%30%32%61%66%31%32%34%38%65%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%32%65%66%64%33%63%64%38%34%61%64%62%65%66%37%37%35%65%62%61%66%64%39%34%33%31%66%62%39%66%39%64%22%3e
© 2006 – 2014 by Luvsic. Some rights reserved.