Skip to content

Add HTML browser matrix (WIP) #13

New issue
New issue
Open
Open
Add HTML browser matrix (WIP)#13
Assignees
tedmiston
@tedmiston

Description

@tedmiston
tedmiston
opened on Mar 23, 2023

This is harder to read than the current markdown table, but it paints a more complete picture as support for more browsers are added.

I am using Tables Generator as an editor for this. To import the table for editing: File > Paste table data..., paste the code below, check "Paste with formatting", then click "Load".

Note: There are some issues with its HTML output, like lack of support for multiple levels of table headers, so this is a WIP start of a complete solution.

Browser Matrix

todo: make browser columns an equal fixed width

todo: explore if transposing source vs destination is more intuitive

Code:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-9wq8{border-color:inherit;text-align:center;vertical-align:middle}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-5frq{font-style:italic;text-align:center;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-7btt{border-color:inherit;font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-xxp7{font-style:italic;font-weight:bold;text-align:center;vertical-align:middle}
.tg .tg-g7sd{border-color:inherit;font-weight:bold;text-align:left;vertical-align:middle}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"></th>
    <th class="tg-0lax"></th>
    <th class="tg-5frq" colspan="9"><span style="font-weight:bold">Source Browser</span></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-baqh"></td>
    <td class="tg-0pky"></td>
    <td class="tg-7btt">Chrome</td>
    <td class="tg-7btt">Safari</td>
    <td class="tg-7btt">Edge</td>
    <td class="tg-7btt">Firefox</td>
    <td class="tg-7btt">Opera</td>
    <td class="tg-7btt">Brave</td>
    <td class="tg-7btt">Arc</td>
    <td class="tg-7btt">Sidekick</td>
    <td class="tg-7btt">Vivaldi</td>
  </tr>
  <tr>
    <td class="tg-xxp7" rowspan="9">Destination<br>Browser</td>
    <td class="tg-g7sd">Chrome</td>
    <td class="tg-9wq8">⬜️</td>
    <td class="tg-9wq8">🟩</td>
    <td class="tg-9wq8">🟨</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟩</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Safari</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟩</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟩</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Edge</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Firefox</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Opera</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Brave</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟩</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟩</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟨</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Arc</td>
    <td class="tg-9wq8">⬛️</td>
    <td class="tg-9wq8">⬛️</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Sidekick</td>
    <td class="tg-9wq8">🟪</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟪</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
  </tr>
  <tr>
    <td class="tg-g7sd">Vivaldi</td>
    <td class="tg-9wq8">🟥</td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬛️</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">🟥</span></td>
    <td class="tg-9wq8"><span style="font-weight:400;font-style:normal">⬜️</span></td>
  </tr>
</tbody>
</table>

Preview:

Legend

Code:

Color Meaning Notes
⬜️ N/A
🟩 Supported Already developed
🟨 Planned Planned for development in backlog
⬛️ Blocked Blocked from development (e.g., browser is waitlisted)
🟪 Backburner Planned for development in icebox
🟥 Unsupported Not supported due to technical constraint

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions