HOW TO compare HTML5 features supported by versions 8, 9 & 10 of IE

This page on the Browserscope website lets you choose versions of the same or different browsers & see how they stack up in supporting HTML5 features. Click on the "Compare UAs" link on that page, select User Agents you want to compare & then hit the Compare button.

I chose versions 8, 9 & 10 of Internet Explorer to see what's new with respect to HTML5 in IE9 & IE 10

click to enlarge image

You can copy the table data to Excel & transpose the columns to rows to view the tabular data vertically as a list (in Excel2010, click on Paste dropdown in Ribbon & select Transpose).

So here is the list of HTML5 supported features in IE9 as detected by Browserscope by utilizing Modernizer 2.0.4 -

1. audio:m4a 
2. audio:mp3 
3. backgroundsize 
4. borderradius 
5. boxshadow 
6. canvas 
7. canvastext 
8. csstransforms 
9. draganddrop 
10. fontface 
11. generatedcontent 
12. geolocation 
13. hashchange 
14. hsla 
15. inlinesvg 
16. localstorage 
17. multiplebgs 
18. opacity 
19. postmessage 
20. rgba 
21. sessionstorage 
22. smil 
23. svg 
24. svgclippaths 
25. video:h264 

 IE10 additionally supports the following HTML5 features -

1. applicationcache 
2. cssanimations 
3. csscolumns 
4. cssgradients 
5. csstransforms3d 
6. csstransitions 
7. history 
8. indexeddb 
9. input:autofocus 
10. input:list 
11. input:max 
12. input:min 
13. input:multiple 
14. input:pattern 
15. input:placeholder 
16. input:required 
17. input:step 
18. inputtypes:email 
19. inputtypes:number 
20. inputtypes:range 
21. inputtypes:search 
22. inputtypes:tel 
23. inputtypes:url 
24. textshadow 
25. websockets 
26. webworkers 

Also see:
Comparison of layout engines (HTML5)
HTML5 compatibility across major mobile and tablet browsers

Read More

HOW TO block images/image ads originating from a specific domain in Firefox 4 & above

Firefox 3.x used to have an option to block pesky images that were not part of the context of page that you were viewing - like image ads. You just had to right click on the image, & select "Block images from {domain serving the image}" to never see any images from that domain again. That context menu option is missing from Firefox 4  & above.

It turns out that it is still there but there are some additional steps to reach it. Right click on the image on the page you are viewing in Firefox & from the context menu, you have to select View Image Info & click on the checkbox "Block images from {site name}".
Thanks RalphB

Also see:
HOW TO block IFRAME based ads

Read More

Trends & Reference Tables that every Web Developer should track

A web developer's education is never finished. Here is a list of trends & reference tables that, in my opinion, every web developer should track -

• HTTP Archive - Trends in web technology, interesting stats, repository of web performance information
• Browser Security Handbook - Key security properties of contemporary web browsers 
• HTML 5 Reference Table
• HTML 4/ XHTML Reference Table
• CSS 3 Reference Table
• CSS 2 Reference Table
• PPK's Browser Event Compatibility Tables - Desktop, Mobile
• HTML5 compatibility on mobile and tablet browsers

work in progress...

Read More

Cross-Browser Testing Tools

I've used cross-browser testing tools like Adobe BrowserLab, Browsershots & Expression Web SuperPreview but didn't know there were a dozen more.

Smashing Magazine has done an exhaustive review of all available cross-browser testing tools with a nice tabular summary at the end for easy comparison. It covers the following list of tools -

Free:

• Adobe BrowserLab


• Browsershots


• Expression Web SuperPreview (free and commercial)


• Lunascape 6


• IETester


• IE NetRenderer


• Spoon


• Sauce Labs (free and commercial) - 200 free minutes/month


• Browsera (free and commercial)


• Browserling (free and commercial)

Commercial:

• Mogotest


• Cloud Testing


• BrowserCam


• Multi-Browser Viewer


• CrossBrowserTesting

Read More

Why formatting of a ASP.NET page looks different when rendered through VWD & IIS

A puzzled ASP.NET developer asked on the ASP.NET Forums why the formatting of the same ASP.NET page looked different in Internet Explorer when rendered by Visual Web Developer & IIS seperately. When the entire source code is the same, why should they look different?

Dave Sussman has this insightful answer -
It's possible the application is running on IIS under a v4 application pool, meaning it will be run as though it were a v4 application, so the control rendering might be different. Two things to do:


1. On IIS machine, select the application and from the Actions tab on the right, select "Basic Settings ...". From the dialog that pops up, select the appropriate application pool (Classic .NET AppPool for an ASP.NET 2.0 application).


or


2. In Web.Config, in the <system.web> section add:


<pages controlRenderingCompatibilityVersion="3.5" />


That will ensure the controls are rendered as though the application was ASP.NET 3.5, so should be consistent on both machines.

A standard ASP.NET control may render a different kind of source depending on which Framework it targets.  For instance, ASP.NET 4 brings the following major rendering changes:

• The Image and ImageButton controls no longer render a border="0" attribute.
• The BaseValidator class and validation controls that derive from it no longer render red text by default.
• The HtmlForm control does not render a name attribute.
• The Table control no longer renders a border="0" attribute.
• Controls that are not designed for user input (for example, the Label control) no longer render the disabled="disabled" attribute if their Enabled property is set to false (or if they inherit this setting from a container control).

Legacy rendering can be preserved using the ControlRenderingCompatibilityVersion setting in the web.config file.

Also see:

HOW TO control ASP.NET's Adaptive Rendering behavior

HOW TO manage a ASP.NET site during maintenance 

Read More

Adobe BrowserLab vs Browsershots.org: online services for cross browser testing

Adobe BrowserLab is an online cross browser testing  service (free till April 12, 2012) that has more features than Browsershots.org, the other free online cross browser testing service. However, BrowserLab currently covers a smaller set of browsers & platforms than Browsershots -

• Chrome 10 - Windows
• Chrome 11 - Windows
• Firefox 3.0  - OS X
• Firefox 3.0 - Windows
• Firefox 3.6 - OS X
• Firefox 3.6 - Windows
• Firefox 4.0 - Windows
• Internet Explorer  - Windows
• Internet Explorer  - Windows
• Internet Explorer  - Windows
• Internet Explorer  - Windows
• Safari 4.0 - OS X
• Safari 5.0 - OS X

Unlike Browsershots, BrowserLab requires registration. The screenshots are shown using Flash so Flash Player plugin 10.0.0 or higher is required and Javascript needs to be enabled in the browser.

Opening screen showing BrowserLab generate screenshots for a chosen Browser Set

Some unique features of BrowserLab:
- Preview full screenshots with multiple view options and customizable test settings.
- Rulers & Guides - pinpoint the exact location of any area within a screenshot.
- Adjust screen shot alignment - to compare specific page elements to each other, you can adjust the alignment of screen shots individually. This helps you account for shifts caused by different browsers, which align page content differently
- Screenshot delay - you can preview content that needs time to generate by pausing the rendering of a screenshot by up to 10 seconds. This lets you capture Ajax data, interface animations that occur after the page loads, and Flash movies after their initial loading process.
- BrowserLab for Firebug add-on - lets you preview temporary changes you've made to a page with Firebug. BrowserLab can be launched directly from Firefox to show how the page looks in Firefox & other browsers.
- Active Links in screenshots - Links in screenshots can be activated by holding down the Control or Command keys & clicking. BrowserLab will open the link & generate a screenshot, replacing the current screenshot.

Related:
HOW TO make web pages "cross browser"

Read More

HOW TO check what HTML5 features a browser supports

Now that I'm getting my feet wet in HTML5, I thought I should spend more time with features that are supported by all popular browsers rather than digging into HTML5 features that are implemented by only one or two browsers.

Table showing browser support for HTML5 Input types from W3Schools.com

I noticed a nice demo by Craig Shoemaker in the Pluralsight HTML5 Fundamentals course on feature detection with Modernizr that lists all supported features. Not finding any readymade sample similar to his script after some googling and lazy to write it on my own, I tweeted him to ask if could share his code.

I appreciate that he did and I got it working locally after tweaking the CSS a bit to ignore a few images that he had used in his slightly old (it uses Modernizr 1.6) original code. I hope to work on it further while I learn more about HTML5 & Modernizr.

Meanwhile, here is the HTML5 Feature detection script using Modernizr 1.6 (red indicates a feature is 'not supported' while green means 'supported')

Update: haz.io & the Modernizr Test Suite  show a much larger list of HTML5 features supported by a browser opening their test page.

Browserscope compares all browsers on supported HTML5 features in a single page. I wish the first row & column of the table there were frozen for better readability.

Read More

Chrome Offline Installer

Chrome uses a installer that you have to first get which then downloads the latest stable version of the browser. If you have to install Chrome on several machines, you can grab the offline installer. That way, you don't even need internet connectivity for each install.

I found this helpful tip on the official Chrome Forum.

Read More

HOW TO detect unused CSS style definitions

As your web app project & the team size get larger,  there is a chance that the CSS style definitions within the stylesheets grow uncontrollably due to lack of coordination among the developers. This could lead to duplicate style definitions & gradually this could impact web page performance.

Luckily, there are tools to detect unused CSS selectors per page & weed them out manually -

• Dust-Me Selectors is a Firefox Extension (Firefox version 4 is not currently supported) that scans all the definitions inline & within external stylesheets and reports the unused ones.

• Audit tab within Google Chrome Developer Tools (Ctrl+Shift+I) lists unused selectors as part of its performance recommendations 

Also see:
HOW TO cut & paste just the text in a browser, not the formatting

Read More

Dashboard-like info with Browser tabs, Windows 7 Taskbar tabs

Browser tabs & Windows 7 Taskbar tabs are turning self-aware. 

This is how my browser looked the other day:

I had the summary of all that was happening within those browser tabs because of the ubiquitous AJAX code running inside all those webpages which was dynamically updating the page title.

In Windows 7, a Taskbar tab representing a browser can show the download progress of a file being fetched within that browser visually as a green flowing gel.

Hotmail  has added email notifications to its pinned site that displays the number of new messages directly in the taskbar.

Read More

The Glorious History of Internet Explorer

Love it or hate it, you will have to appreciate IE’s staying power. Having been around for 16 years, it is still the browser market leader. Here are some interesting facts about Internet Explorer:

IE 1.0

• IE 1.0, based on Mosaic, was released together with the Windows 95 Plus! Pack in 1995
• Used on Windows 95, IE 1.0 was only slightly more than 1 MB in size.
• IE 2.0 was the very first cross-platform browser that supported both Windows and Mac.
• Released in 1995, IE 2.0 had support for JavaScript, frames & cookies
• At the end of the first week of IE 3’s release in 1996, more than 1 million copies of the browser were downloaded.
• IE4 which came in 1997 introduced Microsoft's Trident layout engine, which is still in use today in Internet Explorer.
• Released in 1999, IE 5 was the first browser to support bi-directional text.
• IE 5 introduced XMLHttpRequest which enables building AJAX applications.
• The XMLHttpRequest object was not completely functional until as late as version 1.0 of Gecko released on June 5, 2002.The XMLHttpRequest object became a de facto standard amongst other major user agents after it was implemented in Safari 1.2 in February 2004 & Opera 8.0 in April 2005 (Source: Wikipedia). Chrome wasn't even around at that time.
• IE6, released in 2001, was the most widely used web browser during its tenure. At its peak in 2002 and 2003, it attained a total market share of nearly 90%. IE 6 sounded the death knell for Netscape Navigator.
• Coming in 2006, IE 7 delivered the Web 2.0 experience.
• IE 8.0, which came in 2009, focused on secure browsing. It introduced a bunch of new features like web slices, accelerators, automatic Tab crash recovery and inline search within pages.
• After 2 beta releases which had millions of downloads, IE9, the oldest among popular browsers, promises to give the rest a run for their money.

Related:
Timeline of web browsers

Read More

HOW TO cut & paste just the text in a browser, not the formatting

Typically when I have to paste formatted text within a rich text box of a web app, I paste it into the search box of the browser first to remove the formatting & then paste the un-formatted text in a rich text editor. What a pain!

I learnt from the WebApps StackExchange forum that in Chrome, you can use the keyboard shortcut Ctrl + Shift + V to paste the unformatted version of the copied text.

While monkeying around to see if there is any trick to make this work in browsers other than Chrome, I serendipitously discovered that  Ctrl + Shift +C opens Developer Tools in Chrome & triggers the Inspect element hotkey that shows a tooltip for a webpage element that you hover upon.

Also see:
Keyboard shortcuts common to Firefox & IE

Read More

HOW TO open your favorite set of websites in new browser tabs at once

Ignore this post if you live on the web & rarely turn off your computer.

On the other hand, if you have a favorite set of websites that you open everyday, you can automate the process of starting these sites in multiple tabs within a single Firefox window by using a Windows Batch file. To create such a Windows Batch file, open Notepad or any text editor & paste these lines -
@echo off
start firefox.exe "stackoverflow.com" "twitter.com" 


Change the URLs in the example to your own favorites & save the file with a valid name and a .bat extension.

Related: Setting Browser Tabs to Open at Start-Up

Read More

7 HTTPS myths debunked

HTTPWatch Blog has a nice article debunking these HTTPS myths -

• Myth #1 – My Site Only Needs HTTPS for the Login Page
• Myth #2 – Anything can go in Cookies and Query Strings with HTTPS
• Myth #3 – HTTPS is Too Slow
• Myth #4 – New SSL Certificates Have to be Purchased When Moving Servers or Running Multiple Servers
• Myth #5 – Each HTTPS Site Needs its Own Public IP Address
• Myth #6 – SSL Certificates are Expensive
• Myth #7 – HTTPS Never Caches

Also see:
A Web App Is As Secure As You Make It & the Browser It Runs On
Prevent identity theft with HTTPS browsing

Read More

WebPageTest Tips & Tricks

WebPageTest is a powerful online web performance testing & analysis tool that has been adding a lot of interesting new features.  Their list of test locations to check a page from is growing (currently 17) & now includes Delhi, India. It makes it easy to do "what-if" testing on production pages by showing what performance gains can be achieved by removing ads, widgets, JavaScript. It looks simple on the surface but once you start poking around Advanced Settings & see its analytical review of web pages you test, you'll wonder how it's even free.

I highly recommend this tool to web developers who want to improve performance of the web pages they build.

If you never tried this tool or gone through it superficially, check Patrick Meenan's video to get started and learn directly from the creator of the tool.

Read More

Web Performance Testing - Interpreting a Waterfall Chart

Some native browser Developer tools & external  web performance analysis tools  visualize data that is generated by the series of actions that occur between a user and the server from the time a request is made till it is completely delivered, through HTTP Waterfall charts

Joshua Bixby's Waterfalls 101 article explains in plain-English the parts of the Waterfall chart & how to analyze it.

Read More

Add DOM Monster to your collection of Web Perf Analysis & Optimization tools

If you like web page performance analysis & optimization tools like YSlow, you will love DOM Monster (thanks @souders)

"DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health."

The good thing about this tool is that you wouldn't have to update it when a new version comes out as it is in the form of a bookmarklet.

DOM Monster suggestions for a ASP.NET Forums page (click to enlarge)

Read More

Chrome silently auto-updates itself, integrated Adobe Flash Player & PDF viewer

Google's advertises Chrome features pretty well in its “20 Things I Learned about Browsers and the Web” guide. I didn't know about these till I read them up in that guide -

In Chrome, for example, sync saves all bookmarks, extensions, preferences and themes to your Google Account. Use any other Internet-connected computer, and all you need to do is fire up Chrome and log in to your Google Account through the browser’s sync feature. Voila! All your favorite browser settings are ready to use on the new machine.

In the Google Chrome browser, you’ll notice a little something extra in the Options menus: a direct link to the Adobe Flash Player storage settings manager. This link makes it easy to control local data stored by Adobe Flash Player (otherwise commonly known as "Flash cookies"), which can contain information on Flash-based websites and applications that you visit. Just as you can manage your browser cookies, you should be able to easily control your Flash cookies settings as well.

Chrome has integrated Adobe Flash Player and a PDF viewer into the browser, so that both these popular plug-ins are also auto-updated.

Another technique that modern browsers like Chrome use to fetch and load web pages much more quickly is called “DNS pre-resolution”. The process of translating a web address into an IP address through a DNS lookup, or vice versa, is often called “resolving.” With DNS pre-resolution, Chrome will simultaneously look up all the other links on the web page and pre-resolve those links into IP addresses in the background. So when you do actually click on one of the links on the page, the browser is ready to take you to the new page instantly. Over time, Chrome also learns from past visits so that the next time you go to a web page that you’ve previously visited, Chrome knows to automatically pre-resolve all the relevant links and elements on the web page

Microsoft's contribution to AJAX is cautiously acknowledged -

But the dynamic web as we know it today truly came to life when XHR (XMLHttpRequest) was introduced into JavaScript, and first used in web applications like Microsoft Outlook for the Web, Gmail and Google Maps.

Read More

Debug JavaScript with Firebug & IE Dev Tools Console commands

Instead of debugging client-side code with the JavaScript alert command, using the Firefox Firebug extension & Internet Explorer Developer Tools' (F12 keyboard shortcut) Console commands makes debugging less distracting & simpler.

The following Console commands work in both IE & Firebug -

• console.log
• console.info
• console.warn
• console.error
• console.assert

To use either of these in place of an alert in your JS code, make sure you have the Console enabled.

Trivia: Firebug was initially written by Joe Hewitt, one of the original Firefox creators. He now works at Facebook.

Read More

Adding new Search Provider easiest with Opera

If you search for items frequently on popular sites (like Amazon), it may be easier to use that site's native search right from the browser. All popular browsers allow adding new Search Providers to the search box but it is fastest to do this in Opera, followed by Chrome.

IE8 & Firefox require an add-on to be installed for each search provider which internally uses a standard XML-based OpenSearch Description File. In contrast, Opera lets you quickly configure a search provider yourself for any any site that provides it. Let's see how to search StackOverflow, the programming Q & A site, right from the Opera browser.

1. Go to Tools > Preferences & select the Search tab in the dialog box that opens up. It contains a list of search providers like Google that are already added by default.

2. Click on the Add button & fill in these values -
Name: Stack Overflow
Keyword: so
Address: http://stackoverflow.com/search?q=%s

3. Click on the OK button to save these settings & after that you will notice Stack Overflow as a search engine option for the search box.

Instead of using the search box, you can also search from the address bar by typing the keyword so followed by your search query to look up StackOverlow specifically. Example  - so jquery

If you wish to exclude certain sites from being included in the results displayed by popular search engines like Bing & Google, you can edit search settings to restrict sites using the site: operator. For example, to exclude results from the domain example.com when you search Google from the Opera search box, edit the address in the Search preference for this search engine to look something this  -
 http://www.google.com/search?q=%s+-site:example.com

Read More