In content

This list the widgets that need new styling.

Action-driven boxes

These boxes have helped a lot in lowering the bouncing rate and increasing the conversion rate (going to pages with actual content, not landing pages).

  • CSS Reference

    An exhaustive reference for seasoned Web developers describing every property and concept of CSS.

  • CSS Tutorial

    A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.

  • CSS3 Demos

    A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

bug 924844 | In-context usage.

Another one, slightly different does appear on the FxOS zone landing page (can't cut & paste here as the CSS is not accessible out of the landing pages:

Builds Apps for Firefox OS

There's also a similar box at the top of the App Center that needs some work.

Two-column landing page text

On small screen, this get transformed into one single column (via a media query).

Documentation and tutorials

CSS key concepts
Describes the syntax and forms of the language and ...
CSS developer guide
Articles to help you learn CSS techniques to make your content shine.

Tools for CSS development

  • The W3C CSS Validation Service checks if a given CSS is valid. It is an invaluable debugging tool.
  • Firefox' Firebug extension, a popular extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.
  • CSS Text-decoration Level 3 reached the Candidate Recommandation status, defining that the text-decoration-* and text-emphasis-* properties. The long known text-shadow is also defined in it. (August 1st, 2013)
  • Gecko's now support background-origin: local. It will be available from Firefox 25 (and already is in Nightly). (July 25th, 2013)

bug 924847 | In-context usage.

Specification boxes

These boxes list the specifications where the described feature is defined, this is usually at the end of such a page (we have 1000s of such pages), right before a Browser compatibility section.

The current look and feel doesn't scale to small screen (read: phone screans), the current idea (but to be discussed, amended) is to switch a definition list style section on smaller screens. The idea has not been implemented.

The most complete (unusally long):

Specification Status Comment
UndoManager and DOMTransaction
The definition of 'Element' in that specification.
Editor's Draft Added the undoScope and undoManager properties.
Pointer Events
The definition of 'Element' in that specification.
Recommendation Added the following event handlers: ongotpointercapture and onlostpointercapture.
Added the following methods: setPointerCapture() and releasePointerCapture().
Selectors API Level 2
The definition of 'Element' in that specification.
Working Draft Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
Selectors API Level 1
The definition of 'Element' in that specification.
Recommendation Added the following methods: querySelector() and querySelectorAll().
Pointer Lock
The definition of 'Element' in that specification.
Candidate Recommendation Added the requestPointerLock() method.
Fullscreen API
The definition of 'Element' in that specification.
Living Standard Added the requestFullscreen() method.
DOM Parsing and Serialization
The definition of 'Element' in that specification.
Living Standard Added the following properties: innerHTML, and outerHTML.
Added the following method: insertAdjacentHTML().
CSS Object Model (CSSOM) View Module
The definition of 'Element' in that specification.
Working Draft Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
Element Traversal Specification
The definition of 'Element' in that specification.
Recommendation Added inheritance of the ElementTraversal interface.
DOM
The definition of 'Element' in that specification.
Living Standard Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
Removed the schemaTypeInfo property.
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Element' in that specification.
Recommendation Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
Document Object Model (DOM) Level 2 Core Specification
The definition of 'Element' in that specification.
Recommendation The normalize() method has been moved to Node.
Document Object Model (DOM) Level 1 Specification
The definition of 'Element' in that specification.
Recommendation Initial definition.

A regular one:

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'HTMLLIElement' in that specification.
Living Standard No change from HTML5.
HTML5
The definition of 'HTMLLIElement' in that specification.
Recommendation The following property is now obsolete: type.
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'HTMLLIElement' in that specification.
Recommendation No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification
The definition of 'HTMLLIElement' in that specification.
Recommendation Initial definition.

A small one (quite common):

Specification Status Comment
Web Audio API
The definition of 'OscillatorNode' in that specification.
Working Draft  

bug 924875 | In-context usage.

Compatibility tables

The compatibility tables are at the bottom of most pages, they list which browser support what.

They must stay there, but we dream of a way to present compat info inside the page (as not all methods/properties have the same compatibility levels). To do it without being intrusive (it is a side information, though important in some use cases), is a challenge. [We don't want to take this challenge for the redesign launch, but any idea is welcome].

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8.0 as webkitURL 4.0 (2.0) (non-standard name) [1]
19.0 (19.0)
10.0 15.0 as webkitURL 6.0 as webkitURL
URLUtils properties ? (Yes) ? ? ?
username, password, href, and origin ? 26.0 (26.0) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)as webkitURL 14.0 (14.0)(non-standard name) [1]
19.0 (19.0)
(Yes) 15.0 as webkitURL 6.0 as webkitURL
URLUtils properties ? Not supported ? ? ?
username, password, href, and origin ? 26.0 (26.0) ? ? ?

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard nsIDOMMozURLProperty internal type. As the only to access such an object was through window.URL, in practice, this didn't make any difference.

In context usage

 

Code Sample

@charset "utf-8";

/* This is a special template used as a custom CSS for MDN. *//*

    When editing this stylesheet, please be careful of different writing direction pages like: https://developer.mozilla.org/he/docs/HTML

    If you add a custom CSS class, please try one of the following.
        1, Report to the (evil) leader.
        2, Write a description about the class that you have added to -- https://developer.mozilla.org/en-US/docs/Project:Custom_CSS_Classes --

*/

Notes

Note: TextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextText TextTextTextTextText TextTextTextText TextTextTextText TextTextTextTextText TextTextTextTextText TextTextTextTextText

No bug filed | In-context usage.

Warning: this is a warning message!

Summary boxes

Several kind of articles have prominent summary boxes. These have two goals:

  • Presenting some technical information always at the same position so that user can find it very very quickly.
  • With the background color, give the sense of being in a specific area.

We have such boxes for CSS properties reference pages, HTML elements, JavaScript method and property, WebAudio Node, events. We may have one or two new needs for those in the next two years.

CSS

  • Initial value the concatenation of the initial values of its longhand properties:
    • flex-direction: row
    • flex-wrap: nowrap
  • Applies to flex containers
  • Inherited no
  • Media visual
  • Computed value as each of the properties of the shorthand:
    • flex-direction: as specified
    • flex-wrap: as specified
  • Animatable no
  • Canonical order order of appearance in the formal grammar of the values

HTML

Events

  • Specification HTML5
  • InterfacePhrasing content.
  • Bubbles No
  • Cancelable No
  • Target Document
  • Default Action None

JavaScript

WebAudio

  • Number of inputs 1
  • Number of outputs 1
  • Channel count mode "clamped-max"
  • Channel count 2
  • Channel interpretation "speakers"

Syntax boxes

The classical CSS syntax box:

Formal syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */

flex: inherit

The API syntax box:

b = encoder.encoding;

Banners

In general we are fighting banners, there are a few exceptions, and still a lot of banners to remove (by incorporating the information in some other widgets...).

Status of the feature

These banners are really important: they indicate if a feature is experimental, obsolete, deprecated or non-standard. This is a very important piece of information: we want to make people to think about it before using it.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

(Harmony variant:

This is a new technology, part of the ECMAScript 2015 (ES6) standard .
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

We also use special widgets to indicate it in some list, maybe we want to use similar colors and or the icon in big:

 

Others

Draft
This page is not complete.

This page is not complete
Firefox 25 hasn't reached its feature freeze yet. New features will be added to it in the near future.

Phasing out (but long-term)

Mobile Only in Gecko
Available only in Firefox Mobile as of Gecko

This content covers features introduced in Thunderbird 3

Introduced in JavaScript 1.8.5

{fx_minversion_note(3)}}

This content covers features introduced in Thunderbird 3

Introduced in JavaScript 1.8.5

Warning: texttexttext

Warning: The content of this article may be out of date. outdatedoutdated

This page is marked as protected web.html($0) for the following reason: web.html($1).
Please discuss changes that need to be made on the web.link(page.talkURI, "Talk page").

Unimplemented

I probably have missed a few of these banners. We need a rule to define border/content colors for them as we stumble on them. We don't plan to add many more, but new use case may arise in the future (I hate banners).

Badges

I also try to minimize the amount of badges (I call pages with a lot of these "Christmas trees". But here are the most common

(the counter parts of the banners, these will stay in the future but their usage strictly limited to titles or <dt> of definition lists.

Optional Read only

  • SomeAPIWithNewName Renamed from in Gecko
  • AnUnimplementedAPI Unimplemented
  • AMethodNotAvailableInXPCOM Violates the XPCOM interface guidelines

Phasing out: New in Thunderbird 5 Requires JavaScript 5 DOM level 5

Community information boxes

This box will be presented on all (or almost all) top-level landing pages for given technologies or topic areas, to provide links to the appropriate IRC channel, newsgroup, and other forums (like Stack Overflow).

Join the Community

Mailing List/Newsgroup

  • Heading: Blah
  • Heading: Blah
  • Heading: Blah

Notes: The "Mailing list/newsgroup" list will always be those four options. There will always be only one IRC option. The "Get help" section may not exist at all, or may have any number of options. See http://jsfiddle.net/3XxQL/ for the styled version of this prototype.

 

Document Tags and Contributors

Contributors to this page: DavidWalsh, Sheppy, mart3ll, teoli, chrisdavidmills
Last updated by: DavidWalsh,