mozilla
Your Search Results

    Compatibility tables

    We have standardized the appearance of compatibility tables for our open web documentation; that is, documentation of technologies such as the DOM, HTML, CSS, JavaScript, SVG, and so forth, that are shared across all browsers.

    In order to make it as easy as possible to create and maintain these tables, we have a set of templates to use, as well as the following copy-and-paste ready pre-built table you should use for all new compatibility tables.

    Compatibility table template

    You should copy and paste all the following content into your article (first switching into the editor before copying), starting with the use of the {{CompatibilityTable()}} template and including both of the following tables. The first table contains compatibility information for the desktop versions of browsers, and the second table contains compatibility information for the mobile versions. This should get you all the content, including the required <div> blocks.

    Browser compatibility

    Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
    Basic support ? ? ? ? ? ?
    Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
    (Safari/Chrome/Firefox/etc)
    Basic support ? ? ? ? ? ? ?

    Using the table

    You should fill out the table with appropriate information for each browser, as known. You may include just the version that introduced support, or you may optionally include additional notes (such as "Introduced in version X as -moz-foo"). Feel free to include links to appropriate additional documentation if needed or appropriate, and be sure to use the templates provided to help keep the look and feel of the version information consistent.

    The important thing is to use the {{CompatibilityTable()}} template and then have two <div> blocks, one with the ID "compat-desktop" and one with the ID "compat-mobile", each containing an appropriate table in the format shown above. The tables should use the class "compat-table" to achieve the correct style.

    Templates to use in the compatibility table

    In order to help standardize appearance, and let us more easily change the look and feel of the tables over time, we have a number of templates you should use in the table cells:

    Template:CompatNo
    Use {{CompatNo()}} to indicate that the browser does not support the feature at all.
    Template:CompatUnknown
    Use {{CompatUnknown()}} to indicate that the browser's support for the feature is not known. Hopefully someone who does know will come along and fill this in for you later!
    Template:CompatVersionUnknown
    Use {{CompatVersionUnknown()}} to indicate that the browser has support for the feature but the earliest version of support is not known. Hopefully someone who does know will come along and fill this in for you later!
    Template:CompatNightly
    Use {{CompatNightly(browser)}} to indicate that the browser has support for the feature but only in nightly builds. Specify a keyword indicating which browser you're referring to, and the template will insert a link to nightlies for that browser if such nightlies exist.
    • firefox / firefoxmobile
    • chrome / chromemobile
    • ie / iemobile
    • opera / operamobile
    • safari / safarimobile
    Nightly links are currently automatically inserted for Firefox, Firefox mobile, Chrome, and Safari. Using CompatNightly for Opera currently provides a link to snapshot.opera.com, which doesn't necessarily offer nightlies but offers developmental snapshots.
    Template:CompatGeckoDesktop
    Use {{CompatGeckoDesktop(geckoversion)}} to indicate compatibility was introduced in the specified Gecko version on desktop Firefox; we have this special template for Gecko so we can let the template map Gecko versions to Firefox releases, given that they don't always correlate in obvious ways (and the relationship can change over time during development).
    Template:CompatGeckoMobile
    Use {{CompatGeckoMobile(geckoversion)}} to indicate compatibility was introduced in the specified Gecko version on mobile Firefox; we have this special template for Gecko so we can let the template map Gecko versions to Firefox releases, given that they don't always correlate in obvious ways (and the relationship can change over time during development).
    Template:CompatChrome
    Use {{CompatChrome(chromeversion)}} to indicate compatibility was introduced in the specified Chrome version.
    For prefixed features
    Some features are prefixed with a vendor-specific name (such as -moz- or -webkit-) when implemented before the specification is finalized. In order to call attention to the compatibility table in these cases, you should use {{SeeCompatTable()}} at the top of the page. This generates a box explaining this situation, with a link to the compatibility table. The output looks like this:

    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.

    All templates are tagged with CompatTemplate.

    Webkit specific tags

    WebKitBug inserts a link to a bug in the WebKit bug database. This makes it easy for writers to add annotations to documentation to guide developers to information about things that are works in progress in WebKit. You use it like this: {{webkitbug(42)}}, and the result is “WebKit bug 42″, linked to the corresponding bug in the bug database.

    Use {{unimplemented_inline_webkit(42)}}, which inserts a box that says “Unimplemented (see WebKit bug 42)”, with a link to the bug.

    See MDN for WebKit Writers for more details.

    Adding a browser to the tables

    We're in the process of building a new compatibility database system which will be seeded with information from these compatibility tables. The new system will automatically generate appropriate tables as needed. Unless you have information to share that's really important (such as to cover a major new browser), you should probably not bother to change existing compatibility tables. Note also that at present, if you want to add a column to the tables as displayed, you have to manually update each affected page's compatibility tables; this too will change with the new system. No launch date is decided upon yet; see the compatibility database project plan for details and status.

    Note: Please discuss your proposal to add a browser to the compatibility tables on the dev-mdc mailing list before making the change. This is a major undertaking that needs to be planned properly.

    If you do decide to add the column, please insert it in alphabetical order.

    Document Tags and Contributors

    Last updated by: Sheppy,
    Hide Sidebar