Mink Machine

Creating CSS Control Adapters

I often experience a gap between the drag-n-drop ASP.NET cowboys of Visual Studio and standards-aware CSS developers. The cowboys produce fast results in a fire-and-forget environment and couldn’t care less for the quality of the HTML output, which in turn drives the standardistas insane.

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. Unfortunately, I’ve noted several times in just one month that a lot of people don’t even know of the existence of CSS Adapters.

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 (sad but true). 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 what we need is a very easy way of doing it. Otherwise only very few will even bother.

CSS Adapters to the rescue. They enable custom CSS rendering for the ASP.NET controls. In plain English, 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 System.Web.UI.Adapters.ControlAdapter (an abstract class that defines the basic functionality for all adapters). Within the new class, you override the appropriate methods to customize the markup. Then 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.

<browser refID="MozillaFirefox"> <controlAdapters> <adapter controlType="System.Web.UI.WebControls.GridView" adapterType="Minkmachine.GridViewAdapter" /> </controlAdapters> </browser>

But be careful doing this. You really should have the same output for all browsers, or else you’re in a time machine back to the nineties. Use refID="Default" to enable your adapters for all browsers.

If you don’t want to do all this, there are sufficiently advanced control classes available in the tutorial templates.

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

Comments

No comments yet.

Post a comment

Your email address will not be published. Required fields are marked *

Featured stories

Roaming through Banff

"Even though the main town is surrounded by mountains with names such as Sulphur Mountain, it is as far away from Mordor as one could imagine."

The dark days of Sarajevo

"The city survived on the edge of annihilation and has started to recover, but the stone walls still seem to cry out in lament of all the horrible things they have seen."

Alone in Kyoto

"I tried my best to sneak across the building, but the floor revealed me each time. I suppose I would make a lousy ninja."

Memories of Skye

"The countryside is charming and some places even have coffee."

Having champagne in Champagne

"We roamed the damp and chilly tunnels and stumbled upon a large barrel delivered by Napoleon himself."

Sessions in Seville

"I end my journey in front of the tomb of Columbus, located inside the world’s largest Gothic cathedral."