透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ

Ads

IE6のPNG透過や6、7での
角丸、ドロップシャドウを実装
するjsライブラリのまとめです。
同じ用途でもライブラリによっ
て良し悪しだと思いますので、
備忘録的にメモ。

もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。

IE7.js

ie-js01

IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。

IE6以下をWeb標準に準拠させるライブラリ『IE7.js』

DD_belatedPNG.js

ie-js02

IE6でも透過PNGを実装できるライブラリ。class名等を指定します。リピートにも対応。

IE6用透過png対応策、DD_belatedPNGの使用法と注意点
合わせて読みたい:DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする

iepngfix.js

ie-js03

こちらも透過を実現できるライブラリです。

IEPNGFIX の Tips 1 改訂版 + バージョンアップ
合わせて読みたい:IE PNG Fixを使ったら、クリックできない
合わせて読みたい:iepngfix.jsで透過PNGの×印を消す方法

Unit PNG Fix

ie-js04

2KBの超軽量PNG透過ライブラリです。gifをあわせて使います。

超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix

IE-CSS3.htc

ie-js05

同じくコリスさんよりドロップシャドウと角丸をIEでもcssで実装するライブラリ。htcファイル自体もcssに記述します。

IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3

jquery.pngFix.js

ie-js06

jQueryをサイトで使用しているならこちらのプラグインもいいかもですね。

半透明ボックスに関するメモ
合わせて読みたい:jquery.pngFix.js で画像のサイズが大きくなるバグの解決方法

curvyCorners.js

ie-js07

角丸を実装するスクリプトです。jsがオフでも角丸にならないだけでレイアウトは保てるのはいいですね。

IE6でも簡単に角丸ボックスが作れるJavaScript – 「curvyCorners」
合わせて読みたい:jQuery.curvyCorners 使用における問題点

jquery.corners.js

ie-js08

角丸にもjQueryを使いたいならこちらのプラグイン。オプションもあります。

角丸を簡単に表現する「 jQuery Canvas Rounded Corners」

uuAltCSS.js

ie-js09

かなりマルチに対応してくれるライブラリ。サポートブラウザも多いのでぜひチェックしてみてください。

uuAltCSS.js

jquery.curvycorners.packed.js

ie-js10

こちらもjQueryで角丸を、というプラグインです。

jQueryを使って簡単に角丸を作れるjQuery curvyCorners

border-radius.htc

ie-js11

css3で作る角丸をIEにも対応させるライブラリ。検証結果を記事にしてくれていますよ。

border-radius.htc使ってみた

jquery.dropshadow.js

ie-js17

ドロップシャドウを実装できるjQueryプラグインです。

jQueryでドロップシャドウを表現する「Drop Shadow Effect」
合わせて読みたい:jquery.dropshadow.jsがIEではdivタグに適用出来ない問題

ShadedBorder.js

ie-js12

角丸とドロップシャドウを実装できるスクリプト。記事が書かれた時点ではかなり重くなってしまうとの事です。現在はどうなのかな?

JavaScriptで角丸とドロップシャドウを実現するShadedBorder.js

jQdrop.js

ie-js13

テキストシャドウを実装する、わずか1KBのjQueryプラグインです。サクッと導入できるので嬉しい。

お手軽ドロップシャドウテキスト jQdrop.js

exFixed.js

ie-js15

表題にはあげていませんが、IE6でposition:fixedを利用した時の不具合を解決できるjQueryプラグイン。

IE6 position:fixed の諸問題を解決する jQuery.exFixed.js

csshover2.htc

ie-js16

IE6では対応していない擬似クラスに対応させます。:hoverがアンカー以外で使えれば表現も広がりますね。

IE6でhover,active,focus擬似要素を使う為の「csshover」

こうまでして角丸やドロップシャドウを使いたいのか、とも思いますが、需要があるので仕方ないですね。。

未検証のものもありますので何か間違いありましたらご指摘頂ければ幸いです。MSはとにかくブラウザを新しくする前に古いブラウザのユーザーにアップデートをしてもらう方法を考えて欲しいです・・