diff --git a/index.html b/index.html index 0289391..aae0877 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,7 @@ --header-background-color: #DDD; --header-text-color: #00A; --different-text-color: magenta; + --unknown-text-color: #458; } @media (prefers-color-scheme: dark) { @@ -58,6 +59,7 @@ --header-background-color: #333; --header-text-color: lightgreen; --different-text-color: orange; + --unknown-text-color: #8AF; } } body { @@ -133,6 +135,9 @@ .different-worse { color: var(--error-text-color); } +.unknown { + color: var(--unknown-text-color); +} .limit>td:first-child, .feature>td:first-child, diff --git a/index.js b/index.js index 8cd7486..fdee523 100644 --- a/index.js +++ b/index.js @@ -244,15 +244,20 @@ function markDifferencesInLimits(adapter) { .map(([k, v]) => { const info = kLimitInfo[k]; const isDiff = info && info.default !== v; - const diffClass = isDiff - ? differenceWorse(info, v) ? 'different-worse' : 'different-better' - : ''; + const diffClass = info + ? (isDiff + ? differenceWorse(info, v) ? 'different-worse' : 'different-better' + : '') + : 'unknown'; const value = v > 1024 && info ? `${v} (${shortSizeByType(v, info.type)})` : v; return [ k, isDiff ? [value, {className: `${diffClass} nowrap`, title: `default${adapter.isCompatibilityMode ? ' in compat' : ''}: ${shortSizeByType(adapter.isCompatibilityMode ? info.compat : info.default, info.type)}`}] - : [value, {className: 'nowrap', title: 'same as default'}] + : info + ? [value, {className: 'nowrap', title: 'same as default'}] + : [value, {className: 'unknown nowrap', title: 'unknown limit (new?)'}] + ]; }) );