Browser compatibility table - Component

A decorated list of browsers and their in-context support with data source link.

View full screen
Code

Source (Nunjucks)

<figure class="browser-compat cluster">
  <figcaption class="browser-compat__label">{{ data.label }}</figcaption>
  <ul class="browser-compat__items cluster" role="list">
    {% for item in data.items %}
    <li class="tooltip">
      <span class="tooltip__content">{{ item.label }}</span>
      <div class="browser-compat__item" aria-hidden="true">
        <img src="/images/icons/{{ item.image }}" alt="{{ item.name }}" />
        <span class="indicator {{ item.indicator.utilities }}">{{ item.indicator.content }}</span>
      </div>
    </li>
    {% endfor %}
  </ul>
	<p>
    <a href="{{ data.link.url }}" target="_blank">{{ data.link.text }}</a>
	</p>
</figure>

Output

<figure class="browser-compat cluster">
  <figcaption class="browser-compat__label">Browser support:</figcaption>
  <ul class="browser-compat__items cluster" role="list">
    <li class="tooltip">
      <span class="tooltip__content">Chrome 74, Supported</span>
      <div class="browser-compat__item" aria-hidden="true">
        <img src="/images/icons/chrome.svg" alt="Chrome 74" />
        <span class="indicator bg-state-good-bg color-state-good-text">74</span>
      </div>
    </li>
    <li class="tooltip">
      <span class="tooltip__content">Firefox, Not supported</span>
      <div class="browser-compat__item" aria-hidden="true">
        <img src="/images/icons/firefox.svg" alt="Firefox" />
        <span class="indicator bg-state-bad-bg color-state-bad-text">×</span>
      </div>
    </li>
    <li class="tooltip">
      <span class="tooltip__content">Edge 79, Supported</span>
      <div class="browser-compat__item" aria-hidden="true">
        <img src="/images/icons/edge.svg" alt="Edge 79" />
        <span class="indicator bg-state-good-bg color-state-good-text">79</span>
      </div>
    </li>
    <li class="tooltip">
      <span class="tooltip__content">Safari, Not supported</span>
      <div class="browser-compat__item" aria-hidden="true">
        <img src="/images/icons/safari.svg" alt="Safari" />
        <span class="indicator bg-state-bad-bg color-state-bad-text">✕</span>
      </div>
    </li>
  </ul>
  <p>
    <a
      href="https://developer.mozilla.org/docs/Web/API/BackgroundFetchEvent#browser_compatibility"
      target="_blank"
      >Source</a
    >
  </p>
</figure>