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

Jump to bottom

Add HTML browser matrix (WIP) #13

Open
tedmiston opened this issue Mar 23, 2023 · 0 comments
Open

Add HTML browser matrix (WIP) #13

tedmiston opened this issue Mar 23, 2023 · 0 comments
Assignees
@tedmiston

Comments

@tedmiston
Copy link
Owner

tedmiston commented Mar 23, 2023 •
edited
Loading

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
@tedmiston tedmiston self-assigned this Mar 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tedmiston tedmiston

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tedmiston