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):
- Menu
- TreeView
- DetailsView
- FormView
- GridView (this is still a table, but at least it's styled with CSS and not with inline styles)
- DataList
- Membership Login, ChangePassword, RecoveryPassword, CreateUserWizard, LoginStatus
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.