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 profile image Dzhavat Ushev 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.

Posted on by:

dzhavat profile

Dzhavat Ushev

@dzhavat

Front-end developer trying to make useful stuff.

Discussion

markdown guide
 

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

 

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

 

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

 
 

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

 

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

 

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

 

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.

 

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

 

Brilliant idea! Thank You sooooo much! :)

 

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

 

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

 

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

 

Glad to hear that. Hope it benefits you :)

 

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

 

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.

 

This looks very helpful! Much thanks 👍

 

You're welcome! Hope it benefits you :)

 

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

 

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

 
 

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