Creating CSS Control Adapters

The popular ASP.NET framework comes with a set of pre-defined controls, which can speed up web development. Unfortunately many of the controls will produce a result which is less than optimal when it comes to accessibility and web standards.

For instance, the GridView control is arguably the most popular control in the 2.0 Framework, replacing the old classic DataGrid. Having a look at the client side, the control will be rendered into a <table> element and it will always insert a border attribute, regardless how you configure the control’s border properties. As far as I know, there is no easy way using the vanilla VS.NET to avoid this presentational attribute from appearing in your markup. I suppose you could write a XSLT response filter to achieve a similar result, but it would be a bit messy.

One solution to this is to use CSS Adapters. In short, this will give the ASP.NET developer a bit more control over the output. They enable custom CSS rendering for the ASP.NET controls. This means that you can choose to render the GridView as <table>, <ul>, a bunch of <div> elements or whatever. By controlling your markup, you can control your presentational styles.

Technically speaking, the CSS adapters plug-into the ASP.NET server controls and override the rendering output logic of that control. That means you don’t have to change any code-behind, since the same syntax is used for the control.

How is this done? First, you create a class that derives from the abstract class System.Web.UI.Adapters.ControlAdapter, that defines the basic functionality for all adapters. Within the new class, you override the appropriate methods to customize the markup. The new ControlAdapter class needs to be registered in a .browser file within the App_Browsers directory.

By changing the .browser file, you can also configure the adapters to be used only with specific versions of specific browsers, or sending different renderings to different browsers.

But be careful to use refID="Default" to enable your adapters for all browsers.

CSS Adapters is not a perfect solution and most people couldn’t care less about the output quality anyway, but at least it’s possible to avoid the default markup.