diff --git a/scripts/generate-css-features.ts b/scripts/generate-css-features.ts index c24d0a1d..3085ffb1 100644 --- a/scripts/generate-css-features.ts +++ b/scripts/generate-css-features.ts @@ -42,7 +42,8 @@ for (const [id, feature] of Object.entries(features)) { support: baseline === false ? (Object.keys(feature.status.support ?? {}).filter((id) => id in browsers) as BrowserId[]) - : undefined + : undefined, + caniuse: feature.caniuse?.[0] } for (const compat_feature of css_compat_keys) { diff --git a/src/app.html b/src/app.html index 8908fb70..37dd2435 100644 --- a/src/app.html +++ b/src/app.html @@ -48,6 +48,9 @@ d="M4.967 15C2.224 15 0 12.762 0 10c0-2.761 2.224-5 4.967-5H10v10H4.967zm7.04 7.475a3.359 3.359 0 0 1-1.095-1.637l-1.151-3.827H4.636l1.905 5.883A1.6 1.6 0 0 0 8.062 24h3.439a.846.846 0 0 0 .534-1.501l-.028-.024zM12 5v10c3.164.509 7.161 1.992 12 5V0c-4.964 3.085-8.876 4.502-12 5z" /> + + + diff --git a/src/lib/baseline/baseline-status.test.ts b/src/lib/baseline/baseline-status.test.ts index 7f089aa8..5e6b985b 100644 --- a/src/lib/baseline/baseline-status.test.ts +++ b/src/lib/baseline/baseline-status.test.ts @@ -26,11 +26,16 @@ describe('is_browser_supported', () => { expect(is_browser_supported(feature({ baseline: 'low' }), 'newly', [])).toBe(true) }) - test('limited availability supported when any browser id matches', () => { + test('limited availability supported when every browser id matches', () => { let f = feature({ baseline: false, support: ['chrome', 'chrome_android'] }) expect(is_browser_supported(f, 'limited', ['chrome', 'chrome_android'])).toBe(true) }) + test('limited availability unsupported when only some browser ids in the family match', () => { + let f = feature({ baseline: false, support: ['safari'] }) + expect(is_browser_supported(f, 'limited', ['safari', 'safari_ios'])).toBe(false) + }) + test('limited availability unsupported when no browser id matches', () => { let f = feature({ baseline: false, support: ['firefox', 'firefox_android'] }) expect(is_browser_supported(f, 'limited', ['chrome', 'chrome_android'])).toBe(false) diff --git a/src/lib/baseline/baseline-status.ts b/src/lib/baseline/baseline-status.ts index c580fa62..bd931455 100644 --- a/src/lib/baseline/baseline-status.ts +++ b/src/lib/baseline/baseline-status.ts @@ -15,9 +15,9 @@ export function get_baseline_availability(feature: CssFeature): BaselineAvailabi /** * Whether a browser family (e.g. Chrome desktop + Chrome Android) supports - * a feature. A family counts as supported if any of its variants does, - * since a Baseline feature only ends up "limited" when at least one browser - * lacks support - not necessarily every variant of every browser. + * a feature. A family only counts as supported if every one of its variants + * does - e.g. Safari desktop supporting a feature that Safari iOS doesn't + * is still partial support, not a green check for "Safari". */ export function is_browser_supported( feature: CssFeature, @@ -25,7 +25,7 @@ export function is_browser_supported( browser_ids: BrowserId[] ): boolean { if (availability === 'limited') { - return browser_ids.some((id) => feature.support?.includes(id)) + return browser_ids.every((id) => feature.support?.includes(id)) } return true } diff --git a/src/lib/baseline/css-feature.ts b/src/lib/baseline/css-feature.ts index c655a8df..4bea640e 100644 --- a/src/lib/baseline/css-feature.ts +++ b/src/lib/baseline/css-feature.ts @@ -12,4 +12,8 @@ export type CssFeature = { * Only present when `baseline` is `false` - tracked/newly/widely-available features don't need it. */ support?: (keyof typeof browsers)[] + /** + * caniuse.com feature slug, when web-features has a mapping for it. + */ + caniuse?: string } diff --git a/src/lib/components/BaselineStatus.svelte b/src/lib/components/BaselineStatus.svelte index 943568b7..db7b6cce 100644 --- a/src/lib/components/BaselineStatus.svelte +++ b/src/lib/components/BaselineStatus.svelte @@ -6,9 +6,15 @@ let status = $derived(get_baseline_availability(feature)) - let label = $derived( - status === 'widely' ? 'Widely available' : status === 'newly' ? 'Newly available' : 'Limited availability' - ) + let label = $derived.by(() => { + if (status === 'widely') { + return 'Widely available' + } + if (status === 'newly') { + return 'Newly available' + } + return 'Limited availability' + })
diff --git a/src/lib/components/BaselineSupport.svelte b/src/lib/components/BaselineSupport.svelte index c9a09e92..b50e3d6a 100644 --- a/src/lib/components/BaselineSupport.svelte +++ b/src/lib/components/BaselineSupport.svelte @@ -15,63 +15,44 @@ {@const supported = is_browser_supported(feature, availability, ids)}
  • {name}: {supported ? 'Supported' : 'Not supported'} - -
    • {/each} diff --git a/src/lib/components/BaselineSupportMatrix.svelte b/src/lib/components/BaselineSupportMatrix.svelte deleted file mode 100644 index 904e52ca..00000000 --- a/src/lib/components/BaselineSupportMatrix.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index 0ada1c9f..59bf590b 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -3,6 +3,7 @@ | 'arrow-right' | 'brush' | 'bullhorn' + | 'check' | 'chevron-down' | 'chevron-up' | 'chevron-right' @@ -33,17 +34,18 @@ - + View detailed support information about {row.display_name} on Can I Use (caniuse.com) + + + + {/if} + {/each}