Skip to content

Commit 1daa390

Browse files
keithamuskeithamus
committed
improve table readability with key & symbols
1 parent bf28415 commit 1daa390

File tree

1 file changed

+77
-43
lines changed

1 file changed

+77
-43
lines changed

‎docs/index.html‎

Lines changed: 77 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<style>
88
html {
99
font-family: "Alliance No.1", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
10+
font-weight: 400;
11+
line-height: 28px;
1012
}
1113
.container {
1214
font-size: 14px;
@@ -23,11 +25,32 @@
2325
line-height: 52px;
2426
margin-bottom: 16px;
2527
}
26-
p {
27-
font-weight: 400;
28+
p, summary {
2829
color: #627597;
2930
font-size: 20px;
30-
line-height: 28px;
31+
}
32+
caption {
33+
margin-bottom: 14px;
34+
text-align: left;
35+
}
36+
caption p {
37+
font-size: 14px;
38+
line-height: 20px;
39+
margin: 5px 0;
40+
padding: 0;
41+
display: flex;
42+
align-items: center;
43+
}
44+
caption p span {
45+
content: ' ';
46+
display: inline-block;
47+
text-align: center;
48+
padding-top: 2px;
49+
border-radius: 3px;
50+
background: #dafbe1;
51+
height: 18px;
52+
width: 25px;
53+
margin: 0 5px;
3154
}
3255
table {
3356
border-collapse: collapse;
@@ -78,19 +101,24 @@
78101
justify-content: center;
79102
align-items: center;
80103
}
81-
td[data-supported="true"] div {
104+
td[data-supported="true"] div, caption p span {
82105
background-color: #dafbe1;
83106
color: #24292f;
107+
font-weight: bold;
84108
}
85-
td[data-supported="false"] div {
109+
td[data-supported="false"] div, caption p span.unsupported {
86110
background-color: #cf222e;
111+
color: white;
112+
font-weight: bold;
87113
}
88114
tr[data-polyfills] ~ tr td[data-polyfill] ~ [data-supported="false"] div,
89115
tr[data-polyfills] ~ tr td[data-polyfill][data-supported="false"] div,
90116
tr[data-transpiled] ~ tr td[data-code] ~ [data-supported="false"] div,
91-
tr[data-transpiled] ~ tr td[data-code][data-supported="false"] div
92-
{
117+
tr[data-transpiled] ~ tr td[data-code][data-supported="false"] div,
118+
caption p span.polyfilled,
119+
caption p span.transpiled {
93120
background-color: #ddf4ff;
121+
color: #24292f;
94122
}
95123
td[data-code]:not([data-supported]) div,
96124
td[data-polyfill]:not([data-supported]) div
@@ -116,6 +144,20 @@
116144
<h1>GitHub Feature Support Table</h1>
117145
<p>The table below details some of the client-side ECMAScript features we use to provide the largest and most advanced development platform in the world.</p>
118146
<table>
147+
<caption>
148+
<details open>
149+
<summary>Key</summary>
150+
<p>
151+
<span></span>Required feature available in this browser.
152+
</p><p>
153+
<span class="unsupported">!</span>Required feature, not available in this browser.
154+
</p><p>
155+
<span class="polyfilled">*</span>Not avaible in this browser, but polyfilled using this library.
156+
</p><p>
157+
<span class="transpiled">**</span>Not available in this browser, but transpiled to a compatible syntax.
158+
</p>
159+
</details>
160+
</caption>
119161
<thead>
120162
<tr>
121163
<th></th>
@@ -136,7 +178,7 @@ <h1>GitHub Feature Support Table</h1>
136178
<code>Blob Constructor</code>
137179
</a>
138180
</th>
139-
<td data-code="typeof Blob === 'function'"><div></div></td>
181+
<td data-code="typeof Blob === 'function'"><div>!</div></td>
140182
<td data-supported="true"><div>5+</div></td>
141183
<td data-supported="true"><div>12+</div></td>
142184
<td data-supported="true"><div>4+</div></td>
@@ -150,7 +192,7 @@ <h1>GitHub Feature Support Table</h1>
150192
<code>PerformanceObserver Constructor</code>
151193
</a>
152194
</th>
153-
<td data-code="typeof PerformanceObserver === 'function'"><div></div></td>
195+
<td data-code="typeof PerformanceObserver === 'function'"><div>!</div></td>
154196
<td data-supported="true"><div>52+</div></td>
155197
<td data-supported="true"><div>79+</div></td>
156198
<td data-supported="true"><div>57+</div></td>
@@ -164,7 +206,7 @@ <h1>GitHub Feature Support Table</h1>
164206
<code>Intl Constructor</code>
165207
</a>
166208
</th>
167-
<td data-code="typeof Intl === 'object'"><div></div></td>
209+
<td data-code="typeof Intl === 'object'"><div>!</div></td>
168210
<td data-supported="true"><div>24+</div></td>
169211
<td data-supported="true"><div>12+</div></td>
170212
<td data-supported="true"><div>29+</div></td>
@@ -178,7 +220,7 @@ <h1>GitHub Feature Support Table</h1>
178220
<code>MutationObserver Constructor</code>
179221
</a>
180222
</th>
181-
<td data-code="typeof MutationObserver === 'function'"><div></div></td>
223+
<td data-code="typeof MutationObserver === 'function'"><div>!</div></td>
182224
<td data-supported="true"><div>26+</div></td>
183225
<td data-supported="true"><div>12+</div></td>
184226
<td data-supported="true"><div>14+</div></td>
@@ -192,7 +234,7 @@ <h1>GitHub Feature Support Table</h1>
192234
<code>URLSearchParams Constructor</code>
193235
</a>
194236
</th>
195-
<td data-code="typeof URLSearchParams === 'function'"><div></div></td>
237+
<td data-code="typeof URLSearchParams === 'function'"><div>!</div></td>
196238
<td data-supported="true"><div>49+</div></td>
197239
<td data-supported="true"><div>17+</div></td>
198240
<td data-supported="true"><div>29+</div></td>
@@ -206,7 +248,7 @@ <h1>GitHub Feature Support Table</h1>
206248
<code>WebSocket Constructor</code>
207249
</a>
208250
</th>
209-
<td data-code="typeof WebSocket === 'function'"><div></div></td>
251+
<td data-code="typeof WebSocket === 'function'"><div>!</div></td>
210252
<td data-supported="true"><div>4+</div></td>
211253
<td data-supported="true"><div>12+</div></td>
212254
<td data-supported="true"><div>11+</div></td>
@@ -220,7 +262,7 @@ <h1>GitHub Feature Support Table</h1>
220262
<code>IntersectionObserver Constructor</code>
221263
</a>
222264
</th>
223-
<td data-code="typeof IntersectionObserver === 'function'"><div></div></td>
265+
<td data-code="typeof IntersectionObserver === 'function'"><div>!</div></td>
224266
<td data-supported="true"><div>51+</div></td>
225267
<td data-supported="true"><div>15+</div></td>
226268
<td data-supported="true"><div>55+</div></td>
@@ -234,7 +276,7 @@ <h1>GitHub Feature Support Table</h1>
234276
<code>queueMicrotask Function</code>
235277
</a>
236278
</th>
237-
<td data-code="typeof queueMicrotask === 'function'"><div></div></td>
279+
<td data-code="typeof queueMicrotask === 'function'"><div>!</div></td>
238280
<td data-supported="true"><div>71+</div></td>
239281
<td data-supported="true"><div>79+</div></td>
240282
<td data-supported="true"><div>69+</div></td>
@@ -248,7 +290,7 @@ <h1>GitHub Feature Support Table</h1>
248290
<code>TextEncoder Constructor</code>
249291
</a>
250292
</th>
251-
<td data-code="typeof TextEncoder === 'function'"><div></div></td>
293+
<td data-code="typeof TextEncoder === 'function'"><div>!</div></td>
252294
<td data-supported="true"><div>38+</div></td>
253295
<td data-supported="true"><div>79+</div></td>
254296
<td data-supported="true"><div>18+</div></td>
@@ -262,7 +304,7 @@ <h1>GitHub Feature Support Table</h1>
262304
<code>TextDecoder Constructor</code>
263305
</a>
264306
</th>
265-
<td data-code="typeof TextDecoder === 'function'"><div></div></td>
307+
<td data-code="typeof TextDecoder === 'function'"><div>!</div></td>
266308
<td data-supported="true"><div>38+</div></td>
267309
<td data-supported="true"><div>79+</div></td>
268310
<td data-supported="true"><div>19+</div></td>
@@ -276,7 +318,7 @@ <h1>GitHub Feature Support Table</h1>
276318
<code>customElements</code>
277319
</a>
278320
</th>
279-
<td data-code="typeof customElements === 'object'"><div></div></td>
321+
<td data-code="typeof customElements === 'object'"><div>!</div></td>
280322
<td data-supported="true"><div>54+</div></td>
281323
<td data-supported="true"><div>79+</div></td>
282324
<td data-supported="true"><div>63+</div></td>
@@ -290,7 +332,7 @@ <h1>GitHub Feature Support Table</h1>
290332
<code>HTMLDetailsElement Constructor</code>
291333
</a>
292334
</th>
293-
<td data-code="typeof HTMLDetailsElement === 'function'"><div></div></td>
335+
<td data-code="typeof HTMLDetailsElement === 'function'"><div>!</div></td>
294336
<td data-supported="true"><div>10+</div></td>
295337
<td data-supported="true"><div>79+</div></td>
296338
<td data-supported="true"><div>49+</div></td>
@@ -304,7 +346,7 @@ <h1>GitHub Feature Support Table</h1>
304346
<code>AbortController Constructor</code>
305347
</a>
306348
</th>
307-
<td data-code="typeof AbortController === 'function'"><div></div></td>
349+
<td data-code="typeof AbortController === 'function'"><div>!</div></td>
308350
<td data-supported="true"><div>66+</div></td>
309351
<td data-supported="true"><div>16+</div></td>
310352
<td data-supported="true"><div>57+</div></td>
@@ -318,7 +360,7 @@ <h1>GitHub Feature Support Table</h1>
318360
<code>AbortSignal Constructor</code>
319361
</a>
320362
</th>
321-
<td data-code="typeof AbortSignal === 'function'"><div></div></td>
363+
<td data-code="typeof AbortSignal === 'function'"><div>!</div></td>
322364
<td data-supported="true"><div>66+</div></td>
323365
<td data-supported="true"><div>16+</div></td>
324366
<td data-supported="true"><div>57+</div></td>
@@ -332,7 +374,7 @@ <h1>GitHub Feature Support Table</h1>
332374
<code>globalThis Object</code>
333375
</a>
334376
</th>
335-
<td data-code="typeof globalThis === 'object'"><div></div></td>
377+
<td data-code="typeof globalThis === 'object'"><div>!</div></td>
336378
<td data-supported="true"><div>71+</div></td>
337379
<td data-supported="true"><div>79+</div></td>
338380
<td data-supported="true"><div>65+</div></td>
@@ -346,7 +388,7 @@ <h1>GitHub Feature Support Table</h1>
346388
<code>FormData.entries</code>
347389
</a>
348390
</th>
349-
<td data-code="'entries' in FormData.prototype"><div></div></td>
391+
<td data-code="'entries' in FormData.prototype"><div>!</div></td>
350392
<td data-supported="true"><div>50+</div></td>
351393
<td data-supported="true"><div>18+</div></td>
352394
<td data-supported="true"><div>44+</div></td>
@@ -360,7 +402,7 @@ <h1>GitHub Feature Support Table</h1>
360402
<code>Element.toggleAttribute</code>
361403
</a>
362404
</th>
363-
<td data-code="'toggleAttribute' in Element.prototype"><div></div></td>
405+
<td data-code="'toggleAttribute' in Element.prototype"><div>!</div></td>
364406
<td data-supported="true"><div>69+</div></td>
365407
<td data-supported="true"><div>18+</div></td>
366408
<td data-supported="true"><div>63+</div></td>
@@ -374,7 +416,7 @@ <h1>GitHub Feature Support Table</h1>
374416
<code>Object.fromEntries</code>
375417
</a>
376418
</th>
377-
<td data-code="'fromEntries' in Object"><div></div></td>
419+
<td data-code="'fromEntries' in Object"><div>!</div></td>
378420
<td data-supported="true"><div>73+</div></td>
379421
<td data-supported="true"><div>79+</div></td>
380422
<td data-supported="true"><div>63+</div></td>
@@ -388,7 +430,7 @@ <h1>GitHub Feature Support Table</h1>
388430
<code>Array.flatMap</code>
389431
</a>
390432
</th>
391-
<td data-code="'flatMap' in Array.prototype"><div></div></td>
433+
<td data-code="'flatMap' in Array.prototype"><div>!</div></td>
392434
<td data-supported="true"><div>69+</div></td>
393435
<td data-supported="true"><div>79+</div></td>
394436
<td data-supported="true"><div>62+</div></td>
@@ -402,7 +444,7 @@ <h1>GitHub Feature Support Table</h1>
402444
<code>String.trimEnd</code>
403445
</a>
404446
</th>
405-
<td data-code="'trimEnd' in String.prototype"><div></div></td>
447+
<td data-code="'trimEnd' in String.prototype"><div>!</div></td>
406448
<td data-supported="true"><div>66+</div></td>
407449
<td data-supported="true"><div>79+</div></td>
408450
<td data-supported="true"><div>61+</div></td>
@@ -416,7 +458,7 @@ <h1>GitHub Feature Support Table</h1>
416458
<code>String.matchAll</code>
417459
</a>
418460
</th>
419-
<td data-code="'matchAll' in String.prototype"><div></div></td>
461+
<td data-code="'matchAll' in String.prototype"><div>!</div></td>
420462
<td data-supported="true"><div>73+</div></td>
421463
<td data-supported="true"><div>79+</div></td>
422464
<td data-supported="true"><div>67+</div></td>
@@ -600,7 +642,7 @@ <h1>GitHub Feature Support Table</h1>
600642
<code>Exponentiation Operator</code>
601643
</a>
602644
</th>
603-
<td data-code="1 ** 1"><div></div></td>
645+
<td data-code="1 ** 1"><div>!</div></td>
604646
<td data-supported="true"><div>52+</div></td>
605647
<td data-supported="true"><div>14+</div></td>
606648
<td data-supported="true"><div>52+</div></td>
@@ -614,7 +656,7 @@ <h1>GitHub Feature Support Table</h1>
614656
<code>Object Rest/Spead</code>
615657
</a>
616658
</th>
617-
<td data-code="var {a, ...rest} = { ...{ b: 2 }, a: 1 }; rest.b + a === 3"><div></div></td>
659+
<td data-code="var {a, ...rest} = { ...{ b: 2 }, a: 1 }; rest.b + a === 3"><div>!</div></td>
618660
<td data-supported="true"><div>60+</div></td>
619661
<td data-supported="true"><div>79+</div></td>
620662
<td data-supported="true"><div>55+</div></td>
@@ -628,7 +670,7 @@ <h1>GitHub Feature Support Table</h1>
628670
<code>RegExp Named Capture Groups</code>
629671
</a>
630672
</th>
631-
<td data-code="/(?<a>a)/.exec('a').groups.a === 'a'"><div></div></td>
673+
<td data-code="/(?<a>a)/.exec('a').groups.a === 'a'"><div>!</div></td>
632674
<td data-supported="true"><div>64+</div></td>
633675
<td data-supported="true"><div>79+</div></td>
634676
<td data-supported="true"><div>78+</div></td>
@@ -642,7 +684,7 @@ <h1>GitHub Feature Support Table</h1>
642684
<code>Async Generators & for await</code>
643685
</a>
644686
</th>
645-
<td data-code="(async function(){async function*iter(){ yield 1 }let c=0;for await(const i of iter()) { c+= i};return c===1})()"><div></div></td>
687+
<td data-code="(async function(){async function*iter(){ yield 1 }let c=0;for await(const i of iter()) { c+= i};return c===1})()"><div>!</div></td>
646688
<td data-supported="true"><div>63+</div></td>
647689
<td data-supported="true"><div>79+</div></td>
648690
<td data-supported="true"><div>57+</div></td>
@@ -656,7 +698,7 @@ <h1>GitHub Feature Support Table</h1>
656698
<code>Optional Catch Binding</code>
657699
</a>
658700
</th>
659-
<td data-code="try{}catch{};true"><div></div></td>
701+
<td data-code="try{}catch{};true"><div>!</div></td>
660702
<td data-supported="true"><div>66+</div></td>
661703
<td data-supported="true"><div>79+</div></td>
662704
<td data-supported="true"><div>58+</div></td>
@@ -765,16 +807,6 @@ <h1>GitHub Feature Support Table</h1>
765807
</tr>
766808
</tbody>
767809
</table>
768-
<p>
769-
<small>
770-
* Not supported natively, but polyfilled using this library.
771-
</small>
772-
</p>
773-
<p>
774-
<small>
775-
** Not supported natively, but transpiled to a compatible syntax.
776-
</small>
777-
</p>
778810
</div>
779811
<script>
780812
function getBrowser(useragent) {
@@ -803,6 +835,7 @@ <h1>GitHub Feature Support Table</h1>
803835
}
804836
Promise.resolve(supported).then((value) => {
805837
el.setAttribute('data-supported', Boolean(value))
838+
if (value) el.querySelector('div').textContent = ''
806839
})
807840
}
808841
</script>
@@ -834,6 +867,7 @@ <h1>GitHub Feature Support Table</h1>
834867
}
835868
Promise.resolve(supported).then((value) => {
836869
el.setAttribute('data-supported', Boolean(value))
870+
if (value) el.querySelector('div').textContent = ''
837871
})
838872
}
839873
</script>

0 commit comments

Comments
 (0)