July 2011 Entries

Pick that favourite colour using the colour picker in IE 9 Developer Toolbar

One of the tough tasks in web development and in particular CSS styling, is to find the RGB and hexadecimal value of uncommon colours.  As a web developer working in CSS, I longed to give that nice blue/green tinge colour for my UI and always struggled with the hexadecimal value.  Particularly in finding the same for colours I find in other sites.

Thanks to the IE9 Developer Toolbar which has this nice colour picker, one can find the hexadecimal code (and the RGB equivalent) from any web page.

To demonstrate, lets visit (Bing home page has a nice background photo every day Smile).  Open the Developer Toolbar by hitting F12.


From Tools – select “Show color picker”

Then, when you tab to the main browse window, you will notice a color picker icon showing up.  Point it to the colour (it can be background or image) and you will be able to see the hexadecimal value of the same


In my case, I pointed to the nice sunset background (which am sure most of you love Smile) and I could get the hex value.

Small utility, hope it helps you.

Cheers !!!

Testing for FireFox, Chrome User Agents, using the IE9 Developer Toolbar

IE9 Toolbar’s Browser Mode allows us to test for different versions of IE.  This feature has been there right from IE8 Developer Toolbar.   But, I always thought that the testing was just limited to the different versions of IE i.e. IE7, IE8 and IE9.  One of the advantages of having a technical boss is that, he points to the right set of information when needed.  @harishV pointed out that you can test even for other browsers such as Chrome, Firefox, Safari from within the IE9 Developer Toolbar.

For the purpose the demonstration, I am using  a simple Web Application with a Button and a Label that displays the User Agent when clicked.

Once you add the Button and Label, the button click event has the following code (simple stuff, but just putting it for transparency Smile)

protected void Button1_Click(object sender, EventArgs e)
            Label1.Text = Request.UserAgent;

And when we run the page and click on the button, by default IE9 would resort to IE9 Browser Mode and IE9 Document Mode



One of the nice things you would notice about the IE9 user agent string, is that, its simplified and doesn’t have the lengthy .NET Framework, CLR versions mentioned, as it was earlier.  Its simplified, much simplified!

When we change the browser mode to IE8, you will notice, couple of things

1. The page automatically reloads (not refresh)

2. The User Agent is as follows:-


Now, the main intent of this post, how can you test for other browsers

Open the F12, Developer Toolbar and from Tools – Change User Agent String




Lets say we select “Google Chrome”


and when we select “Opera”



Isn’t it cool, testing for Chrome/Opera/Firefox from within IE Toolbar? 

Cheers !!!