「behavior（.htc）」IE限定CSS機能 よさげなのピックアップ
- 投稿日 : 2007-07-21, 00:36
- 最終更新日時 : 2011-01-14 08:43:04（履歴）
- タグ（CSS）
- カテゴリ（Javascript）
- 記し人（luvsic）[PDF]
- 閲覧数（9144）
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が伸びたり切られたり）に困ったときは、３パターンの画像サイズ表示方法をそれぞれ用途に考えて、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
下記の３つができないのですが、それでもいいような気が・・・
- 角の半径が固定。
- 縦方向のpaddingが他ブラウザと異なってくる。
- 丸い角に沿ったborderを表示できない。
「round.htc」 border-radius + -moz-border-radius + (Nifty Corners * IE behavior)
ライセンス： Unknown
「:forcus」を実行するformFcs.htc
「input[type="text"]:focus」と、「textarea:focus」を実行する。
ユーザビリティに優しげな機能がIE6で使えないのにしょげかえって、しょうがないからどこかの英語ページを見ながら１から書いて自作した記憶がある。正直効率が悪そうな予感がするが関数とかわかりません。CSSに調整が必要だと思う、とりあえずIE6で出来ない下記のクラスタを使うことが可能になります。
input[type="text"], textarea {
color:#00f;
}
input[type="text"]:focus, textarea:focus {
background:#e7ffd7;
}
「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は切り捨てたい。
ライセンス：不明
リサイズ可能な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
What's up it's me, I am also visiting this site daily, this website is actually pleasant and the visitors are really sharing fastidious thoughts. afgkkggddagdeked
Smithd183, 2018-07-13 04:40 #