Skip to content

fix: add caniuse links; improve icon usage on baseline page #397

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

Merged
bartveneman merged 5 commits into from
Sep 12, 2026
Merged

fix: add caniuse links; improve icon usage on baseline page #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dbbd3e2
add caniuse link to baseline table
bartveneman Sep 11, 2026
0866acb
fix
bartveneman Sep 11, 2026
4722b1b
fix: add caniuse links; improve icon usage on baseline page
bartveneman Sep 12, 2026
e98c74b
undo app.html formatting
bartveneman Sep 12, 2026
ae16404
fix support icon opacity
bartveneman Sep 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion scripts/generate-css-features.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
3 changes: 3 additions & 0 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
</symbol>
<symbol id="svg--check" viewBox="0 0 24 24">
<path d="M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z"/>
</symbol>
<symbol id="svg--chevron-down" viewBox="0 0 24 24">
<path d="M0 7.33 2.829 4.5l9.175 9.339L21.171 4.5 24 7.33 12.004 19.5z" />
</symbol>
Expand Down
7 changes: 6 additions & 1 deletion src/lib/baseline/baseline-status.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 4 additions & 4 deletions src/lib/baseline/baseline-status.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@ 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,
availability: BaselineAvailability,
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
}
4 changes: 4 additions & 0 deletions src/lib/baseline/css-feature.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
12 changes: 9 additions & 3 deletions src/lib/components/BaselineStatus.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
</script>

<div class="baseline-status status-{status}">
Expand Down
57 changes: 19 additions & 38 deletions src/lib/components/BaselineSupport.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,63 +15,44 @@
{@const supported = is_browser_supported(feature, availability, ids)}
<li class="browser" class:is-supported={supported}>
<span class="sr-only">{name}: {supported ? 'Supported' : 'Not supported'}</span>
<span class="browser-logo">
<Icon name={family as IconName} size={18} />
</span>
<span class="support-icon" aria-hidden="true">
{#if supported}
<svg viewBox="0 0 16 16"
><path fill="currentColor" d="M6.3 12.3 2.5 8.5l1.4-1.4 2.4 2.4 5.4-5.4 1.4 1.4-6.8 6.8Z" /></svg
>
{:else}
<svg viewBox="0 0 16 16"
><path
fill="currentColor"
d="m4.6 3.2 3.4 3.4 3.4-3.4 1.4 1.4L9.4 8l3.4 3.4-1.4 1.4L8 9.4l-3.4 3.4-1.4-1.4L6.6 8 3.2 4.6l1.4-1.4Z"
/></svg
>
{/if}
<Icon name={family as IconName} size={18} />
<span class="support-icon">
<Icon name={supported ? 'check' : 'cross'} size={10} />
</span>
</li>
{/each}
</ul>

<style>
.matrix {
[role='list'] {
display: flex;
align-items: center;
gap: var(--space-2);
column-gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
margin-block: 0;
padding-inline: 0;
}

.browser {
display: flex;
align-items: center;
gap: 2px;
color: #fff;
}

.browser {
column-gap: var(--space-1);
color: var(--fg-200);

&:not(.is-supported) {
color: var(--fg-300);
.support-icon {
color: var(--baseline-color-widely);
}
}

.support-icon svg {
width: 0.75rem;
height: 0.75rem;
display: block;
}
&:not(.is-supported) {
color: var(--fg-300);

.browser.is-supported .support-icon {
color: var(--success-400);
.support-icon {
color: var(--baseline-color-limited);
}
}
}

.browser:not(.is-supported) .support-icon {
color: var(--error-300);
.support-icon :global(svg) {
/* Override <Icon>'s opacity: 0.75 */
opacity: 1;
}
</style>
8 changes: 0 additions & 8 deletions src/lib/components/BaselineSupportMatrix.svelte
View file
Open in desktop

This file was deleted.

8 changes: 5 additions & 3 deletions src/lib/components/Icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
| 'arrow-right'
| 'brush'
| 'bullhorn'
| 'check'
| 'chevron-down'
| 'chevron-up'
| 'chevron-right'
Expand Down Expand Up @@ -33,17 +34,18 @@
</script>

<script lang="ts">
type Props = {
import type { SVGAttributes } from 'svelte/elements'

type Props = SVGAttributes<SVGSVGElement> & {
size?: number
color?: string
name: IconName
class?: string
}

let { size = 24, color = '', name, class: classname, ...rest }: Props = $props()
</script>

<svg {...rest} width={size} height={size} class={[color, 'icon', classname]} aria-hidden="true" fill-rule="evenodd">
<svg width={size} height={size} class={[color, 'icon', classname]} aria-hidden="true" fill-rule="evenodd" {...rest}>
<use href="#svg--{name}" />
</svg>

Expand Down
16 changes: 14 additions & 2 deletions src/routes/(public)/baseline-overview/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
import { get_baseline_availability, type BaselineAvailability } from '#lib/baseline/baseline-status.js'
import Heading from '#lib/components/Heading.svelte'
import BaselineStatus from '#lib/components/BaselineStatus.svelte'
import BaselineSupportMatrix from '#lib/components/BaselineSupportMatrix.svelte'
import BaselineSupport from '#lib/components/BaselineSupport.svelte'
import { Header as PanelHeader, Panel } from '#lib/components/Panel/index.js'
import { format_number } from '#lib/format-number.js'
import DefinitionList from '#lib/components/stats/DefinitionList.svelte'
Expand All @@ -31,14 +31,15 @@
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())

function compare_dates(a: string | undefined, b: string | undefined) {
if (!a && !b) return 0

Check failure on line 40 in src/routes/(public)/baseline-overview/+page.svelte

View workflow job for this annotation

GitHub Actions / Lint JS

eslint(curly) 

Expected { after 'if' condition.
if (!a) return 1

Check failure on line 41 in src/routes/(public)/baseline-overview/+page.svelte

View workflow job for this annotation

GitHub Actions / Lint JS

eslint(curly) 

Expected { after 'if' condition.
if (!b) return -1

Check failure on line 42 in src/routes/(public)/baseline-overview/+page.svelte

View workflow job for this annotation

GitHub Actions / Lint JS

eslint(curly) 

Expected { after 'if' condition.
return a.localeCompare(b)
}

Expand Down Expand Up @@ -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')}
<th scope="col">Can I Use</th>
</tr>
</thead>
<tbody use:feature_rows_root={{ onchange: on_feature_row_change }}>
Expand All @@ -321,10 +323,20 @@
<BaselineStatus feature={row.feature} />
</td>
<td>
<BaselineSupportMatrix feature={row.feature} />
<BaselineSupport feature={row.feature} />
</td>
<td>{row.widely_available_since ?? ''}</td>
<td>{row.newly_available_since ?? ''}</td>
<td>
{#if row.feature.caniuse}
<a href={`https://caniuse.com/${row.feature.caniuse}`} target="_blank">
<span class="sr-only">
View detailed support information about {row.display_name} on Can I Use (caniuse.com)
</span>
<Icon name="external" size={14} />
</a>
{/if}
</td>
</tr>
{/each}
</tbody>
Expand Down
Loading