Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

require multiple BCD tables by specifying browser-compat as an array #20051

Merged
merged 5 commits into from
Oct 20, 2022
+13 −3
Merged

require multiple BCD tables by specifying browser-compat as an array #20051

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b722311
require multiple BCD tables by specifying `browser-compat` as an array
yin1999 Aug 28, 2022
408b9eb
Apply suggestions from code review
yin1999 Aug 28, 2022
5002734
Apply suggestions from code review
yin1999 Oct 17, 2022
d05414b
Merge branch 'main' into patch-1
yin1999 Oct 17, 2022
a2f3d12
Merge branch 'main' into patch-1
bsmth Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions files/en-us/mdn/writing_guidelines/page_structures/compatibility_tables/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,7 @@ First you need to find the query string for the relevant compatibility data you
The compatibility data query should be specified in the page front-matter using the `browser-compat` key.
For example, for the {{domxref("AbortController")}} this would be added as shown below:

```plain
```yaml
yin1999 marked this conversation as resolved.
Show resolved Hide resolved
---
title: AbortController
slug: Web/API/AbortController
Expand All @@ -484,7 +484,21 @@ browser-compat: api.AbortController

The compatibility and specification tables corresponding to the key are then automatically rendered in place of the `\{{Compat}}` and `\{{Specifications}}` macros in the source.

You can also specify the desired API as the first argument to the macro as shown: `\{{Compat("api.AbortController")}}`. This can be useful if multiple compatibility tables are required on the same page.
> **Note:** If multiple compatibility/specification tables are required on the same page, you can specify the value of `browser-compat` as an array.
> For example, for the {{domxref("Channel Messaging API")}} this would be added as shown below:
>
> ```yaml
yin1999 marked this conversation as resolved.
Show resolved Hide resolved
> ---
> title: Channel Messaging API
> slug: Web/API/Channel_Messaging_API
>
> …
>
> browser-compat:
> - api.MessageChannel
> - api.MessagePort
> ---
> ```

The macro calls generate the following tables (and corresponding set of notes):

Expand Down