First time here? You are looking at the most recent posts. You may also want to check out older archives or the tag cloud. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS. Thank you for visiting! (hide this)

The HTML rendered by some built-in ASP.NET controls is ... ugly: lots of tables, nested tables, useless divs and spans, and sometimes even not compliant with accessibility guidelines for public sites.

What is the CSS Adapter

ASP.NET 2.0 has the Adaptive Control Adapter Architecture that allows developers to override the default rendering of the built-in controls for some specific browser (for example mobile devices or set-top box).

Leveraging this feature, the ASP.NET team released the CSS Adapter Toolkit, which was initially intended as example to show how to develop a control adapter, but then became the de-facto implementation to render some built-in ASP.NET control with a pure CSS approach.

With this adapter the asp.net menu will not be rendered as an HTML table any more, but as nice menu built using nested <ul> tags.

And the same CSS-only approach is used also for (if you click on the links provided you will see the before and after the CSS adapter treatment):

How to install the CSS Adapter

There are 2 different procedure to install it. One is easy, quick, error-proof, but not customizable, the other is longer and more complex, but gives you the possibility to change the rendering.

Let's start with the complex one: it involves a lot of steps, actually 22 steps. Since Fritz Onion explained the procedure very well, I link to his post for the complete step by step tutorial: Steps for adding a CSS Control Adapter. This is complex, but you will use the source code of the adapters, so you can change the way the controls are rendered.

Now the easy one, which is the procedure I followed to install the adapter for the web application I working on.

  • Download the CSS Friendly Adapter from CodePlex: http://www.codeplex.com/cssfriendly.
  • Reference the CSSFriendly.dll inside your web project.
  • Create the ASP.NET App_Browser folder under your website root, and copy the CSSFriendlyAdapters.browser file in this folder.

If you don't want to change the way the controls are rendered, or are not interested in understand how a control adapter is developed, I suggest that you adopt the easy procedure: in less then a minute the HTML markup of your ASP.NET application will be much more polished, more compliant to the latest Web 2.0 trends and public accessibility guidelines.

Technorati tags: , ,
posted on Monday, July 2, 2007 9:05 PM

Comments on this entry:

# re: How to clean your ASP.NET HTML markup with the CSS Adapter Toolkit

Left by LorenzoC at 7/2/2007 10:13 PM

Meanwhile, somebody please tell MS about CSS and such.
:)

# re: How to clean your ASP.NET HTML markup with the CSS Adapter Toolkit

Left by simone at 7/2/2007 10:21 PM

Well... this was developed by MS

# re: How to clean your ASP.NET HTML markup with the CSS Adapter Toolkit

Left by Steven Harman at 7/3/2007 12:14 AM

MS commissioned a 3rd party dev shop to build out the CSS Adapters v1.0, and then moved the project over to CodePlex. The community is now largely responsible for maintaining and adding new features.

I've written about the adapters and some issues and fixes for them several times.

# re: How to clean your ASP.NET HTML markup with the CSS Adapter Toolkit

Left by Simone at 7/3/2007 11:19 AM

Thanks Steve, I must have missed them, or probably didn't feel the need when you posted it

Comments have been closed on this topic.