DEV Community

loading...
Cover image for VS Code extension that lets you open the MDN docs of a CSS property

VS Code extension that lets you open the MDN docs of a CSS property

Dzhavat Ushev
Front-end developer trying to make useful stuff.
Updated on ・1 min read

This post was originally published on my blog.


Update: As of v1.38, VS Code supports the functionality provided by this extension natively as well! I’m quite happy about it because I didn’t know they were going to implement something similar. And what’s even better is that they also show a link to MDN for HTML elements! Now go and update to the latest version of VS Code. It’s worth it!


After releasing my first VS Code extension last week, I got an idea for another one. This one lets you open the MDN docs of a CSS property. Quite simple! The link appears on hover.

The extension is conveniently called CSS to MDN.

Here’s a demo:

Demo

Before making the extension, if I wanted to open the docs of background-size, for example, I’d switch to a browser, open a new tab, search for something like “mdn bkg size”, then click on the first result.

With this extension I don’t have to go through these steps. I can simply hover a property and click on the link. Nice, isn’t it? 😉

If you work with CSS, please give it a try. I hope you find it useful.

Discussion (22)

Collapse
carloswosiak profile image
Carlos Wosiak

Awesome! If you develop a JS MDN please let us know!

Collapse
dzhavat profile image
Dzhavat Ushev Author

Thanks! There’s already an extension that does that with JS. It works a bit differently but maybe you will find it useful. :)

Collapse
galgreenfield profile image
Gal

Thank you so much! Was just about to recommend you make one for JS.

Collapse
carloswosiak profile image
Carlos Wosiak

Excellent, thank you! ;)

Collapse
joeattardi profile image
Joe Attardi • Edited

This is awesome. I don’t know how many times a day I Google “mdn (whatever)”, especially with CSS.

Collapse
dzhavat profile image
Dzhavat Ushev Author

Me too! And having a direct link to docs is so obvious, I don’t know why it’s not part of the editor in first place (at least under a setting). Hope this tool will make your CSS-to-docs experience a bit more pleasant :)

Collapse
ravavyr profile image
Ravavyr

That's pretty awesome. Just thought maybe you can add a link to "caniuse.com" as well?

Collapse
dzhavat profile image
Dzhavat Ushev Author

I just checked and it seems like there are already several extensions that show browser support from Can I Use. Here’s one. Maybe that one can help you.

Collapse
dzhavat profile image
Dzhavat Ushev Author

This can be quite useful as well! Thanks for the suggestion. It will take some time to collect all links thought. And sometimes they combine several properties under one collection :)

Collapse
rbatsenko profile image
Roman Batsenko

Brilliant idea! Thank You sooooo much! :)

Collapse
tysonthurman profile image
Tyson Thurman

Thanks so much for this contribution. This is very helpful!

Collapse
dzhavat profile image
Dzhavat Ushev Author

You're welcome. If you work with CSS, I have two other extensions which you might find beneficial as well :)

Collapse
_juliettech profile image
juliette_chevalier

Just gave it a try! Really good work, thanks!! :)

Collapse
dzhavat profile image
Dzhavat Ushev Author

Glad to hear that. Hope it benefits you :)

Collapse
selbekk profile image
selbekk

I read the title of this and installed it immediately. Incredible idea, flawless execution!

Collapse
dzhavat profile image
Dzhavat Ushev Author

Thanks a lot. Hope it makes your work a bit easier :)

The biggest credit should actually go to the awesome people at MDN who collected the data with all urls and made it available for use.

Collapse
amanhimself profile image
Aman Mittal

This looks very helpful! Much thanks 👍

Collapse
dzhavat profile image
Dzhavat Ushev Author

You're welcome! Hope it benefits you :)

Collapse
n8trufe profile image
n8trufe

I really love this extension. Ut would be great to have it with js too.

Collapse
dzhavat profile image
Dzhavat Ushev Author

Thanks for trying it! Actually, there’s already an extension that does that with JS. It works a bit differently but maybe you will find it useful. :)

Collapse
jamesmkenny profile image
James Kenny • Edited

This is really awesome, thanks!

Collapse
dzhavat profile image
Dzhavat Ushev Author

You're welcome. Hope it makes your work a bit easier :)