microsoft / microsoft/vscode-css-languageservice

Add Baseline status to CSS hovercards

Open
#427 10 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
384
Forks
217
Avg merge
3d 16h
Merged PRs (30d)
14

Description

Baseline is an initiative by the W3C WebDX Community Group that aims to improve how we communicate the level of browser compatibility of web platform features.

In VS Code today, CSS properties have a hovercard that shows supported browser versions:

Image

Just by looking at this information, it's not immediately clear if this feature is ready to use in production. This could be improved by adopting a similar treatment as the one used by MDN:

Image

Here, the Baseline "widely available" logo and text are used to more clearly communicate that the feature has been available across the core browser set for a substantial amount of time (2.5 years).

Image

To see how this might look, I prototyped a VS Code extension that displays a hovercard with a similar treatment.

After a quick chat with @aeschli, it sounds like this could be a useful addition. Filing this issue to continue the discussion.

Some open questions to consider:

  • A feature's Baseline status can change over time as browsers add support. Is there already a process to keep BCD info reasonably up to date?
  • Computing a feature's Baseline status may not be as straightforward as looking at the browser versions alone. We'd also need to consider mobile support and the amount of time that a feature has been available across the core browser set. Does this justify adding compute-baseline as a dependency to help with the status assessment?
  • Right now it appears that hovercards are only supported for CSS properties. Should we also look to expand support to other CSS features like property values, functions, etc?
  • As far as I can tell, HTML hovercards don't currently include any browser version data. Should we also look to expand support to HTML features?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked baseline-vscode prototype and the existing CSS hovercard behavior described in the issue. Resolve the open questions about Baseline computation, data freshness, dependency use, and whether CSS and HTML coverage should expand. Done means an agreed scope and implementation plan for presenting current Baseline status.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
developer-experience, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.