DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on • Updated on

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

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.

Top comments (24)

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
 
carloswosiak profile image
Carlos Wosiak

Excellent, thank you! ;)

Collapse
 
galgreenfield profile image
Gal

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

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
 
joeattardi profile image
Joe Attardi • Edited on

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
 
rbatsenko profile image
Roman Batsenko

Brilliant idea! Thank You sooooo much! :)

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
 
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
 
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
 
jamesmkenny profile image
James Kenny • Edited on

This is really awesome, thanks!

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

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

Collapse
 
mohammadmohammadiarchangel profile image
mohammadmohammadiarchangel

Is there a shortcut-key for that in keyboard to open MDN?

Collapse
 
dzhavat profile image
Dzhavat Ushev Author • Edited on

I'm not aware of any native shortcut commands. Quickly searched on the Marketplace and found this (Go to MDN) extension. Maybe it's close to what you need?

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. :)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.