<canvas> 2DHTML5performanceJavascript<video>hardware accelerationSVGCSS3WebGLSecurityMulti-platformOpen CodecsFile APIScalable Vector GraphicsGeolocation APINative JSONWOFFGNU/LinuxBorder ImageHTML5 parser-moz-elementApplication CacheHTTP Strict Transport Securityimage-rectclassListbox-shadowTransitionSVG as a CSS backgroundIndexedDBBorder RadiusMultiple BackgroundsTraceMonkeyQuerySelectorAndroidJavascript Animation SchedulerMulti-touch@media QueriesformData:visitedDrag and Drop files from the DesktopText ShadowX-Frame-OptionspostMessageRetained layersJavaScript typed arraysXHR Level 2Content EditableCross-Domain XHRCompositing accelerationFormsWeb WorkersTransformStructural pseudo-classesWindowsProtocol handlersCross-Origin Resource Sharingasync & deferAsynchronous plug-in paintingany()GradientsECMAScript 5Javascript enginelocalStorageMac OSDevice OrientationAudio Data APIcalc()Content Acceleration@font-faceNative Drag and DropSVG as an <img>foreignObjectfont-feature-settingsStrict ModeHistory APIMaemomask, filter, clip-path<audio>Columnssemantics
Standards
HTML5
<canvas> 2D
Canvas is a HTML5 element which can be used to draw graphics via scripting (JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations.
HTML5 defines a standard way to embed video in a web page, using a <video> element. The same way we can use images in web pages, we can now use videos. Videos can be styled with CSS and controlled via Javascript.
The HTML parser is one of the most complicated and sensitive pieces of a browser. It controls how your HTML source code is turned into web pages. The new parser is faster, complies with the HTML5 standard, and enables a lot of new functionality as well. This parser lets content embed SVG and MathML directly in the HTML markup.
Elements, attributes, and attribute values in HTML are defined (by the HTML specification) to have certain meanings (semantics). HTML5 brings more elements to improve the semantics of a document.
The HTML 5 <audio> element offers the ability to easily embed audio files into HTML documents. Once you've embedded media into your HTML document using the new element, you can programmatically control them from your JavaScript code.
Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.
The HTML5 specification introduces the <audio> and <video> media elements, and with them the opportunity to dramatically change the way we integrate media on the web. We present a new Mozilla extension to this API, which allows web developers to read and write raw audio data.
The -moz-transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed as this text.
CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.
Resize your window to see the layout of this page being adapted to fit the new size.
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.
The border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.
The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for as many as nine boxes in some cases.
Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background displayed in the back.
The column layout. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.
The text-shadow CSS property does what the name implies: It lets you create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow.
The text-shadow property was first introduced in CSS2, but as it was improperly defined at the time, its support was dropped again in CSS2.1. The feature was re-introduced with CSS3.
CSS any() lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.
CSS calc() values lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth.
Use sprites as resources for your design. The new -moz-image-rect lets you use a sub-rectangle of an image as part of a background or background-image.
-moz-element is an experimental extension to the CSS background-image property: the ability to draw arbitrary elements as backgrounds using -moz-element(#elementID).
SVG effects are extended to apply to CSS-formatted elements. In particular, it makes the 'filter', 'mask' and 'clip-path' CSS properties applicable to CSS-formatted elements (such as HTML elements).
@font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.
Play with much more of the capabilities of TrueType. It’s possible to take advantage of all kinds of font capabilities — kerning, ligatures, alternates, real small caps, and stylistic sets, to name just a few.
The Web Open Font Format (WOFF) has two main advantages over raw TrueType or OpenType fonts.
It is compressed, which means that you will typically see much smaller download sizes compared with raw TrueType or OpenType fonts.
It contains information that allows you to see where the font came from — without DRM or labeling for a specific domain — which means it has support from a large number of font creators and font foundries.
If you’re doing processing with JavaScript and you want to process low-level data, Firefox now supports native typed arrays in JavaScript. This can make a gigantic difference in how fast items are processed if you’re doing WebGL or image manipulation.
Javascript Strict Mode is a way to opt in to a restricted variant of JavaScript. Strict mode has different semantics from normal code.
It eliminates some JavaScript pitfalls that didn’t cause errors by changing them to produce errors. And it fixes mistakes that make it difficult for JavaScript engines to perform optimizations.
XMLHttpRequest makes sending HTTP requests very easy. You simply create an instance of the object, open a URL, and send the request. The HTTP status of the result, as well as the result's contents, are available in the request object when the transaction is completed.
This new Level brings interesting feature such as progress events and support for cross-site requests.
The DOM window object provides access to the browser's history through the window.history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as — starting with HTML5 — manipulate the contents of the history stack.
JSON (JavaScript Object Notation) is a data-interchange format, based on a subset of JavaScript syntax. It is useful when writing any kind of JavaScript-based application, including extensions.
The Selectors API provides methods that make it quick and easy to retrieve Element nodes from the DOM by matching against a set of selectors. This is much faster than past techniques, where it was necessary, for example, to use a loop in JavaScript code to locate the specific items you needed to find.
The bridge between the document and its style is often based on the class attribute. Being able to manipulate this attribute in an efficient way is important.
classList lets you toggle, add and remove classes from any element easily.
Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.
The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest.
These are attributes of the <script> element. Set async to tell the browser to, if possible, execute the script asynchronously. Set defer to tell the browser to execute the script after it has parsed the document.
XMLHttpRequest Level 2 (editor’s draft) adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method in “multipart/form-data” format.
The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked to confirm permission to report location information.
The File API specifies the ability to asynchronously read a selected file into memory, and perform operations on the file data within the web application (for example, to display a thumbnail preview of an image, before it is uploaded, or to look for ID3 tags within an MP3 file, or to look for EXIF data in JPEG files, all on the client side).
With the Multitouch API, regular webpages are capable of using multitouch input, allowing web developers to create new interactive experiences for their websites.
The MozOrientation event provides a way to handle orientation information. This event is sent when the accelerometer detects a change to the orientation of the device. By receiving and processing the data reported by MozOrientation events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device.
Browsers need a way to deal with links that use protocols other
than HTTP (for example, mailto:). They have traditionally used desktop
programs such as a desktop e-mail client, to handle these protocols.
Web-based protocol handlers allow web-based applications to participate in the process too.
This is a method for safely enabling cross-origin communication. Normally, scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol, port number and host. postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.
IndexedDB is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
When offline, you can’t always count on the browser’s cache. You need to define explicitly which files must be stored so that all needed files and resources are available when the user goes offline: HTML, CSS, JavaScript files, and other resources like images and video.
window.mozRequestAnimationFrame tells the browser that you wish to perform an animation.
This requests that the browser schedule a repaint of the window for the next animation frame.
Being able to handle drag and drop allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application.
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A such as an HTML web page, makes a XMLHttpRequest for a resource on Domain B. This is by default forbidden by the browser. As Domain B, you can allow such request with the Access-Control-Allow-Origin: header.
SVG is an XML language which can be used to draw graphics. It can be used to create an image either by specifying all the lines and shapes necessary, or by modifying existing raster images, or by a combination. The image and its components can also be transformed, composited, or filtered to change its appearance completely.
The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
Clipping, Masking and Compositing
Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both 'inside' and 'outside' regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using simple alpha blending.
Hardware acceleration is basically using the GPU when it’s possible (instead of the CPU). This makes page-drawing operations faster.
There are two different levels of acceleration going on:
Content acceleration speeds up rendering the actual page content, such as the text, images, CSS borders, etc. Content acceleration is also used to speed up the 2D HTML canvas. On Windows Vista/7, we use Direct2D. On Linux, Firefox we use XRender.
Compositing acceleration speeds up putting together chunks of already-rendered content (layers) together for final display in the window, potentially applying effects such as transforms along the way. For example, if you had a HTML5 video that was playing, and it had CSS effects applied to it that was making it rotate and fade in and out, that would be using compositing acceleration to make that go fast.
Firefox's Javascript Engine is named "SpiderMonkey". To compete with platform-native application, JavaScript execution speed is crucial. SpiderMonkey brings two different optimizations:
TraceMonkey adds native‐code compilation to Mozilla’s JavaScript engine. It is based on a technique developed at University of California, Irvine called “trace trees”. The net result is a massive speed increase in Web‐page content.
Jägermonkey is a new method JIT for SpiderMonkey. The goal is to get reliable baseline performance on the order of other JS JIT systems. Jägermonkey will be a baseline whole-method JIT that doesn't necessarily do many traditional compiler optimizations. Instead, it does dynamic-language-JIT-oriented optimizations like PICs and specialization of constant operands.
Firefox has an internal layers system for improved drawing performance. Images, fixed backgrounds, inline video, etc. are now rendered to an internal layer and then composited with other parts of a web page in a way that can take advantage of hardware acceleration. This improves the page load time and interactive performance of many web pages.
On Windows and Linux, Firefox now paints plug-ins asynchronously.
In previous releases, to paint a web page that used a plug-in, Firefox
had to ask the plug-in for the data to paint. If a plug-in was slow or
was hung, it would make the browser feel slow. Now Firefox can get
that data asynchronously.
Content Security Policy (CSP) is a set of easy to use tools that allow a web site owner to tell the browser where it should or should not load resources from. In particular it aims to prevent three different classes of common attacks we see on the web today: cross-site scripting, clickjacking and packet sniffing attacks.
This specification defines a mechanism enabling Web sites to declare
themselves accessible only via secure connections, and/or for users
to be able to direct their user agent(s) to interact with given sites
only over secure connections.
Concerned about clickjacking or tired of sites wrapping your content with their ads? X-FRAME-OPTIONS is a header value that is set by the webserver which instructs supported browsers on whether to allow a particular page to be framed by other pages.
CSS :visited hack prevention:
The behavior of the :visited CSS selector needed to be changed in order to improve user privacy online. A decade-old hole in CSS rules that let any website query your browsing history is now fixed.
