Dr. Dobb's | Using CSSCAT to Build CSS-Friendly Web Apps

Using CSSCAT to Build CSS-Friendly Web Apps

The CSS Control Adapter Toolkit (CSSCAT) helps you break free of <table> based layouts in your ASP.NET 2.0 apps.

August 13, 2007
URL:http://www.drdobbs.com/windows/using-csscat-to-build-css-friendly-web-a/201500221

The HTML markup that many ASP.NET server controls return is sometimes criticized because of the excessive use of <table> tags (which are often nested) and limited CSS styling. In some cases, a table-based layout is just unavoidable — think, for example, of a grid where the number of rows and columns may vary dynamically. In other cases, the same layout for a control can be effectively built using pure CSS-based solutions. This is the case of tree-view and menu controls. Based on the community feedback, the ASP.NET team released a free toolkit to enable a few built-in controls to output CSS-friendly markup where the <table> tag is not used or used less and in accordance with XHTML rules. The CSS Control Adapter Toolkit (CSSCAT) can be downloaded from http://www.asp.net/cssadapters. It comes with full source code and a permissive license that allows for unlimited further customization of the code. CSSCAT is built atop the control adapter architecture that in ASP.NET 2.0 and newer versions makes possible for developers to unplug the default rendering engine and roll your own.

Once you install CSSCAT, you can create CSS-friendly Web sites in Visual Studio. What does this mean to you? The resulting project contains an App_Browsers system folder and a non-empty App_Code folder filled with control adapters source files. The App_Browsers folder contains a file named CSSFriendlyAdapters.browser that is used to map CSS-friendly adapters to some ASP.NET controls. The App_Code folder contains an Adapters subfolder with the source code of all predefined adapters. CSSCAT defines CSS-friendly adapters for the following ASP.NET 2.0 controls: Menu, TreeView, DetailsView, FormView, DataList, GridView, PasswordRecovery, ChangePassword, Login, LoginStatus, and CreateUserWizard. It goes without saying that you can freely edit the .browser file and the App_Code folder to limit the number of CSS-friendly controls in your application. At the same time, by using the source code of CSSCAT as a base, you can start developing new adapters for other controls. The standard Visual Studio project also contains a CSS subfolder with some CSS classes referenced by the CSSCAT new markup. Most of these CSS classes, though, are empty and left to you for further customization.

The effect of CSSCAT on the various controls is different. Let's examine a couple of them — TreeView and GridView. Originally, both controls output a table-based layout. The TreeView generates a sequence of tables in a surrounding DIV. Each table represents a sub-tree and counts three cells and as many rows as there are items to show in the sub-tree. The GridView outputs a plain table with as many rows as there are items to show, and as many columns as bound fields. The header row is rendered as a simple set of <th> tags. Let's take a look at the changes introduced by CSSCAT.

The CSS-friendly TreeView emits a <ul> block for each sub-tree and uses built-in styles to simulate aligned pieces of user interface such as icons, check boxes, and text. The CSS-friendly GridView still uses an overall HTML table, but it is at least padded with more standard and accessible tags such as <thead>, <tbody>, and <tfoot> and styled using CSS classes rather than inline attributes.

If you install the adapter for a particular control, all instances of that control throughout the application will be affected by the adapter. Any style attributes defined directly for the control in the page ASPX source will be ignored.

The benefit of CSSCAT is producing CSS-friendly markup that makes easier to style elements of the user interface and diminish the amount of tables the browser has to work with. CSSCAT is based on the ASP.NET control adapter architecture meaning that you can still use the same approach to make the list of supported controls longer or edit the way in which existing controls render themselves through CSS. For more information on the CSSCAT logic and internal architecture, pay a visit to http://www.asp.net/CSSAdapters/WhitePaper.aspx.