I was pleasantly surprised to learn today that I have been awarded Microsoft MVP status. I feel quite honored and will continue to do as much as I can to support the Microsoft developer community. 

The IE7 toolbar has an RSS icon that is ordinarily grayed-out, but lights up when visiting certain web pages.

Clicking the icon displays a list of feeds available on the page. When you select a feed you see a formatted version of the feed along with options to subscribe to the feed and change the sort order of items. Once you subscribe to the feed, it gets added to the “Favorites Center” which you can open to organize your feeds or view them.

If you are a web developer and have made RSS feeds available on your web pages, you can make discovery and subscription of these feeds easier for IE7 users by adding a few elements to your page that announce the presence of the feeds. Adding a <LINK> tag to the page Head with the correct attributes will do the trick. For example, my blog has the following:

<link rel="alternate" type="application/rss+xml" title="My RSS Feed" ref="http://blogs.speerio.net/peerio/SyndicationService.asmx/GetRss" /> 

As you can see, this is quite simple; you just have to add the attributes “rel,” type,” “title,” and “ref”. This is a simple addition that will instantly make your RSS feeds easier to consume. 

I just downloaded and installed the IE Developer Toolbar and am in developer browser heaven. I have previously used the Web Accessibility Toolbar, but I think the developer toolbar is way better. Here are some of my favorite features:

DOM Browser: Browse the entire DOM hierarchy of a page using a tree control, then for individual nodes, view its attributes and also edit them. This last bit is a nice touch. If you’re trying to tweak something so it’s just right…this is perfect. You can make it work and then go fix the source.

View Class and ID Information: This is extremely useful when debugging CSS, especially for DotNetNuke skins. You see an overlay of CSS classes and element ID’s on the page making it easy to visually detect the “cascade” that might be contributing to CSS issues.

Show Ruler: This feature was not what I expected, but once I saw it I loved it. Instead of the usual horizontal and vertical rulers what happens is that your cursor becomes a cross-hair. You can then drag it from one point to another on your browser and it draws a virtual ruler between the two points (and you can create as many of these as you want). You can also click anywhere and find the coordinates of the point.

Definitely a useful toolbar to have if you are a web developer.

Sometimes, it is necessary to override stylesheets defined on a page or to add additional stylesheets, perhaps for different media. The script below defines a JS object that allows you to define stylesheets for screen/print for IE/Other browsers. It then adds them to the page dynamically.

In the code below, you can ignore the portion from //BEGIN to //END. The snippet at the end is all that needs to be changed. Se the desired values for “picker.ieScreen,” “picker.iePrint,” “picker.otherScreen,” and “picker.otherPrint” and the code will take care of the rest.

<script language="javascript">

// BEGIN: styleSheetPicker object definition
function styleSheetPicker()
{
   this.ieScreen = this.iePrint = this.otherScreen = this.otherPrint = "";
}

styleSheetPicker.prototype.render = function()
{
   if (document.createStyleSheet)
   {
    if (this.ieScreen)
     document.createStyleSheet(this.ieScreen);

    if (this.iePrint)
        {
     var ieP = document.createStyleSheet(this.iePrint);
            ieP.media = "print";
        }
   }
   else
   {
        var head = document.getElementsByTagName("head")[0];
    if (this.otherScreen != "")
            head.innerHTML += "<link rel=\"stylesheet\" href=\"" + this.otherScreen + "\">";

    if (this.otherPrint != "")
            head.innerHTML += "<link rel=\"stylesheet\" media=\"print\" href=\"" + this.otherPrint + "\">";

   }
}
// END: styleSheetPicker object definition

var picker = new styleSheetPicker();

// IE stylesheets
picker.ieScreen = "ie.css";
picker.iePrint = "other.css";

// Other browser stylesheets
picker.otherScreen = "default.css";
picker.otherPrint = "other.css";

picker.render();

</script>

There are many situations when you may want to dynamically add a stylesheet to a page. One use case is when a control is being dynamically loaded and it comes with its own stylesheet. If you don’t know that the style is needed in advance or are dealing with an environment where you have a stylesheet for a control but don’t have control of the page (as it is in DotNetNuke), there are two common methods in use:

1) Add a <LINK> tag: This works but leaves the parent page non-XHTML compliant since <LINK> is only valid in the <HEAD> section.

2) Add a <STYLE> element and add the styles to the page. This works but gives you a bloated page and does not take advantage of stylesheet caching.

The solution is to dynamically add a stylesheet to the page. Here’s how.

(Internet Explorer makes this easy to do with Javascript using document.createStyleSheet. For other browsers, you have to get a handle to the <HEAD> element and then insert the stylesheet.)

bool isIE = (HttpContext.Current.Request.Browser.Browser == "IE" ? true : false);
string stylesheetUrl = “/test/default.css”;
StringBuilder styleScript = new StringBuilder();
styleScript.Append("<script language=\"javascript\">");
if (isIE)
    styleScript.Append("document.createStyleSheet(\"" + styleSheetUrl + “\");");
else
    styleScript.Append("var newStyleSheet=document.createElement(\"link\"); newStyleSheet.rel=\"stylesheet\";   newStyleSheet.href=\"" + styleSheetUrl + “\”; document.getElementsByTagName(\"head\")[0].appendChild(newStyleSheet);");
styleScript.Append("</script>");
Page.RegisterClientScriptBlock(“MyStylesheet”, styleScript.ToString());

For IE, the script adds the stylesheet directly. For other browsers, it creates a new <LINK> element on the page and then adds it at the end of list of <HEAD> elements.