Webstudio
Log in

Join the Webstudio community

Updated 4 weeks ago

Browser support in Advanced CSS view

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