The 2008 Launch event site is at http://www.microsoft.com/heroeshappenhere/register/default.mspx. The event is not only a good opportunity for networking and learning, but participants will get copies of VS2008, Windows Server 2008, and SQL Server 2008. And because of this, the event will sell out. So sign up for it now before all seats are taken and if you are unable to attend, please cancel your seat so someone else can attend.
Becoming standards compliant, effective, and successful when using Cascading Style Sheets (CSS) with ASP.NET is not always obvious, straightforward or easy. Here I am putting together a series of tips and best practices that can help you on the way.
- Always prefer CSS over ASP.NET’s Skins for the following reasons:
- CSS is a well accepted standard.
- Designers understand CSS but may not understand ASP.NET’s proprietary mechanisms.
- Skins lead to Classitis. Each skin creates an html class attribute that has its associated styles. This does not follow the principle of reuse.
- A well designed external CSS implementation will have a smaller payload and faster download times than its equivalent Skin implementation.
- Microsoft is heavily investing in tooling for CSS design (Expression Web and inclusion of the Expression Web engine in VS2008), and is really not doing anything more with Skins. So follow their lead. Going forward CSS will have the best tooling support from Microsoft.
- Use CSS within the Themes construct in ASP.NET in order to get all the good CSS support in VS2008. In particular, instead of linking to CSS files in the <head> section of your HTML document,
- Create one or more theme folders under the App_Themes folder.
- Put your CSS files inside these themes folders.
- Link to these themes by setting the Themes attribute in the page directive.
- When you drag a control from the toolbox onto your form, ASP.NET, depending on the control, may add inline styling to your control. Delete these inline styles in Code View, otherwise due to the specificity rules, they will override anything you set in the CSS files and you will be scratching your head trying to figure out what happened while trying to find out why the styles you specified are not applied.
- Furthermore, note that most ASP.NET controls have several formatting properties that can be set via the properties window or directly in the markup. All of these will end up becoming inline styles and should totally be avoided. The only formatting property that I recommend using (in moderation to avoid Classitis) is CssClass.
- CSS files are written against pure HTML elements not ASP.NET Server Controls. Therefore, understanding the mappings between the two is vital to writing quality CSS files and separating the structure (HTML) from the presentation (CSS). See the bottom of this post for the mappings.
- Often times one has to choose between an ASP.NET Server Control and the corresponding HTML element. Here are some rules of thumb. For simple controls like a TextBox or a Label, if you need to map the control to ASP.NET server side functionality, or if you would like to take advantage of the ASP.NET validation controls, use ASP.NET controls. If you don’t, use the lighter html controls. Obviously sophisticated controls such as the Calendar Control can save you hours of development time since they have no equivalents in HTML. On the other end of the spectrum, do not forget that there are a good number of HTML elements that do not have (and should not have) ASP.NET counterparts. An example is <input type=”reset”>. Use these as necessary to do your work.
- Use the YUI Library CSS Tools. They will save you many hours of work. These tools consist of four style sheets that Yahoo uses for their own production websites. They include a reset style sheet that neutralizes browser specific styles, a base style sheet which creates a consistent style foundation for common HTML elements, a style sheet for setting and managing fonts, and a grid style sheet for managing grids. If you like, Yahoo will even host these sheets for you.
- Note that you can use ID selectors only with HTML elements. The ID you assign to an ASP.NET Control will most probably change as the HTML is rendered for the control. So for ASP.NET Controls, use the CssClass attribute to define the style. If the control does not have this attribute, wrap it in a <Div> tag. Wrapping in Div tags should be the last resort. Usually you can refactor your CSS by using contextual selectors on Div tags that wrap a group of elements.
- The designer behaviors in both VS2008 and Expression Web (note that they have the same engine so they work pretty much the same way) focus on styling ASP.NET controls using ID Selectors. This can easily be changed to class selectors. So for a complex ASP.NET web control you add the CssClass attribute with a value. Then, in the CSS file, you add details to it. The CSS designers help you set the CSS properties of the control itself, but to set the properties of individual elements in the control, you need to go in the CSS file and hand code. Remember two powerful CSS selectors, contextual selectors and attribute selectors. (Note that attribute selectors are not supported in IE6 or older browsers). Here is a simplified example:
<asp:RadioButtonList runat=”server” CssClass=”FunkyRadioButtonList”>
/* general styling for the container control goes here*/
/*styling specific radio buttons in the FunkyRadioButtonList goes here*/
The list below shows the ASP.NET Server control and the HTML element that is generated from it by the ASP.NET runtime.
|ASP.NET Control||HTML Element|
|TextBox TextMode=”Password”||input type=”password”|
|ListBox||select size=”4″ gives you 4 rows|
|RadioButton||input type=”radio” followed by a label for the text|
|RadioButtonList||table with a tr with one td for each radio button. Inside each td there
is a input type=”radio” and a label
|ImageMap||img and a map tag holding one or more of the following 3:|
|BulletedList||ul with each list item:|
|Literal||Literal is not translated to any html element. The dynamic content
returned by the methodname method is directly displayed.
|Calendar||a rather sophisticated table|
|Wizard||a rather sophisticated table. You can Convert the Wizard Control and
related controls such as the CreatUserWizard control into templates, and
then modify the html, remove the tables, and replace them with divs to make
them CSS friendly. Even after all this, the wizard navigation buttons
will still be unreachable via CSS. Therefore, I hand code these
functionalities instead of relying on the Wizard for full control.
|Xml||<?xml version=”1.0″ encoding=”utf-8″?>|
|MultiView||MultiView and all the Views inside of it are not translated to any html
element. Thier content is directly displayed.
|PlaceHolder||Placeholder is not translated to any html element. The controls added to
it by the PlaceHolder1.Controls.Add() methodare directly displayed.
|Substitution||Substitution is not translated to any html element. The dynamic content
returned by the methodname method is directly displayed.
|Localize||Localize is not translated to any html element. It’s content is directly
I have been getting lots of hits to my post about the VS2008 release date being February 27th 2008. Let me clarify what this date means. This is the official date that VS2008 will be released. There will be lots of events put together and possibly free copies of the software distributed and lots of marketing taking place. This is the launch date of the product and should not be confused with the RTM (Release to Manufacturing) date which most developers (particularly those with MSDN licenses) are interested in. The RTM date is when all coding and testing of the software is done and the product is released to the manufacturing process to burn the DVDs. Usually within a few days of a product’s RTM MSDN subscribers will be able to download it from MSDN. If you look at the blogs of some of the Microsoft Employees particularly Somasegar’s blog, you will see that Microsoft is shooting for an RTM of November 2007 for VS2008. The two dates are a few months apart for several reasons.
The February date is for an event including three products, VS2008, SQL Server 2008, and Longhorn Server. The marketing folk want to throw the parties and the marketing shebangs all at once to capture people’s and the media’s attention. They want to be able to say things like “The biggest release Microsoft Ever Did”. Also launching the products within a few months of each other will put in people’s minds a state of “another release from Microsoft” which is boring and not exiting. So a big launch is the way to go. When you have three big products releasing, you want to have a few months of cushion in case last minute show stopper bugs are found. Also, this gives you time to prepare the physical media that will be given away at the events and other things that can not be done the day after RTM.
I hope this helps clarify things.