mozilla
Your Search Results

    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 Editor's Draft Added the undoScope and undoManager properties.
    Pointer Events Candidate Recommendation Added the following event handlers: ongotpointercapture and onlostpointercapture.
    Added the following methods: setPointerCapture() and releasePointerCapture().
    Selectors API Level 2 Working Draft Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
    Selectors API Level 1 Recommendation Added the following methods: querySelector() and querySelectorAll().
    Pointer Lock Working Draft Added the requestPointerLock() method.
    Fullscreen API Living Standard Added the requestFullscreen() method.
    DOM Parsing and Serialization Living Standard Added the following properties: innerHTML, and outerHTML.
    Added the following method: insertAdjacentHTML().
    CSS Object Model (CSSOM) View Module 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 Recommendation Added inheritance of the ElementTraversal interface.
    DOM Living Standard Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
    Removed the schemaTypeInfo property.
    Document Object Model (DOM) Level 3 Core 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 Recommendation The normalize() method has been moved to Node.
    Document Object Model (DOM) Level 1 Specification Recommendation Initial definition.

    A regular one:

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

    A small one (quite common):

    Specification Status Comment
    Web Audio API 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 an experimental technology, part of the Harmony (ECMAScript 6) proposal.
    Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

    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. 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: Sheppy, chrisdavidmills, DavidWalsh, mart3ll, teoli
    Last updated by: DavidWalsh,