IE8での変化点一覧 + 備忘録
IE8 ではかなりの数のメソッドやプロパティが増えているようです。書き残します。
element.getAttribute について追記しました。
window.toStaticHTML
window.toStaticHTML は、XDomainRequest や postMessage で受け取った文字列(HTML)をサニタイズ(消毒)するメソッド。
XHRやJsonで受け取った文字列のサニタイズにもシーンを選べば使えるのだろうか。
- onclick等のイベントハンドラ系を潰す。
<div onclick="alert('hoge')">hoge</div>
↓
<div>hoge</div>
- scriptタグを潰す。
<script>alert("hoge")</script>
↓
無かったことになる
- CSS::expressionを潰す
img { expression(uuClass.IEBoost.AlphaPNG._expression(this)) }
img { behavior: expression(uuClass.IEBoost.AlphaPNG._expression(this)) }
div img { behavior: expression(uuClass.IEBoost.AlphaPNG._expression(this)); color: blue; }
↓
img {;}
img {;}
div img { color: blue; }
- なんか色々潰す
<?IMPORT namespace="t" implementation="#default#time2"> <v:rect id="rect1" style="..."></v:rect> <t:animate /> ↓ 無かったことになる
- オレオレマークアップを潰す
<div>hoge</div><oreore:hoge>hoge</oreore:hoge> ↓ <div>hoge</div>hoge
- 壊れたマークアップはエンティティ化して無害化する
<div>hoge</div<oreore:hoge>hoge</oreore:hoge> ↓ <div>hoge</divhoge 細工は無駄x3 <scr<oreore:hoge>ipt</oreore:hoge>> ↓ <script>
<a href="http://example.com/" title="hoge">clickme</a> <a href="javascript:alert(document)" title="hoge">clickme</a> ↓ <a href="http://example.com/" title=hoge>clickme</a> <a title=hoge>clickme</a>
Quirks Mode だろうが、IE8モードだろうが XHTML1.0だろうが関係なく、title="hoge" を title=hoge に改変してくるし、hrefを属性ごとたたき落とす(href=""で十分なのに)。これはXHTML的にまずいので、ぜひ修正してもらいたい。
- おまけ
<input type="button" value="hoge"/> <input type="button" value="hoge"></input> <hr/> <br /> ↓ <input type=button value=hoge> <input type=button value=hoge> <hr> <br>
toStaticHTMLはホワイトリストで管理しているように見えるけど、expressionへの対応を見たかぎりじゃ、文脈的に正しくなくても潰しにかかるみたい。
IE8で追加されたイベント
- onhashchange
- onoffline
- ononline
- onstorage - DOM Storage
- onstoragecommit - DOM Storage
- XMLHttpRequest.ontimeout
var xhr = new XMLHttpRequest();
xhr.timeout = 2000;
xhr.ontimeout = function() { ... };
- XDomainRequest.ontimeout
IE8で追加されたオブジェクト/プロパティ
- HTMLStorage - DOM Storage
- window.localStorage, window.sessionStorage
- Storage.remainingSpace - localStorageの残量, これは標準外のプロパティ
- StorageItem
- StorageList
- XDomainRequest
- XMLHttpRequest.timeout
- XDomainRequest.timeout
- HTMLDocumentCompatibleInfo
- DocumentCompatibleInfo
- documentCompatibleInfoCollection
- compatible - X-UA-Compatible 宣言のリストを取得する
- document.isCompatible("StandardsIE8") - IE8でIE8モードならtrueらしい。version番号ではなくこのAPIを使うと、UAの切り分けが簡単になるのだが、こんなのばっかり追加されてる気もする。
- document.documentMode - 重要。ドキュメントの動作モード(IE8, IE7, IE5)を取得する
- href - 相対リンクの基準となるURLを取得/設定できる。
- aria系 http://www.w3.org/TR/wai-aria/ http://msdn.microsoft.com/ja-jp/ie/cc836446.aspx
- element.style.boxSizing, CSS::box-sizing または -ms-box-sizing
- document.contentDocument
- form.enctype - FORMのMimeTypeを指定可能になるらしい。デフォルトは "application/x-www-form-urlencoded"
- isAlternate - 代替スタイルシートかどうかを取得できるらしい
- isPrefAlternate - これも
- window.maxConnectionsPer1_0Server - HTTP1.0で接続しているときの最大接続数 4〜6本
- window.maxConnectionsPerServer - HTTP1.1で接続しているときの最大接続数 2〜6本
- msBlockProgression or -ms-block-progression http://www.w3.org/TR/2003/CR-css3-text-20030514/#Progression これの先行実装らしいが、なんか似たようなのがあった気がする。要は縦書き。
- event.origin - onmessage 関係の情報(スキーム + ホスト名 + ポート番号 = https://hostname:port)を取れるらしい。
- element.style.outline - おなじみのやつ。outlineColor, outlineStyle, outlineWidth も
- event.source - onmessageイベントのソースとなるwindowが取れるらしい。
- orphans, widows - 印刷系の話
- window.zoominherit - チャイルドウインドウ(ポップアップ/ダイアログ)が、親ウインドウのzoom値を引き継ぐかどうか設定/取得できるらしい。きっと使われない。
window.showModalDialog("http://www.example.com",null,"height:200;left:100;resizable:no;scrollbars:no;zoominherit:1");
- window.external.IsServiceInstalled(URL, Verb) - サービスのインストール状況を確認できるらしいが、サービスの定義が見当たらない。
- window.postMessage
// Document A
var iframe = document.getElementById("iframe1");
iframe.contentWindow.postMessage("Hello");
// Document B
document.attachEvent("onmessage", function(e) {
if (e.domain == "example.com") {
if (e.data == "Hello"") {
e.source.postMessage("Hello");
} else {
alert(e.data);
}
}
});
IE8でサポートが追加されたCSS
- :after Pseudo-class
- :before Pseudo-class
- :focus Pseudo-class
- border-spacing
- caption-side
- content
- counter-increment
- counter-reset
- orphan
- outline
- outline-color
- outline-style
- outline-width
- page-break-inside
- widows
IE8じゃないけど、初めて知ったプロパティとか。すっかり忘れがちなプロパティとか
- allowTransparency - iframe を透過表示させる。
- bgproperties - "fixed" と指定すると背景が固定されるらしい。background-position: fixed 相当なのかもね。
- 背景の固定はQuirksモードでのみ有効(IE6で確認)
<body bgproperties="fixed" background="hoge.gif">
- element.fileCreatedDate - 作成日が取れるらしい ほかにも element.fileModifiedDate, element.fileSize, element.fileUpdatedDate がそろっている。element には document か image を指定可能document.lastModified のノリで。
- fontSmoothingEnabled - Windowsのコントロールパネルのフォントのスムージング設定を取得できるらしい。何に役立つかは不明。
- window.external - なんか色々できそうなんだけど、未確認。
- window.offscreenBuffering - オフスクリーンバッファのON/OFF。試し方が悪いらしく、はっきりとした効果が不明。
- screen.updateInterval - 描画間隔をmsで指定できるので、重い処理(再描画)の前にセットして→戻して とかやるとユーザに色々見られなくてすみそう。IEだけ画面外にぶっ飛ばしてレンダリングしてから戻す処理などは、これが使えれば省略できるのかもね。遅い環境でアニメーションを間引くのにも使えそう。すっかり忘れてた。
- image.galleryImg = "no" でイメージツールバーを非表示にできる(IE6のみっぽい。IE7で早々に削除されている)
いわゆる ＜meta http-equiv="Imagetoolbar" content="no" /＞ の代わり。
- element.hideFocus - フォーカスを隠す
- input.indeterminate - チェックもアンチェックもされていない(不確定な)状態を設定/取得する
<input id="chk1" type="checkbox" checked="checked" />
uu.id("chk1").indeterminate = true;
- element.isMultiLine - 複数行かどうかを取得できる。これと clientRect系のAPIを組み合わせると、::first-line が実装できる気が(とっても)するけど、実装する時間が無い。
- element.style.layoutGrid - 何だろ? これ。
- msInterpolationMode or -ms-interpolation-mode - IE7で追加されてるけど、なんだろこれ。
- external.onvisibilitychange - よくわからない
- pixelBottom, pixelHeight, pixelLeft, pixelRight, pixelTop, pixelWidth - 時々忘れるのでメモ
- posBottom, posHeight, position, posLeft, posRight, posTop, posWidth - 覚えてらんないのでメモ
- window.clientInformation - window.navigator と同じだったっけか?
- XMLHttpRequest.responseBody - レスポンスボディの、unsignedの配列(バイト配列)をごっそり取れる。IE7から。
- rule.selectorText - (スタイルシートの)ルールのセレクタ("div" とか "div span"とか)を取得できるらしい。
- event.shiftLeft - 左のシフトキーが押下されたかを取れるらしい。取れるのしらんかった。
- textAlignLast or text-align-last Attribute - IEの先行実装らしい。CSS3にこんなのあるのか?
- element.expando - element.unselectable = "on" が機能するためには、element.expando = false を設定する必要があるらしい。
- document.URLUnencoded
- element.vcard_name or VCARD_NAME - こんなんあったんですか。
- viewInheritStyle - スタイルシート系の話
- table.refresh() - styleSheet.removeRule() 実行後に呼ぶと、リフローしてくれるらしい。(自動でドキュメントのリフローは行われないらしい)
IE8で動作が変化したメソッドとかプロパティとか
- document.getElementById - NAMEを検索しなくなった。検索するのはIDのみ。ただし、ドキュメントモードがIE8の場合のみ。document.getElementsByName なら NAMEもID も検索するから、気になる人はそっち使えばOK。
- element.getNamedItem - IE8モードなら、エラーの発生条件とか戻り値が変化。
- element.setAttribute - IE8モードでなんか変わってるらしいが、MSDNのリンク先が間違ってて読めてない。
- element.hasAttribute - DOM Level 1に準拠しました。10年かかったけどね。
- element.namedItem - 何が変わったかわからないが、どこかが変わっているらしい。
- element.removeAttribute - 第二引数が必須になり、検索方法のデフォルトが case-sensitive から case-insensitive に変化している。
- element.removeNamedItem - なんか微妙に変わってる
- element.setAttribute - 第三引数がサポートされない(無視される)。
- element.getAttribute - 第二引数の指定が必須になり、デフォルト値も 0 → 2 に変化した
- document.documentMode === 8 をチェックしコードを分岐させる必要がありそう。IE向けの既存のコードはまず正しく動かない(かもしれない)。
IE6/7用のコードはIE8モードでは動かない。 × elm.getAttribute("className") → ○ elm.getAttribute("class", 2) × elm.getAttribute("htmlFor") → ○ elm.getAttribute("for", 2)
-
-
- さらに追補: 少なくとも、 elm.getAttribute("src") や elm.getAttribute("href") で 絶対URLを期待しているコードは全て見直しが必要。"class" を "className" に自動的に変換してgetAttributeを行うライブラリは動かない。
-
IE8の注意事項
- class="hslice" は WebSlice が独占的に予約するクラス名になりました。今後 hslice という名前のクラスは使用できません。
uupaa.js の近況
- devモジュールに手が入ってます。
- いままで結構邪魔だったログ表示部分が、ウインドウ化されちょっと便利になりました。
- FirebugLiteを起動する機能, ログクリア, ログレベルの変更, その時点の(ライブな)DOMツリーを表示する機能等もつけたので、さらに便利に。
- いままで結構邪魔だったログ表示部分が、ウインドウ化されちょっと便利になりました。
- effectモジュールは廃棄予定です。
- tweeenモジュールに置き換わります。
- selector+モジュールが追加されました。
uu.css("td:digit").forEach(function(v) { v.style.textAlign = "right"; });
-
-
- :negative で マイナスの数値を選択できます。マイナス値を簡単に赤字にできます。
-
uu.css("td:digit:negative").forEach(function(v) { v.style.textAlign = "right"; v.style.color = "red"; });
