Webstudio
Log in

Join the Webstudio community

Updated 2 months ago

Browser support in Advanced CSS view

At a glance

The community member is proposing a feature that would indicate browser support for CSS features, similar to "caniuse." The idea is to have a simple dot indicator tied to the percentage of browser uptake, with a tooltip showing the exact percentage. This would allow developers to start using newer features that have decent but not complete support, while still being aware that they may not be suitable for production yet.

In the comments, another community member suggests that having a link to MDN (Mozilla Developer Network) could solve this issue, as it provides information on browser support. However, the original poster feels that a visual indicator within the UI would be more useful, especially for newer developers, though they acknowledge that it could be overkill and cluttered.

The final comment indicates that a link to MDN has been added to the tooltip in the visual panel, and will also be added to the advanced panel (not yet released).

Useful resources
KKwame
·
Is there a way/possibility to hook into something like "caniuse?" to indicate browser support for features?
Something like a simple dot indicator tied to % uptake (green is over 90% and suitable for production etc). Maybe even a tooltip with the % on hover?

My thoughts being that this would open up to including newer features earlier that other platforms while still letting Devs know that they're not suitable for production yet. Things like field sizing, for example, which doesn't have great support at around 71%, but Devs could want to begin playing with.
https://caniuse.com/mdn-css_properties_field-sizing

Not sure how viable but would be useful imo.
O
K
3 comments
OOleg Isonen
Would having a link to mdn solve this for you? Since this is rare when you need something like this
KKwame
As in a link on the little status indicator in UI?
Or link in general here in chat?😂

Tbh, for newer Devs I think a quick link to mdn for each property could be useful but might be overkill and cluttered.
But for newer properties that have decent support but not complete (e.g. say 60% ) and are likely to be on all browsers in the near future, it's useful to be able to test them. Even just to play with them for test sites while still using WebStudio and bring able to do so through the UI.

It's not necessary by any means but there is a lot of great CSS being tested and coming out and having access to it within WebStudio AND quick visual indication would be nice.
OOleg Isonen
There is a little link on the tooltip in the visual panel, now it's also added to advanced panel (not released yet)

Link opens mdn that shows baseline on top
Add a reply
Sign up and join the conversation on Discord