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

Visions of Singapore

"By extensive use of landfill with sand bought from Indonesia and Cambodia, the bay area has expanded greatly in the last few years and tall buildings pop up everywhere."

Good morning Montenegro

"One would almost think that all this secrecy was made on purpose to keep the hordes of tourists away. Let them all perish in the crowds of Dubrovnik while the people of Montenegro can enjoy their beautiful country on their own. Or something like that."

Having champagne in Champagne

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

Chilling in Chile

"My weary feet has reached Valparaiso. After almost a month of traveling across the South American continent I realize that this is as far south as I will come, due to weather conditions."

Historic locations in Gothenburg

"Hundreds of houses were quickly build, but unfortunately all of it was burned to the ground in 1611 by Danish forces."

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."

Instagram