|
<noinclude> |
|
== Compatibility Template == |
|
Display a compatibility table. |
|
|
|
[[File:compatibility-table-sample.png|800px|link=|How a browser feature compatibility table is rendered]] |
|
|
|
=== Logistics === |
|
* '''Project page''': See [[WPD:Projects/CompaTables]] |
|
* '''Implementation details''': See [[WPD:Infrastructure/Components/CompaTables]] |
|
* '''Add data''': Make a [https://github.com/webplatform/compatibility-data ''pull requests'' in '''compatibility-data''' repo] |
|
* '''Found bug in visualisation''': Create an issue in [https://github.com/webplatform/mediawiki/issues/new?title=Table%20display%20issue%20in%20URL%20&labels=CompaTables&assignee=renoirb&body=URL:%20Insert%20address%20where%20you%20found%20the%20problem the CompaTables Extension project issue tracker] |
|
|
|
=== Origin of the data === |
|
Data was originally polled from [http://developer.mozilla.org Mozilla Developer Network ("MDN")] as a one time import. The data is read using an [https://github.com/webplatform/mdn-compat-importer importer we made for this purpose] form MDN, converted into a JSON file (see below) that we used as a starting point. |
|
|
|
=== How to improve the data === |
|
At this time you can add corrections by [https://github.com/webplatform/compatibility-data making a ''pull requests'']. |
|
|
|
=== Can I use the data? === |
|
Yes, please. We provide both [http://docs.webplatform.org/compat/data.json '''data.json''' raw data] that we also use to generate this view, and a [http://docs.webplatform.org/compat/data.json "''human-friendly''" ('''data-human.json''') version] counterpart. |
|
|
|
== How to use == |
|
Two ways to use. Either through an ''HTML-ish'' tag in a Wiki page, or a through this template. |
|
|
|
* '''[[Property:Compatibility_format]]''' can be: |
|
** <tt>table</tt> |
|
** <tt>list</tt> |
|
* '''[[Property:Compatibility_topic]]''' can be one of the top level: |
|
** <tt>html</tt> |
|
** <tt>css</tt> |
|
** <tt>html</tt> |
|
** <tt>svg</tt> |
|
** <tt>mathml</tt> |
|
** <tt>webapi</tt> |
|
** <tt>webgl</tt> |
|
** <tt>events</tt> |
|
** <tt>javascript</tt> |
|
** <tt>websockets</tt> |
|
* '''[[Property:Compatibility_feature]]''': is a one word 2nd level inside the compatibility table file. |
|
|
|
|
|
=== Tag === |
|
In a wiki page, include a <tt><compatibility /></tt> tag like this: |
|
|
|
<syntaxHighlight><compatibility topic="css" feature="border-radius" format="table"></compatibility></syntaxHighlight> |
|
|
|
=== In a template === |
|
|
|
This is most useful if its included in a page that covers a given topic (e.g. CSS, SVG, etc.). For example, in CSS, we have a block in [[Template:CSS_Property]]. |
|
|
|
<pre> |
|
{{Compatibility |
|
|topic= |
|
|feature= |
|
|format=table |
|
}} |
|
</pre> |
|
|
|
In the end, it gets called like this: |
|
|
|
<nowiki>{{#tag:compatibility||feature={{#titleparts:{{PAGENAME}}||-1}}|topic=css|format=table}}</nowiki> |
|
|
|
This snippet would be perfect for any of the CSS property pages. In the end, it would take the URL we are in, and put it in the <tt>feature=""</tt> for us. |
|
|
|
For example, if we were on a page that has this present template call at the address <tt>/test/css/properties/border-radius</tt>, it would take the '''<tt>border-radius</tt>''' part and put it so the Template as if we would had manually called it like this: |
|
|
|
<nowiki><compatibility feature="border-radius" topic="css" format="table"></compatibility></nowiki> |
|
|
|
</noinclude><includeonly> |
|
{{#tag:compatibility||feature={{{Compatibility_feature|}}}|topic={{{Compatibility_topic|}}}|format={{{Compatibility_format|table}}}}} |
|
</includeonly> |
\o/ @eliezerb