タグ: ie9.js

  • ie9.jsを使うと出来ること、出来なくなること。

    最近ie9.jsを活用することが少々あるので、
    いまさらながらまとめです。

    配布場所

    ie7-js
    http://code.google.com/p/ie7-js/で配布されています。

    デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。

    使い方

    head内に
    [html]
    <!–[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]–>
    [/html]
    と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。

    できるようになること

    E > F
    子セレクタ。直下の子要素にのみ適応するやつ。
    E + F
    隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素。
    E ~ F
    間接セレクタ。E以降の弟要素全て。
    .class1.class2
    クラスの重複指定
    :hoverの修正
    a以外にも効くようになります。
    [attr],[attr=”value”],[attr~=”value”],[attr|=”value”],[attr^=”value”][attr$=”value”],[attr*=”value”]
    属性セレクタ全般
    :before,:after
    擬似要素。
    :checked,:disabled,:empty,:enabled,:indeterminate,:first-of-type,:last-child,:last-of-type,:not(),:nth-child(),:nth-last-child(),:nth-last-of-type(),:nth-of-type(),:only-child,:only-of-type,:root,:target
    CSS3の擬似クラス
    opacity
    透明度がfilter要らずで効くようになります。もちろん内部的にはfilterを使っているのですが。
    article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video
    HTML5で追加された要素にCSSが当たるようになる。html5.jsとかhtml5shiv.jsを同時に読み込む必要はありません。
    透過PNGへの対応
    ファイル名をhoge-trans.pngにすると動作します。
    もしくは、
    [js]
    var IE7_PNG_SUFFIX = ".png";
    [/js]
    とすると全てのPNGに対して有効になります。

    出来なくなること。注意すべきこと。

    まぁ便利なのですが、そうそう美味いだけの話というのはなかなか無いもので。

    CSSハックが一部使えなくなる。

    個人的にはこれが一番大きいような気がします。

    • * html
    • *:first-child+html

    等のセレクタを使うようなハックは動作しなくなりました。まぁセレクタの挙動とかをFixするものなので当然なのでしょうけれど。。。
    なので、ただ読み込んだだけで全てがうまくいくようなものではないようです。

    重くなる

    ただでさえ、IE6等は重いのに、さらに重くなります。いまどきIE6が動いてるPCは古いですしね。
    特に、
    [js]
    var IE7_PNG_SUFFIX = ".png";
    [/js]
    等は全てのPNGが対象になるので、PNGをたくさん使うような場合はこの記述は避けたほうが懸命かと思います。

    :before,:after

    擬似要素を使うとき、どうやらここに1行分の高さを持った要素が生成されるようです。
    なのでclearfix等を擦るときはしっかりheight:0にしないとデザインがおかしくなることがあります。
    また、擬似要素を生成するとき、
    [html]
    <! class="ie7_class1">
    [/html]
    のような要素を生成するので、このクラスを指定してスタイルを当てることもたまには使えるかもしれません。

    新たに生成された要素にHTML5のタグがある場合

    Ajaxなどを使っている場合に起こるのですが、
    新しく生成されたHTML5要素には、やっぱりCSSが当たりません。
    この場合は、
    HTML 5 innerShiv
    http://jdbartlett.github.com/innershiv/
    などでやっつけるか、html5要素にcssを当てないだとか、html5要素をそこだけ避けるといったことが必要です。

    ザーッと書き並べてみましたけど、どうでしょう。
    自分が痛い目に合った記録みたいになってますね。

    Google AppsもIE7のサポート打ち切りを決めたようなので、早くIE8,IE9等に移行して頂ければ幸いです。切に願っています。
    Internet Explorer 8
    http://www.microsoft.com/ja-jp/windows/products/winfamily/ie/function/default.aspx

    Internet Explorer 9 のダウンロード
    http://windows.microsoft.com/ja-JP/internet-explorer/downloads/ie-9/worldwide-languages

  • ie9.jsが便利すぎる。

    ie7-js – Project Hosting on Google Code
    に有る、ie9.jsがとても便利です。

    js非表示のクライアントはどうするって話もあるので、それはCase by Caseってことで。。。。

    (さらに…)