Bringing CSS2 to Visual Studio.NET

Posted on April 27, 2004   |   Download sample code

6 comments

Even though the CSS2 Specification has been around since 1998 its support in the Visual Studio line of products has been rather weak. In this article you’ll learn how to enhance IntelliSense in Visual Studio.NET to display CSS2 properties.

Sprechen Sie CSS2?

If you ever designed stylesheets in Visual Studio.NET you might've noticed that IntelliSense doesn't display the majority of CSS2 properties. It doesn't mean they are "not supported". VS.NET itself doesn't care if they are supported or not. Browsers are the ones that care.

IntelliSense for CSS is driven by an XML file, cssmetadata.xml. This file is located at C:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Packages\1033. You may open it in your text editor of choice and see how it's structured. Basically, for every CSS property you define its name, type, description, syntax and (where applicable) valid enumeration values.

Be careful with this xml file. VS.NET seems to validate it against CSSMetaDataSchema.xml. If validation fails VS.NET won't complain, and no IntelliSense will pop up. Always keep a "last known good" copy.

What Is Different Between CSS1 and CSS2?

The CSS2 spec lists all changes since CSS1. As you'll see there have been semantic changes which cannot be reflected in said xml file.

What About Pseudo Classes?

There's really no way to specify pseudo-classes and pseudo-elements like :hover, :first-child, etc, because the schema file doesn't accommodate for them. Visual Studio.NET doesn't complain, though, which is fine. Same goes for paged media. I think VS.NET is years away from being TopStyle or Dreamweaver in terms of authoring CSS.

Installation Notes

Installation can't be simpler. Make a backup copy of cssmetadata.xml and replace it with the one you've downloaded from this site. Restart VS.NET and you should be good to go.

Property Builder Doesn't Play By The Rules

When you right click and select "Build Style..." you bring up the Style Builder. It comes in handy when you want to build a bunch of properties at the same time, but I still haven't figured out if it feeds off the same xml file. It doesn't appear to be the case. I'd like to figure out where it derives a list of, say, colors or the types of list styles. If anyone knows, please drop me a line.

Conclusion

Even though the built-in CSS editor is very handy, it's a very simple one and you can only do so much customization to it. We'll see what the much touted Whidbey will bring to the table.

6 comments

Mikhail Arkhipov
on May 25, 2004

Have a look here


Kerry Giftos
on July 01, 2004

Exactly what I was looking for. Thanks.


BigJim in STL
on November 01, 2004

This is great - thank you very much for sharing this!


C# Junkie
on January 12, 2005

Just what the doctor ordered.

Thanks


chris weber
on April 21, 2005

Awesome, this eliminates one of my biggest annoyances with VS.NET. Thanks!


Christopher Williams
on December 05, 2005

To complete the circle, i.e. style builder:
1: Download Resource Hacker (http://www.angusj.com/resourcehacker/)
2: Open "...\Microsoft Visual Studio .NET 2003\Common7\Packages\csspkg.dll" with Resource Hacker
3: Select Resoure Type 23\1033
4: And here is the cssmetadata.xml used for Style Builder etc.
5: Just paste in the one from this site
6: Click Compile Script
7: Save (It saves a backup...)

Works a treat.