From dbbd3e219cabd184caf37bad82e3b5e6f5df6413 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Fri, 11 Sep 2026 08:52:46 +0200 Subject: [PATCH 1/5] add caniuse link to baseline table --- scripts/generate-css-features.ts | 3 ++- src/lib/baseline/css-feature.ts | 4 ++++ src/lib/components/BaselineSupport.svelte | 2 +- src/routes/(public)/baseline-overview/+page.svelte | 12 ++++++++++++ 4 files changed, 19 insertions(+), 2 deletions(-) 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/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/BaselineSupport.svelte b/src/lib/components/BaselineSupport.svelte index c9a09e92..d694cd3b 100644 --- a/src/lib/components/BaselineSupport.svelte +++ b/src/lib/components/BaselineSupport.svelte @@ -72,6 +72,6 @@ } .browser:not(.is-supported) .support-icon { - color: var(--error-300); + color: var(--baseline-color-limited); } diff --git a/src/routes/(public)/baseline-overview/+page.svelte b/src/routes/(public)/baseline-overview/+page.svelte index 40b4f665..3c4fecfa 100644 --- a/src/routes/(public)/baseline-overview/+page.svelte +++ b/src/routes/(public)/baseline-overview/+page.svelte @@ -31,6 +31,7 @@ import type { CssLocation } from '#lib/css-location.js' import { create_keyboard_list, type OnChange } from '#lib/components/use-keyboard-list.svelte.js' import Content from './content.md' + import Icon from '#lib/components/Icon.svelte' let css_state = get_css_state() let usages = $derived(css_state.css.length > 0 ? analyze(css_state.css) : new Map()) @@ -305,6 +306,7 @@ {@render sorted_th('support', 'Browser support')} {@render sorted_th('widely-available-since', 'Widely available since')} {@render sorted_th('newly-available-since', 'Newly available since')} + Can I Use @@ -325,6 +327,16 @@ {row.widely_available_since ?? ''} {row.newly_available_since ?? ''} + + {#if row.feature.caniuse} + + + View detailed support information about {row.display_name} on Can I Use (caniuse.com) + + + + {/if} + {/each} From 0866acb04cce4a7fc74f188d2a97e73ba2c81ab2 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Fri, 11 Sep 2026 09:36:02 +0200 Subject: [PATCH 2/5] fix --- src/lib/baseline/baseline-status.test.ts | 7 ++++++- src/lib/baseline/baseline-status.ts | 8 ++++---- src/lib/components/BaselineStatus.svelte | 12 +++++++++--- 3 files changed, 19 insertions(+), 8 deletions(-) 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/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' + })
From 4722b1bdea18f3dc0e3922f988919f4f21b2d3a5 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Sat, 12 Sep 2026 16:10:25 +0200 Subject: [PATCH 3/5] fix: add caniuse links; improve icon usage on baseline page --- src/app.html | 465 +++++++++--------- src/lib/components/BaselineSupport.svelte | 57 +-- .../components/BaselineSupportMatrix.svelte | 8 - src/lib/components/Icon.svelte | 8 +- .../(public)/baseline-overview/+page.svelte | 4 +- 5 files changed, 268 insertions(+), 274 deletions(-) delete mode 100644 src/lib/components/BaselineSupportMatrix.svelte diff --git a/src/app.html b/src/app.html index 8908fb70..c170a915 100644 --- a/src/app.html +++ b/src/app.html @@ -1,228 +1,247 @@ - - - - - - - %sveltekit.head% - - - - - - - + + + + + + + %sveltekit.head% + + + + + + + - - + + -
%sveltekit.body%
- +
%sveltekit.body%
+ diff --git a/src/lib/components/BaselineSupport.svelte b/src/lib/components/BaselineSupport.svelte index d694cd3b..55ffd399 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 @@ - - - - - - - %sveltekit.head% - - - - - - - + + + + + + + %sveltekit.head% + + + + + + + - - + + -
    %sveltekit.body%
    - +
    %sveltekit.body%
    + From ae16404938806b45f78565f7e47aa574b83fc0d6 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Sat, 12 Sep 2026 16:19:15 +0200 Subject: [PATCH 5/5] fix support icon opacity --- src/lib/components/BaselineSupport.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/BaselineSupport.svelte b/src/lib/components/BaselineSupport.svelte index 55ffd399..b50e3d6a 100644 --- a/src/lib/components/BaselineSupport.svelte +++ b/src/lib/components/BaselineSupport.svelte @@ -51,7 +51,7 @@ } } - :global(svg) { + .support-icon :global(svg) { /* Override 's opacity: 0.75 */ opacity: 1; }