CSS Adapters - http://www.codeplex.com/cssfriendly

Question

User-80542940 posted

I couldnt capture the real value of this approach. Is there anyone using this in production? What could this in fact help me with? I dont see much information yet and to be honest I dont face it like a mature techonologym though Codeplex and other sites tend to show the opposite.

Opinions and information will highly appreciated  !

 

Answer 1

User-1439654444 posted

Hehehe, good question... just adding so this shows up in "My Posts" mostly. But my 2 cents... I have thought about trying it out for the menu's. They render pretty nasty by default, and are somewhat annoying when trying to skin them with CSS. Other than that, I haven't had too much trouble with other composite controls, but mostly I just use GridView and FormView, along with the basics, and a couple of widgits from the AJAX Control Toolkit

Answer 2

User-80542940 posted

So these adapters can "help" in rendering the components on the page? I thought it was meant to be used only to create a more organized HTML code in background (what would be somewhat useless, considering users wont have any advantages, and for developers VS2005 works with "drag&drop"), although the presented result in screen would be exactly the same!

Its pretty clear I havent captured its value yet :(

Answer 3

User-1439654444 posted

Well, my impression is that they have some pre-written ControlAdapters (that get invoked on the Control.Render method if they are hooked up), that change the way a control is rendered to a page. The original idea behind ControlAdapter was to allow IIS to render different markup for different browsers to resolve compatibility issues. Well, anyhow, the CSS friendly adapters has some stuff to render GridViews and Menus, and a few other things using mostly <div> tags, rather than a bunch of tables of tables of tables. This makes more compact html (generally), and is easier to stylize with CSS.

Answer 4

User-80542940 posted
But do u consider it mature enough to use spreadwide? I mean, Ive been watching a lot of people complaining over several issues, some of them still without a solution :(

Answer 5

User-1439654444 posted

I don't know, but that is probably the main reason I have stayed away from it... I have things that work, things that have custom code, etc. I wouldn't want to pull my hair out over something like this at the moment. Maybe down the road on a future project... but then again, maybe newer versions of .NET will spew out better html. 

Answer 6

User-80542940 posted
I am not that crazy either, so lets forget it...

Answer 7

User-534056067 posted

I've been monitoring this thread, hoping that we'd get a few replies from some of this forum's frequent contributors. Alas, folks seem a bit busy with other things this week so I'm afraid you haven't gotten the sort of response I'd hoped for here. So, I'll chip in a little.

As the creator of these adapters I am way too close to them to be unbiased. I can, however, answer a few of your questions factually.

You asked what these adapters are all about, what they are good for, why you should bother with them. I attempted to answer that question throughout the site that presents the adapters, http://www.asp.net/cssadapters. For example the Introduction on the kit's home page says:

ASP.NET is a great technology for building web sites but it would be even better if it provided more flexibility for customizing the rendered HTML. For example, the Menu control makes it simple to add a menu to a web site, but it would be better if it didn't create <table> tags and was easier to style using CSS. Happily, it's easy to customize and adapt the Menu control to generate better HTML. Indeed, you can modify any ASP.NET control so it produces exactly the HTML you want.

Those web developers familiar with CSS know that the HTML produced by the ASP.NET 2.0 framework of controls is difficult, at best, to style well with CSS. Furthermore, it uses tags that tend to be avoided by many CSS fans. The adapters, on the other hand, produce HTML that is easy to style with CSS. They avoid the use of <table> except in cases where presenting truly tabular data. More importantly, they demonstrate how you can use an adapter, rather than a custom control, in ASP.NET to tailor your page's final HTML.

A simple example of this happen to involve an ASP.NET control that isn't actually in the official kit but has been discussed many times on this forum: building an adapter for <asp:Image>. The normal HTML output from the framework for <asp:Image> sets a border attribute. Since many authors don't like that, preferring to control the border entirely with CSS, you face two choices. You could write a custom control that is like the <asp:Image> control but doesn't render a border. That means that whereever your site uses <asp:Image> you would, instead, use <xyz:MyCleanerImage>. However, that is a bad solution in cases where you have an existing site with a thousand existing instances of <asp:Image>. In that case, it is probably better to simply write a very brief adapter that changes the way that <asp:Image> renders its HTML (such that it doens't include the border attribute). With the adapter solution you don't have to touch any of the existing files that use <asp:Image>. They remain the same but produce better HTML once the adapter is added to the site.

The same concept is true for the adapters provided in the site: for the Menu, TreeView and other controls. However, unlike in the simple Image case, the Menu adapter (etc.) is far flexible to style and the adapted HTML is much more dramatically different from the native HTML produced by the ASP.NET 2.0 framework.

You also asked about site that are actually using these adapters. I believe that there are many, though you did not get folks to send you specific examples. Remember that most people who read this forum are here to post a question and get an answer so they can overcome a specific coding problem. There are lots and lots of visitors who don't read all the postings. They are only interested in THEIR particular question. So a lack of input on a survey question like you posed isn't a fair measure of anything, in my opinion.

If you want to see real sites that use these adapters you can start with http://www.microsoft.com/expression or http://www.babysbliss.com. There are lots of others but I prefer that other contributors add their entries themselves, though as I said, it may be hard to solicit those data simply by posing the question here.

One final thought... if you are wondering about the value of the CodePlex project... it is twofold. First, it is where ongoing fixes/enhancement to this adapter kit are being going. Second, it present a novel strategy that bundles all of the adapters and related resources in a single DLL. This makes adding the adapters to a site even easier because there are fewer files to copy into the site.

Best of luck to you. Thanks for asking such a stark and revealing question!

Answer 8

User-1548791341 posted

Sorry I didn't see this thread earlier!

As for another site that uses these adapters: http://www.missouristate.edu

We're a public university subject to strict accessibility requirements. I'd say that makes us a pretty good reference in favor of the adapters.

rtortima, your posts make you sound like you're more of a back-end developer than a front-end developer. I can see why it would be harder for someone who deals almost exclusively with the back-end to understand what's so great about the CSS control adapters.

You said "So these adapters can "help" in rendering the components on the page? I thought it was meant to be used only to create a more organized HTML code in background (what would be somewhat useless, considering users wont have any advantages, and for developers VS2005 works with "drag&drop"), although the presented result in screen would be exactly the same!

Its pretty clear I havent captured its value yet :("

The CSS adapters completely replace the rendering of the components on the page with their own standards-based code. This standards-based code allows the use of CSS to control the presentation of the web document in the user's browser.

Why is this important? There are several reasons:

1. Cleaner, smaller code. The resulting client-side code is much cleaner and smaller, meaning you use less bandwidth per page request. If you ever have to debug client-side issues, the code will be easier to look at as well.
   
2. Style information all stored in one place. This means that if you ever need to do a site-wide redesign, all you have to do is change your CSS file and all of your pages automatically take on the change. With the unadapted controls, you have to add things like table row colors for GridViews to each and every control on every single page of your site. Using CSS, you do it in one place and you're done, meaning your time savings are enormous. Also, since CSS files can be cached, users only have to download them once when visiting your site, saving you more and more bandwidth the more pages your users visit. The same CSS can be used by all of your .NET applications, as well as anything you do outside of .NET.
   
3. Standards-based code. Using standards-based code future-proofs your application. You can be guaranteed that your site will display correctly in future versions of Firefox, Opera, Safari, and IE. It also gives people with disabilities a nicer user experience. If your user community contains any blind users or users with other accessibility concerns, you'll be doing them a great service by switching to the adapters.
   

 

The majority of the necessary functionality for controls is handled properly by the adapters. We use these on every single one of our .NET projects at the university, and it's a very rare occasion where we run into something wrong. If you do run into a problem, you can file a bug on CodePlex and you'll have multiple users to help you solve it, or you can fix the problem yourself (and submit the change).

 So does this do anything for the back-end? Not really, but they're not meant to. The controls are meant to behave almost exactly like the unadapted controls as far as functionality is concerned (minus a few superfluous properties like colors that are meant to be handled in CSS when using them). That way you don't have to touch old code. The CSS adapters give your designers more freedom in the presentation of your site, give users faster loading times and a nicer visual experience when combined with good CSS design, save you bandwidth and save you time on future re-designs.

For an enlightening look at CSS-based design and what it can do for you, visit the CSS Zen Garden at http://www.csszengarden.com

You can pick from hundreds of completely CSS-based designs. The code on every page is exactly the same, but allows for radically different user and visual experiences.

 

Answer 9

User-80542940 posted

Russ,

Thanks a lot for the information, 2 things then are too important to be left behind:

1) Do these adapters work properly with all dif kinds of browsers, ranging from IE6/7, FF etc ? Have they been tested exaustly in several situations?

2) Do they work ok with all types of controls from the Ajax Toolkit offered by Microsoft?

 

Tanks again

 

Answer 10

User-80542940 posted

Falcon,

Thanks for the reply. Actually we use CSS a lot in our projects, thats why I am that concerned of finding a way to improve our development produtivicty, keeping all we have done so far. I know of all CSS capabilities and its importance, and AFAIK we do explore at most its possibilities, transferring to its classes all control behaviour (width, height, color etc). The point is that I couldnt figure out exactly how these CSS would be "better used", or else, how could we get our work better done, by using these adapters. Down here (Brazil) I havent seen anyone using it, so maybe I might be the first around to try it...

Thanks again

Raul.

Answer 11

User-534056067 posted

Yes, the adapters have been tested very extensively in all of the most popular browsers including: Safari, IE6, IE7, FF, Opera (latest version), Navigator, etc. Truthfully, I think you'll find that the HTML produced by the adapters has even better browser neutrality than the HTML produced without the adapters. Of course, the HTML produced with the adapters isn't going to display particularly well if you don't pair it with the appropriate CSS rules. But that is what the sample pages in the kit help with. They provide 2 themes with all the CSS rules to show you how to create fairly elaborate menus, trees, etc. You can simply take this CSS as a starting point to develop your own. Plus the CSS with the kit is divided nicely between the rules that are common across all sites that use these adapters and the rules that are likely to be customized for each site. Read about that here, http://www.asp.net/cssadapters/whitepaper.aspx#SamplesConventions.

You also asked if the controls work well with the ASP.NET AJAX toolkit controls. The answer is yes. The architecture of the controls does account for the possible existance of AJAX. They two work very nicely together in all cases that I've tried or heard about on these forums. FYI, I was a Program Manager at one point in the ASP.NET team and was involved in the early stages of AJAX (when it was being called Atlas still). So, I wouldn't produce something (like the adapters) that wouldn't work well with AJAX!!!

Another point to consider... Scott Guthrie and other luminaries in the ASP.NET world have been presenting these adapters to audiences around the world at conferences, in key note addresses, on blogs, etc. They are hardly likely to do so if the adapters were highly unstable or problematic.

Answer 12

User-80542940 posted

Well now I start getting a more robust understanting over what these adapters could help. I will try to study more and try to apply to our situation.

 

Answer 13

User1259721702 posted

 As a front-end developer if not for CSS Adapter i would have abandoned ASP.NET a long time ago. Yes it's great for developers but it's a pain in the ass for designers who really understand how to create standard base website. If you are used to designing sites using table tag then good for you but the rest of us are using CSS base layout.

 Look at all the beautiful site's out there, they're all made in php, shame on us. We are so proud of  how ASP.NET is so much better than php but i have yet to see a kick-ass asp.net sites that can rival the sites i see in some of the popular css galleries.