---
title: Firefox 4 技術文件
slug: Mozilla/Firefox/Releases/4
translation_of: Mozilla/Firefox/Releases/4
---
<div>{{FirefoxSidebar}}</div><p>2010 年六月起進入 Beta 測試期的 Firefox 4，增進了效能、加強針對 HTML 5 及其他創新網際科技的支援程度，也更加安全。本文為網頁、附加元件、Gecko 平台開發者們提供這一版的簡要技術相關資訊。</p>

<div class="geckoVersionNote">
<p>Gecko 1.9.3 即將更名為 Gecko 2，但許多文件還沒有針對此點更新，在接下來的幾個星期中才會有所更動。</p>
</div>

<p>以下大部分的功能都已經可以在 <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">逐日建置版</a>中試用。</p>

<div class="note"><strong>註：</strong>本文、以及本文所連結的其他文件仍持續編修中，很多文件的名稱只是暫定、有些主題的文件也可能會拆成幾份子文件以方便閱讀。中文團隊的目標將僅翻譯這份概覽，其他子文件則有待大家的幫忙。</div>

<h2 id="Features_for_web_developers">Features for web developers</h2>

<p>Gecko now uses the <a href="/en/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> parser, which fixes bugs, improves interoperability, and improves performance. It also lets content embed <a href="/en/SVG" title="en/SVG">SVG</a> and <a href="/en/MathML" title="en/MathML">MathML</a> directly in the HTML markup.</p>

<h3 id="HTML">HTML</h3>

<dl>
 <dt>Introduction to the HTML5 parser</dt>
 <dd>A look at what the HTML5 parser means to you, and how to embed SVG and MathML into your content inline.</dd>
 <dt><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/Forms in HTML5">Forms in HTML5</a></dt>
 <dd>A look at improvements to web forms in HTML5.</dd>
 <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">HTML5 Sections</a></dt>
 <dd>Gecko now supports the new HTML5 elements related to sections in a document: {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }} and {{ HTMLElement("footer") }}.</dd>
 <dt>Other HTML5 elements</dt>
 <dd>Gecko now also supports the following new HTML5 elements: {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }} and  {{ HTMLElement("figcaption") }}.</dd>
 <dt>WebSockets</dt>
 <dd>A guide to using the new WebSockets API for real-time communication between a web application and a server.</dd>
</dl>

<h4 id="Miscellaneous_HTML_changes">Miscellaneous HTML changes</h4>

<ul>
 <li>{{ HTMLElement("textarea") }} elements are now resizable by default; you can use the {{ cssxref("resize") }} CSS property to disable this.</li>
 <li><code>canvas.getContext</code> and <code>canvas.toDataURL</code> no longer throw an exception when called with unrecognized arguments.</li>
 <li><code>canvas2dcontext.globalCompositeOperation</code>, <code>canvas2dcontext.lineCap</code> and <code>canvas2dcontext.lineJoin</code> no longer throw an exception when set to an unrecognized value.</li>
</ul>

<h3 id="CSS">CSS</h3>

<dl>
 <dt><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a></dt>
 <dd>New CSS transitions support is available in Firefox 4.</dd>
 <dt>Computed values in CSS</dt>
 <dd>Support for<code> calc() </code>to compute values in CSS is in progress. See {{ bug(363249) }}.</dd>
 <dt>Selector grouping</dt>
 <dd>Support for {{ cssxref(":-moz-any") }} to group selectors and factorize combinators.</dd>
 <dt>Background image subrectangle support</dt>
 <dd>The {{ cssxref("-moz-image-rect") }} property makes it possible to use subrectangles of images as a background image.</dd>
 <dt>CSS touch properties</dt>
 <dd>Support for touch properties is added. Details, and real article names, to come later.</dd>
 <dt><a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a></dt>
 <dd>Changes have been made to what information can be obtained about the style of visited links using CSS selectors. This may affect some web applications.</dd>
</dl>

<h4 id="Miscellaneous_CSS_changes">Miscellaneous CSS changes</h4>

<ul>
 <li>The {{ cssxref("text-shadow") }} property now caps the blur radius to 300px for sanity and performance reasons.</li>
 <li>The {{ cssxref(":-moz-window-inactive") }} pseudoclass has been implemented.</li>
 <li>The {{ cssxref("-moz-tab-size") }} property lets you specify the width in space characters of a tab character (U+0009) when rendering text.</li>
 <li>The CSS3 {{ cssxref("resize") }} property has been implemented.</li>
 <li>The<code> -moz-background-size </code>property has been renamed to its final {{ cssxref("background-size") }} naming; <code>-moz-background-size</code> is no longer supported.</li>
 <li>The {{ cssxref("oveflow") }} property no longer applies to table-group elements ({{ HTMLElement("thead") }}, {{ HTMLElement("tbody") }}, and {{ HTMLElement("tfoot") }}).</li>
</ul>

<h3 id="Graphics_and_video">Graphics and video</h3>

<dl>
 <dt> </dt>
 <dt><a href="/en/WebGL" title="en/WebGL">WebGL</a></dt>
 <dd>The developing WebGL standard is now supported by Firefox.</dd>
 <dt>Optimizing graphics performance</dt>
 <dd>Tips and tricks for getting the most out of graphics and video performance in Firefox 4.</dd>
 <dt><a href="/En/Media_formats_supported_by_the_audio_and_video_elements#WebM" title="En/Media formats supported by the audio and video elements#WebM">Support for WebM video</a></dt>
 <dd>The new open <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> video format is supported by Gecko 1.9.3; support is included in nightlies as of 9 June.</dd>
 <dt>Full screen API</dt>
 <dd>Details coming soon.</dd>
 <dt>SMIL animation</dt>
 <dd>Support for SMIL animation of SVG is now available. See {{ bug(482402) }}.</dd>
 <dt>Using SVG as images and as CSS backgrounds</dt>
 <dd>You can now use SVG with the {{ htmlelement("img") }} element, as well as the background image in CSS. See {{ bug(272288) }}, {{ bug(276431) }} and {{ bug(231179) }}.</dd>
</dl>

<h3 id="DOM">DOM</h3>

<dl>
 <dt>Obtaining boundary rectangles for ranges</dt>
 <dd>The Range object now has <code>getClientRects()</code> and <code>getBoundingClientRect()</code> methods. See {{ bug(396392) }}.</dd>
 <dt>Capturing mouse events on arbitrary elements</dt>
 <dd>Support for the Internet Explorer-originated <code>setCapture()</code> and <code>releaseCapture()</code> APIs has been added. See {{ bug(503943) }}.</dd>
 <dt><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></dt>
 <dd>The existing document history object, available through the {{ domxref("window.history") }} object, now supports the new HTML5 <code>pushState()</code> and <code>replaceState()</code> methods.</dd>
 <dt>Touch and multi-touch events</dt>
 <dd>Support has been added for touch and multi-touch events.</dd>
 <dt><a href="/en/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>The proposed IndexedDB standard, which provides a local database store for web applications, will be supported by Firefox 4.</dd>
</dl>

<h4 id="Miscellaneous_DOM_changes">Miscellaneous DOM changes</h4>

<ul>
 <li>The wrapping of a {{ HTMLElement("textarea") }} element can now be controlled via the DOM, via the <code>wrap</code> DOM attribute. {{ bug(41464) }}</li>
 <li>DOM {{ domxref("file") }} objects now offer a <code>url</code> property.</li>
 <li>DOM {{ domxref("file") }} objects now have a new <code>click()</code> method. (Note: not done yet, see <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=36619" title="https://bugzilla.mozilla.org/show_bug.cgi?id=36619">bug 36619</a>.)</li>
 <li><a href="/En/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects" title="en/XMLHttpRequest/Using XMLHttpRequest#Using FormData objects">FormData</a> support for XMLHttpRequest.</li>
 <li>The {{ domxref("element.isContentEditable") }} property has been implemented.</li>
 <li>Added the <a href="/En/DragDrop/DataTransfer#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> property to the <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DragTransfer</code></a> object.</li>
 <li>Added the <a href="/en/DOM/Selection/modify" title="en/DOM/selection/modify"><code>selection.modify()</code></a> method to the {{ domxref("Selection") }} object; this lets you easily alter the current text selection or cursor position in a browser window.</li>
 <li>Support for the <code>window.directories</code> object and the <code>directories</code> feature for {{ domxref("window.open") }}, which are not supported in any other browser, has been removed. Use <code>personalbar</code> instead. {{ Bug(474058) }}</li>
 <li>The {{ domxref("event.mozInputSource") }} property has been added to DOM user interface events; this non-standard property lets you determine the type of device that generated an event.</li>
 <li>The {{ domxref("document.onreadystatechange") }} event has been implemented.</li>
 <li>The {{ domxref("document.createElement") }} method no longer accepts <code>&lt;</code> and <code>&gt;</code> around the tag name in quirks mode.</li>
</ul>

<h3 id="Security">Security</h3>

<dl>
 <dt><a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Introducing Content Security Policy">Introducing Content Security Policy</a></dt>
 <dd>Content Security Policy (CSP) is a Mozilla proposal designed to help web designers and server administrators specify how content on their web sites interacts. The goal is to help detect and mitigate attacks including cross-site scripting and data injection attacks.</dd>
 <dt>ForceTLS</dt>
 <dd>Details soon.</dd>
 <dt>The Account Manager</dt>
 <dd>Details soon.</dd>
</dl>

<h3 id="JavaScript">JavaScript</h3>

<p>For an overview of the changes implemented in JavaScript 1.8.5, see <a href="/en/JavaScript/New_in_JavaScript/1.8.5" title="en/New in JavaScript 1.8.5">New in JavaScript 1.8.5</a>. JavaScript in Firefox 4 will have additional adherence to the ECMAScript 5 standard.</p>

<h2 id="Changes_for_Mozilla_and_add-on_developers">Changes for Mozilla and add-on developers</h2>

<p>For helpful tips on updating existing extensions for Firefox 4, see <a href="/en/Extensions/Updating_extensions_for_Firefox_4" title="en/Extensions/Updating extensions for Firefox 4">Updating extensions for Firefox 4</a>.</p>

<h3 id="JavaScript_code_modules">JavaScript code modules</h3>

<dl>
 <dt><a href="/en/JavaScript_code_modules/Services.jsm" title="en/JavaScript code modules/Services.jsm">Services.jsm</a></dt>
 <dd>The <code>Services.jsm</code> code module provides getters that make it easy to obtain references to commonly-used services, such as the preferences service or the window mediator, among others.</dd>
</dl>

<dl>
 <dt><a href="/en/JavaScript_code_modules/ctypes.jsm" title="en/JavaScript code modules/ctypes.jsm">JS-ctypes API</a></dt>
 <dd>The JS-ctypes API makes it possible to call C-compatible foreign library functions without using XPCOM.</dd>
 <dt><a href="/en/Addons/Add-on_Manager" title="en/Addons/Add-on Manager">Add-ons Manager</a></dt>
 <dd>The new Add-ons Manager provides information about installed add-ons, support for managing them, and provides ways to install and remove add-ons.</dd>
 <dt><a href="/en/JavaScript_code_modules/Using#Locating_the_code_module" title="en/JavaScript code modules/Using JavaScript code modules#Locating the code module">Loading code modules from chrome: URLs</a></dt>
 <dd>You can now load JavaScript code modules using <strong>chrome:</strong> URLs, even inside JAR files.</dd>
</dl>

<h3 id="DOM_changes">DOM changes</h3>

<dl>
 <dt>{{ domxref("ChromeWorker") }}</dt>
 <dd>A new type of worker for privileged code; this lets you use things like <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a> from workers in extensions and application code.</dd>
</dl>

<h3 id="XUL">XUL</h3>

<h4 id="tabbrowser_(gBrowser)_changes">tabbrowser (gBrowser) changes</h4>

<p>Several changes were made to the {{ XULElem("tabbrowser") }} element that impact extensions that interact with tabs.</p>

<ul>
 <li>TabClose/TabSelect/TabOpen events no longer bubble up to the {{ XULElem("tabbrowser") }} element (gBrowser). Event listeners for those events should be added to gBrowser.tabContainer rather than to gBrowser directly.</li>
 <li>The tab context menu is no longer an anonymous child of the {{ XULElem("tabbrowser") }}. It can therefore be overlaid directly with <a href="/en/XUL_Overlays" title="en/XUL Overlays">XUL overlays</a>. It can also be accessed more directly in JS via gBrowser.tabContextMenu. See <a class="external" href="http://www.gavinsharp.com/blog/2010/03/31/accessingmodifying-the-firefox-tab-context-menu-from-extensions/" title="http://www.gavinsharp.com/blog/2010/03/31/accessingmodifying-the-firefox-tab-context-menu-from-extensions/">this blog post</a> for more details.</li>
</ul>

<h4 id="Miscellaneous_XUL_changes">Miscellaneous XUL changes</h4>

<ul>
 <li>The {{ xulattr("readonly") }} attribute now correctly works for fields.</li>
 <li>The {{ xulelem("resizer") }} element now lets you use the {{ xulattr("element") }} attribute to specify an element to resize, instead of resizing the window.</li>
 <li>The "active" attribute no longer gets set on active XUL windows. Instead, you can use the new {{ cssxref(":-moz-window-inactive") }} pseudoclass in order to assign different styles to background windows.</li>
 <li>The {{ xulattr("emptytext") }} attribute is now deprecated; you should use {{ xulattr("placeholder") }} instead.</li>
 <li>The {{ xulelem("popup") }} element is no longer supported; you should use {{ xulelem("menupopup") }} instead.</li>
</ul>

<h3 id="Storage">Storage</h3>

<h4 id="Miscellaneous_storage_API_changes">Miscellaneous storage API changes</h4>

<ul>
 <li>The {{ interface("mozIStorageBindingParamsArray") }} interface now has a length attribute that indicates the number of {{ interface("mozIStorageBindingParams") }} objects in the array.</li>
 <li>The {{ ifmethod("mozIStorageStatement", "bindParameters") }} now returns an error if the specified {{ interface("mozIStorageBindingParamsArray") }} is empty.</li>
</ul>

<h3 id="XPCOM">XPCOM</h3>

<dl>
 <dt><a href="/en/Extensions/Updating_extensions_for_Firefox_4" title="https://developer.mozilla.org/en/Extensions/Updating_extensions_for_Firefox_4">XPCOM changes in Gecko 1.9.3</a></dt>
 <dd>Details about changes to XPCOM that impact compatibility in Firefox 4.</dd>
 <dt><a href="/en/Components.utils.getGlobalForObject" title="en/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject()</a></dt>
 <dd>This new method returns the global object with which an object is associated; this replaces a common use case of the now-removed <code>__parent__</code>.</dd>
</dl>

<h3 id="Memory_management">Memory management</h3>

<dl>
 <dt><a href="/en/Infallible_memory_allocation" title="en/Infallible memory allocation">Infallible memory allocation</a></dt>
 <dd>Mozilla now provides infallible memory allocators that are guaranteed not to return null. You should read this article to learn how they work and how to explicitly request fallible versus infallible memory allocation.</dd>
</dl>

<h2 id="Other_changes">Other changes</h2>

<dl>
 <dt>Gopher support removed</dt>
 <dd>The Gopher protocol is no longer supported natively. Continued support is available via the <a class="link-https" href="https://addons.mozilla.org/addon/7685/">OverbiteFF</a> extension.</dd>
 <dt>Default plugin removed</dt>
 <dd>The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. See <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=533891">bug 533891</a>.</dd>
 <dt>Extension Manager replaced with AddonManager</dt>
 <dd><a href="/en/XPCOM_Interface_Reference/nsIExtensionManager" title="en/nsIExtensionManager">nsIExtensionManager</a> has been replaced by <a href="/en/Addons/Add-on_Manager/AddonManager" title="en/Addons/Add-on_Manager/AddonManager">AddonManager</a>. Since there is apparently no way at present to obtain the install location from a given extension ID, the closest workaround is to use the directory service to find the profile directory and append "extensions" to it (though this approach will not catch extensions outside of the profile directory or those which are aliased to another location).</dd>
</dl>

<h2 id="參考">參考</h2>

<ul>
 <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 for developers</a></li>
 <li><a class="internal" href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 for developers</a></li>
 <li><a class="internal" href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 for developers</a></li>
 <li><a class="internal" href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 for developers</a></li>
 <li><a class="internal" href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 for developers</a></li>
</ul>

<p>{{ languages( { "en": "en/Firefox_4_for_developers", "de": "de/Firefox_4_fur_Entwickler", "ja": "ja/Firefox_4_for_developers"} ) }}</p>