「SlickMap CSS」をいじってみました
IDEA*IDEAさんで紹介されていた「SlickMap CSS」というのが結構すごいですね。ただ、ファイルをダウンロードして「README.txt」を読んでも分かるように、完全にIE6を無視したCSSとなっています。
同じく「README.txt」の中には「SlickMap CSS is free of charge, free to share, and free to modify.
」ともありましたので、なんとかIE6でも大丈夫なようにしてみました(どうしても第3階層のリンクにカーソルオンしたときに、その下にある第2階層のリンクが上下にガクガクしてしまうのが対応できませんでした。分かる方いらっしゃいましたらツッコミお願いします。)。
SlickmapCSS-forIE6.zip(39KB)
マツダさんからコメントいただきちょっとバージョンアップしました。少しデザインが変わっていますが、ガクガクするよりはこちらの方が良いでしょう。
SlickmapCSS-forIE6-v1.1.zip(39KB)
以下変更点です
- 透過PNGに対応するために「IE PNG Fix」を利用
- 「:first-child」「:last-child」疑似クラスを利用していたので、これらをクラスセレクタへ変更。HTMLでアナログにclassを付けても良かったのですが、面倒だったので「yuga.js」を利用。
- 「:before」疑似要素でa要素のhref属性(リンク先へのパス)を出していましたが、別にいらないなーということで削除。
- IE6用にmarginなどの調整。各a要素にハイライトとなるグラデーションの透過PNGが指定されていましたが、IE PNG Fixを利用して強引に対応しているからなのか、しっかりとハイライトが出なかったのでIE6では消してしまいました。また、角丸やシャドウはIE6では無視しました。
先に書いたガクガクしてしまう症状はどうにかしたいなーという思いですが、角丸やシャドウがFirefoxなどと違うのはまぁアリかなという印象です。今までプログレッシブ・エンハンスメントはどうかなーとか思っていましたが、このくらいはクライアントさんが納得してくれれば良いですよね?
TrackBack URL :
comment