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.
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.
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-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.
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.
@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.
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.
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 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).
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.
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.
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.
Jaë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.