Firefox 13 の後方互換性に関わる修正
Firefox 13 は 6/5 のリリースに向けて開発が続けられています。後方互換性は可能な限り維持されていますが、他のブラウザとの相互運用性や最新 Web 標準仕様への準拠のため、後方互換性に関わる修正も含まれます。そのような修正点をまとめましたので、動作検証時などにご参照ください。
ここでは後方互換性に影響し得る主な修正のみ解説します。その他の新機能や変更点については次のページをご覧ください。
- ユーザ向けも含めた新機能: Firefox 13 の主な新機能を紹介します
- 開発者向けの新機能や変更点: Firefox 13 for developers
接頭辞付きの -moz-border-radius* と -moz-box-shadow はサポートを終了します
CSS プロパティ -moz-border-radius は Firefox 1 から、-moz-box-shadow は Firefox 3.5 からサポートしてきており、Firefox 4 からは接頭辞なしの border-radius* や box-shadow をサポートして接頭辞付きプロパティの利用は非推奨とされていました。Firefox 13 では接頭辞付きプロパティのサポートを終了するため、接頭辞なしのプロパティを使うようにしてください。Firefox 4 以降だけをサポートする場合は接頭辞プロパティを残す必要もありません。
globalStorage のサポートを終了します
localStorage/sessionStorage として Web Storage が標準化される過程で提案・実装された globalStorage は Firefox 3.5 から非推奨とされてきましたが、Firefox 13 からはサポートされなくなります。localStorage を利用するコードに書き換えてください。基本的には次のように globalStorage[location.host] を localStorage に置き換えるだけで問題ありません。
// 書き換え前のコード
globalStorage[location.host].keyname = 1;
globalStorage[location.host].setItem("keyname", 2);
globalStorage[location.host].keyname == 2; // true
typeof globalStorage[location.host].keyname == "object"; // true;
// 書き換え後のコード
localStorage.keyname = "value";
localStorage.setItem("keyname", "value");
localStorage.keyname == 2 // true
typeof localStorage.keyname == "string"; // true;
但し、上記コード例の最後に示したとおり、localStorage.keyname (または localStorage.getItem()) では文字列が返されますが、globalStorage.keyname (または globalStorage.getItem()) では StorageItem オブジェクトが返されます。StorageItem オブジェクトは localStorage.keyname と同じ文字列になる toString() が定義されているため通常は問題ありませんが、万一アイテムの型に依存するコードを書いていた場合は注意してください。
通常のインライン要素には CSS Transform が適用されなくなります
CSS Transform の仕様では Transform を適用可能な要素を限定しています。仕様ではインライン要素は <img> や <object> のような置き換え要素などアトミックなインライン要素を 除いて適用対象とされていませんが、Firefox 12 以前では (IE9、Opera Next 12 などでも)置き換え要素などでない通常のインライン要素についても Transform が適用可能でした。しかし、間に改行を含むなどして複数ボックスに分かれるケースの挙動を適切に定義できないため Transform 適用対象外とすることが確定し、Firefox もそれに合わせて修正されました。
インライン要素の途中で<span style=-moz-transform:rotate(180deg)>改行<br/> が含まれている</span>場合などはどのように変形すべきか定かではない。
インライン要素でも置き換え要素 <img> などは引き続き Transform が適用可能であること、仕様に反したままの IE9 などと挙動が異なることには注意してください。文字列を変形させたい場合などはインライン要素でなく <p> や <div> などボックス要素を変形させてください。
URL のフラグメント識別子変更時に document.URL が更新されない問題が解決されます
Firefox 4 〜 Fireofx 12 では <a href=”#onlyfragment”> のようなリンクをクリックするなど、URL のフラグメント識別子だけが変更されたときに、ロケーションバーの表示や window.location.href および document.location.href は更新されるが、document.URL の方は更新されなかった問題が解決されます。
Blob.mozSlice() は Blob.slice() に変更されます
Blob.slice() メソッドは Firefox 4 で導入されましたが、Array.slice() や String.slice() とは引数の構文が異なった(第 2 引数が切り取る最後の位置でなく切り取る長さだった)ため、Firefox 5 では古い構文の Blob.slice() を廃止して他と構文を合わせた Blob.mozSlice() が追加されました。Firefox 13 からは新しい構文のメソッドのままベンダー接頭辞なしの Blob.slice() に変更されます。Blob.mozSlice() は廃止されるので注意してください。
また、Firefox 13 では同時に Blob をコンストラクタとして利用可能になったため、BlobBuilder を使っていたコードは Blob コンストラクタを用いて簡単に書き直せます。例えば次のようにコードを書き換えてください:
// Firefox 12 までのコード
var bb = new MozBlobBuilder();
bb.append("Fire");
bb.append("fox");
var firefox = bb.getBlob();
var fox = firefox.mozSlice(4,7);
// Firefox 13 からのコード
var firefox = new Blob(["Fire", "fox"]);
var fox = firefox.slice(4,7);
なお、MozBlobBuilder はサポート継続されていますが、非推奨となっており将来的に削除される見込みです。Firefox 14 以降では MozBlobBuilder を使用すると Web コンソールに警告が出力されるようになります。Blob.slice() への変更と合わせて Blob コンストラクタへの切り替えをお薦めします。
CSS の Length 値に “0” を設定すると “0pt” でなく “0px” と解釈されるようになります
CSS では Length 値 (長さや大きさを表すプロパティ)には単位が必須ですが、値が 0 の場合は例外的に単位を省略可能です。Firefox ではこれまで Length 値のスタイルに “0” を代入すると “0pt” として解釈されていました。CSS Object Model の新しい仕様でゼロは “0px” と解釈すると定義されたため、Firefox 13 からは “0pt” でなく “0px” として解釈されます。
具体的には次のようにプロパティに “0” を代入した後でそのプロパティを読み取る時に得られる文字列が変化します。
var element = document.getElementById("lesser-panda");
element.style.width = 0;
element.style.width == "0pt"; // Firefox 12 までで true
element.style.width == "0px"; // Firefox 13 以降、IE10、Chrome などで true
% 単位で指定された cellspacing 属性を標準モードでもピクセル値として解釈するようになります
<table> 要素の cellspacing 属性に % 単位で値を指定した場合、Firefox 12 までの標準モードでは無効な属性値として無視してきましたが、Firefox 13 からは Quirks モードや cellpadding 属性の解釈と同じく、px 単位で指定されたものとして解釈するよう変更されます。
いずれにしても cellpadding 属性、cellspacing 属性は HTML5 では廃止されます。テーブルのレイアウト指定は HTML の属性ではなく CSS で行うようにしてください。
FileError インターフェイスが廃止されます
FileReader 利用時のエラーには FileError が用いられ、code プロパティによってエラーの原因を判別できるようになっていましたが、FileAPI の仕様で専用のエラーでなく一般的な DOMError を返すことが定義されたため、FileError は廃止されました。
<datalist> 中の <option> は index が -1 ではなく 0 になります
HTML5 で追加された要素 <datalist> の中に <option> 要素を入れた場合、index プロパティの値はこれまで -1 になっていましたが、HTML5 仕様でゼロを返すと定義されたため、Firefox 13 からは 0 を返すようになります。
HTML5 仕様の定義により、<option> 要素の index プロパティは <select> の中で使われる場合には index が与えられるが、<datalist> 中では index が与えられないことに注意してください。
setTimeout() や setInterval() のコールバック関数に lateness 引数が渡されなくなります
Firefox では Netscape 時代からの互換性のため、setTimeout() や setInterval() のコールバックに非標準の引数が渡されていましたが、今後は他のブラウザ同様にコールバック関数は引数なしで呼び出されるようになります。
具体的にはこれまでは setTimeout() 第2引数で指定した時間よりも、実際の呼び出しがどれだけ遅延したかを表す lateness 引数が渡されていました。これについて詳しくは Bugzilla の bug 10637 や bug 394769 議論をご参照ください。
存在しない属性に対して element.getAttributeNS() は常に null を返すようになります
element.getAttributeNS() は DOM3 の仕様書では空文字列を返すと定義されていましたが、実際には null を返す実装のブラウザが多く、DOM4 仕様書でも null を返すと定義することになりました。これに合わせて Firefox も存在しない属性については常に null を返すようになります。
存在しない属性に対して getAttributeNS() を呼ぶ可能性があり、返り値の真偽だけでなく型も影響する場合は注意してください。
disabled 属性付きの非フォーム要素でも onfocus イベントが発生するようになります
Firefox では onfocus イベントは DOM 2 Event 仕様で規定されているとおりフォーム要素でしか通常発生しませんが、tabIndex 属性が設定されている要素については非フォーム要素であってもタブキーやクリックで選択され onfocus イベントが発生します。
しかし、Firefox 12 まではこの非フォーム要素に disabled 属性が設定されていると onfocus が呼び出されなくなっていました。disabled 属性はフォームを無効化する属性であり他の要素では無視されるべきものですので、Firefox 13 からは disabled 属性が付いていてもフォーカスされるようになります。具体的には次のようなコードで以前は二つ目の要素にフォーカスされず背景色も変化しませんでした:
<script type="text/javascript">
function setBackgroud(elem) {
elem.style.background="yellow";
}
</script>
<div tabIndex="1" onfocus="setBackgroud(this)">123456</div>
<div tabIndex="1" disabled="true" onfocus="setBackgroud(this)">abcdefg</div>
この変更は非フォーム要素に間違って disabled 属性を付けておりなおかつ tabIndex 属性も付けていない限り影響ありません。
以前のバージョンについて
以前のバージョンについても同様に、後方互換性に関わる修正点をまとめています:
ノンノ
: