Bringing CSS2 to Visual Studio.NET

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.