Nima Dilmaghani’s Technology Blog

10 Rules for effective use of CSS in ASP.NET

Posted in .NET, ASP.NET, Cascading Style Sheets, CSS, engineering, expression', html, web design by nimad on October 2, 2007

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Understanding the mappings between ASP.NET web control and HTML types is is also vital for making sure that your site is following well established web design standards and guidelines. If you consider using an ASP.NET web control, you need to make sure that the corresponding HTML type was intended for that usage. For example, you can use a LinkButton to submit values to the server. However, the LinkButton converts to an <a href> element (along with some JavaScript that does the postback). The <a href> element is intended for hyperlink. The HTML 4.01 specification clearly states: “A link is a connection from one web resource to another.” To submit data to a server, it is better to use the Button control which converts to input type=”submit”. Why is following these standards important? For example, if we choose the LinkButton over the Button control, if the user has JavaScript turned off, the site will no longer function properly. Also following standards is probably the most important step to making your site accessible.
  7. 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.
  8. 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.
  9. 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.
  10. 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”>

<asp:ListItem>first</asp:ListItem>

<asp:ListItem>second</asp:ListItem>

<asp:ListItem>third</asp:ListItem>

</asp:RadioButtonList>

 

.FunkyRadioButtonList

{

/* general styling for the container control goes here*/

}

 

.FunkyRadioButtonList input[type=”radio”]

{

/*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
Label span
TextBox input type=”text”
TextBox TextMode=”MultiLine” textarea
TextBox TextMode=”Password” input type=”password”
Button input type=”submit”
LinkButton a href=”javascript:__doPostBack(‘LinkButton1’,”)”
ImageButton input type=”image”
HyperLink a
DropDownList select
ListBox select size=”4″ gives you 4 rows
ListItem option
CheckBox input type=”checkbox”
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
Image img
ImageMap img and a map tag holding one or more of the following 3:
CircleHotSpot area shape=”circle”
PolygonHotSpot area shape=”poly”
RectangleHotSpot area shape=”rect”
Table table
TableHeaderRow tr
TableRow tr
TableFooterRow tr
TableHeaderCell th
TableCell td
BulletedList ul with each list item:
ListItem li
HiddenField input type=”hidden”
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
AdRotator a
FileUpload input type=”file”
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.
Panel div
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
displayed.
Validation controls span
Advertisements

What does the Visual Studio 2008 Release Date mean

Posted in .NET, 104812, ASP.NET, engineering, Microsoft, software, technology, web development by nimad on October 2, 2007

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.

 

Enums in JavaScript

Posted in AJAX, ASP.NET, ATLAS, javascript by nimad on October 2, 2007

Enums, (enumerated types) are very simple but incredibly useful programming constructs. However, while the EcmaScript specification has the enum keywork reserved, they have not implemented it in the language. While Microsoft’s JScript has an implementation of Enum, I recommend not using it since your code will not work in browsers other than IE. However by using associative arrays you can get a good deal of the enum functionality easily:

var myEnum =
{
First : 0,
Second : 1,
Third : 2
}

Now
Tabs[Third]
and
Tabs.Third
both return a 2

If you really want enums, the Microsoft AJAX Library implements them. You first declare the enumeration and then register it with the class the enum belongs to. Here is an example from the Microsoft Ajax Control Toolkit:

// Create an alias for the namespace to save 25 chars each time it’s used since
// this is a very long script and will take awhile to download
var $AA = AjaxControlToolkit.Animation;

$AA.FadeEffect = function() {
/// <summary>
/// The FadeEffect enumeration determines whether a fade animation is used to fade in or fade out.
/// </summary>
/// <field name=”FadeIn” type=”Number” integer=”true” />
/// <field name=”FadeOut” type=”Number” integer=”true” />
throw Error.invalidOperation();
}
$AA.FadeEffect.prototype = {
FadeIn : 0,
FadeOut : 1
}
$AA.FadeEffect.registerEnum(“AjaxControlToolkit.Animation.FadeEffect”, false);

You can use this enumeration in this way:

$AA.FadeEffect.FadeIn

Why object oriented JavaScript is not always a good idea

Posted in cookie, javascript, web development by nimad on September 7, 2007

JavaScript is not inherently an object oriented language. When we build object oriented constructs, we add additional complexity. Sometimes this is necessary, other times it gets in the way. Here is one example. Suppose you want to write a few functions that allow you to set and retrieve values of cookies. In his book, JavaScript: The Definitive Guide David Flanagan encapsulates this functionality in an object. He instantiates a cookie object and then access’s the actual cookies via the properties of this object. The problem with this approach is that an object’s life cycle is tied to a page while a cookie can live a much longer life. Here, the overhead and the extra complexity of wrapping a cookie in an object actually makes things less useful and forces the user to instantiate the object on every page that needs to access the cookie and rehydrate it with the values of the actual cookie.

A simple yet effective approach is Scott Andrew‘s. He simply defines three method’s that do the job. These methods can be called from anywhere. Here is his code copied and pasted from http://www.yourhtmlsource.com/javascript/cookies.html.

function createCookie(name, value, days)

{

  if (days) {

    var date = new Date();

    date.setTime(date.getTime()+(days*24*60*60*1000));

    var expires = "; expires="+date.toGMTString();

  }

  else var expires = "";

  document.cookie = name+"="+value+expires+"; path=/";

}
function readCookie(name)

{

  var ca = document.cookie.split(';');

  var nameEQ = name + "=";

  for(var i=0; i < ca.length; i++) {

    var c = ca[i];

    while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces

    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

  }

  return null;

}
function eraseCookie(name)

{

  createCookie(name, "", -1);

}

The curse and the gift of BarCampBolck

As I am writing this, BarCampBlock is starting in Palo Alto. I will be attending remotely from the East Coast and dearly miss my friends and colleagues who will be there.

BarCamp started two years ago as an ad-hoc gathering of technologists mainly interested in the web. BarCamp is free and open to everyone. It is also a un-conference and very loosely structured. Over the last two years, with the explosion of bubble 2.0 and the rise in popularity, stature, and influence of BarCamp’s two main promoters, Tara Hunt and Chris Messina, BarCamp has become a focal point of the Web2.0 community. Fortunately or unfortunately, human nature, particularly in the Western European practice of human nature, requires one to always out do oneself. So Tara and Chris came up with the brilliant idea of holding BarCamp’s second anniversary event as a block party. For a block party to be successful, you need lots of people. For an un-conference to be successful, you need at the very most 250 people (see Tim O’Reilly comment here). However, the human need to out do yourself and to celebrate success in the grandest way possible is always tugging at you as you make your decisions. So Tara and Chris went on doing what they do very well, promoting and promoting BarCampBlock. With blog posts from TechCrunch and Robert Scoble, it was obvious that BarCampBlock will be huge. And it is, over 900 people are coming to BarCampBlock! The question that will be answered over the next two days is how effective an un-conference will this be? No doubt it will be lots of fun. But will the connections, relations, and collaborations that come out of smaller un-conferences happen at BarCampBlock? While I am sitting some 3,000 miles away, I am eager to find out how this new direction for BarCamp will play out.

Clientside browser sniffing via Microsoft Ajax Libraries

Posted in Uncategorized by nimad on August 4, 2007

switch(Sys.Browser.agent) {
case Sys.Browser.InternetExplorer:
alert(“IE”);
break;
case Sys.Browser.Safari:
alert(“Safari”);
break;
case Sys.Browser.Opera:
alert(“Opera”);
break;
case Sys.Browser.Firefox:
alert(“FF”);
break;
default:
alert(“default Browser”);
}

Easy? Do I need to say anymore?

Visual Studio 2008 release dates announced

Posted in Uncategorized by nimad on July 11, 2007

Visual Studio 2008 (Orcas), Windows Server 2008 (Longhorn Server) and SQL Server 2008 (Katmai) will be launched on February 27th 2007.   See http://www.microsoft.com/presspass/press/2007/jul07/07-10WPCDay1PartnersPR.mspx for the official announcement.  As we inch towards that date, the bar to fix or leave bugs in the product will rise higher and higher.  This is just a reality of software development.  The next milestone will happen in approximately two weeks with the release of Beta 2.  With these developments, I have a request and a piece of advice.  Take a project you have been working on and load it in Orcas Beta1.  See  what works and more importantly what breaks.  File some bugs at https://connect.microsoft.com/.  Once Beta2 comes out, do this again as soon as you can.  The bugs you file earlier are more likely to be fixed.  Yes, Microsoft tests very aggressively, however, real world applications and edge cases will expose bugs that even the best QA teams will miss.  Many of these bugs, if filed late, will be categorized as “bugs that will only impact a small population of developers since most devs do not use these techniques.”  If the techniques where common enough, they would have ended up in the QA team’s test matrices.  Now they may be categorized as low priority and due to the time constraints of meeting a deadline, may never get fixed.  So if you want to make sure that your existing apps will work great in Orcas without headache, the best thing you can do is to take a day or so and test them on Orcas as soon as possible.  Remember, as the clock ticks to February 27th, chances of getting your bugs fixed becomes less and less.  So act today.

email from Bill Gates

Posted in Uncategorized by nimad on July 6, 2007

I don’t usually get many emails from Bill Gates, so when I saw this one in my inbox a few moments ago, I was curious to see what he was up to.  Of course the email went to all Microsoft employees, not just to me.  It shows how important the environment is to him and how proud he is of Microsoft’s sponsorship of Live Earth.  Here is the full email in his own pen:

On Saturday, 7/07/07, MSN is sponsoring Live Earth, The Concert for a Climate in Crisis. This 24-hour global event will feature more than 150 of the world’s top bands performing on all seven continents, with concerts in Sydney, Tokyo, Shanghai, Istanbul, London, New York, and other cities around the world. The event is an important milestone for MSN — we expect more than 2 billion people to access MSN or tune in on TV or radio to enjoy the concerts.

I encourage you all to join me in viewing the concerts live on July 7 at http://liveearth.msn.com. After the event, you’ll be able to watch the concerts on-demand exclusively on MSN. At the Live Earth site, in addition to streaming the performances, the MSN team has posted an extensive collection of interactive media and content that is designed to entertain, educate, and inspire people to work together to create a more sustainable environment.

Before Saturday, you can preview the event and learn more about MSN’s involvement here. I hope you will check out the site and share this link with your friends and family so they can participate in this event, too.

If you are a Puget Sound employee, on Thursday, July 12 at noon, you can watch highlights of the Live Earth concerts in the cafeterias of RedWest, 25, 43, Sammamish C, Millennium, 117, 9, 17, 36, and 121.

I’d like to congratulate everyone on the MSN team who has worked to use the power of Microsoft technology to enable hundreds of millions of people to come together to focus on this important global issue.

Bill

Getting Linq to Work in Orcas Beta1 Web Site

Posted in Uncategorized by nimad on June 29, 2007

When creating an ASP.NET website, you can create a ‘Web Application Project’ or a ‘Web Site’. In Orcas Beta 1, if you chose the ‘Web Application Project’ option, and add the required references to your project (System.Core, and System.Data.Linq), you are ready to go and your project works great. However if you chose ‘Web Site’ and add the same references, you will get a bunch of compiler errors. If you compare the web.config files of these two, you will see that the ‘Web Site’ is missing the following:

<system.codedom>
<
compilers>
<
compiler language=c#;cs;csharp
extension=.cs
type=Microsoft.CSharp.CSharpCodeProvider,
System, Version=2.0.0.0,
Culture=neutral,
PublicKeyToken=b77a5c561934e089
>
<
providerOption name=CompilerVersion
value=v3.5/>
</
compiler>
</
compilers>
</
system.codedom>

Adding it right after the </system.web>
fixes the compiler errors.

Since Linq uses code generation behind the scenes, it needs to know what compiler to use and this markup defines that.  For more info you can see http://msdn2.microsoft.com/en-us/library/650ax5cx.aspx

help find Jim Gray

Posted in Technology and Software by nimad on February 4, 2007

If you’d like to help, go to http://www.mturk.com/mturk/preview?groupId=J0XZ58STDWJZ5QY4F9M0.  Thanks to Amazon and all those who set it up.

Who is Jim Gray?  http://en.wikipedia.org/wiki/James_N._Gray

He is a great guy.  Smart, kind, and generous.  If you have a few minutes, please help with the search. 

Thanks!