CSS-friendly ASP.NET 2.0 Markup

Nov 30, 04:02 am

On 20th November Microsoft quietly released the 1.0 version of their ASP.NET CSS Friendly Control Adapters. A rather nifty set of extensions to ASP.NET bundled together in the form of a series of C# and VB project templates in a .vsi file. The adapters modify the HTML output that ASP.NET creates by default when rendering markup for server-side controls. More specifically, it removes ASP.NET’s use of the <table> tag and replaces it with the much more CSS- (and user-) friendly alternative of nested <ul> tags which make the output of your server-side controls both easier to style and much more accessible to users with screen-readers or limited browsing capabilities.*

It’s not completely automatic; you do still need to make a few changes to the pages yourself, but not all that many. The process is much easier than it would have been without the adapters. It’s really rather brilliant and the results speak for themselves. If you go here, it will take you to the examples running online at www.asp.net.

I gave the link to the download at the top, but I’ll give it again here. Can you
please check it out and help make the web a better place?

Edit:Scott Mitchell gives a nice overview of how to use the CSS adapters on the 4GuysfromRolla site here.

________
*Bootnote: <table> tags are infamous for chopping up the way your information is presented when viewed on anything other than a fully-functional web browser. Since semantically it’s tabular data screen-readers –for example – try to read across the columns which may produce quite a different result from that which you intended when you designed your site navigation using – for example – the <asp:menu> control.

Founders at Work


    1. css table properties and examples…
      — http://css-lessons.ucoz.com/table-examples-1.htm — and — http://css-lessons.ucoz.com/table-examples-2.htm




Add your comments

Please keep your comments relevant to this blog entry: inappropriate or purely promotional comments may be removed. To add hyperlink, please follow this example: "your link text":http://your.link.url