Fast Loading Thesis Blogger Template

Home » IE

Showing posts with label IE. Show all posts

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 -

audio:m4a
audio:mp3
backgroundsize
borderradius
boxshadow
canvas
canvastext
csstransforms
draganddrop
fontface
generatedcontent
geolocation
hashchange
hsla
inlinesvg
localstorage
multiplebgs
opacity
postmessage
rgba
sessionstorage
smil
svg
svgclippaths
video:h264

IE10 additionally supports the following HTML5 features -

applicationcache
cssanimations
csscolumns
cssgradients
csstransforms3d
csstransitions
history
indexeddb
input:autofocus
input:list
input:max
input:min
input:multiple
input:pattern
input:placeholder
input:required
input:step
inputtypes:email
inputtypes:number
inputtypes:range
inputtypes:search
inputtypes:tel
inputtypes:url
textshadow
websockets
webworkers

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

Browsers, IE

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

Browsers, IE, Tip

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.

Browsers, IE, Tip

Search from browser address bar in IE, Firefox, Opera

I found out by accident that its not just Chrome that has the combined search and address bar (Omnibox) feature - the address bar in IE8, Firefox 3.0 & Opera 9.6 (the version numbers are the ones I've tested on) can also double up as a search box. You can type your search term in the address bar of any of these browsers and press the Enter key to see results from your default search engine. This doesn't work in Safari (version 4.0 on Windows) though.

Its good to see browser features getting consistent across the board.

Also see:
Keyboard shortcuts common to Firefox & IE8
View math calculation results directly in Firefox Search bar

Browsers, IE

Got tough IE questions? Check EricLaw's blog

Eric Lawrence is a program manager on the Internet Explorer team & best known as the creator of Fiddler. He has also developed several IE addons & browser-related tools.

I have found his blog posts to be insightful. His answers to difficult questions asked on forums are informative & comprehensive. Here's a compilation of his posts that I liked most -

(work in progress...)

Also see:
Fiddling with Fiddler

HOWTO, IE

HOW TO prevent 3rd-party browser extensions from being installed in IE

There can be some sneaky programs that install not just what they explicitly claim to do but also things like toolbars & add-ons within IE. As most people agree to a software publisher's Terms & Conditions without reading them, they may have deviously add a line that says one of your kidney & your PC are their property.

These add-ons known as browser helper objects may contain flaws such as buffer overruns which impact Internet Explorer's performance or stability.

If you wanted to play safe & prevent any 3rd-party browser extensions from being installed at all in IE8, there is a setting, I came across on IEBlog, that you can use.

Open GPEdit.msc (Local Group Policy Editor) using the Run option in XP or the Search bar in the Start menu. Open Administrative Templates > Windows Components > Internet Explorer > Internet Control Panel > Advanced Page, and set the policy "Allow 3rd-party browser extensions" to DISABLED.

Under the Internet Explorer category referred above, there are a whole lot of other settings that you can also configure. For instance, there is a setting there to "Turn on menu by default". Before you change the setting, you can also read a detailed explanation about that setting.

Also see:
HOW TO disable automatic META tag refresh/redirect through your browser

Browsers, IE, Trivia

15 years of Internet Explorer

Last month, Internet Explorer turned 15. Here's a timeline of IE releases based on excerpts from seattlepi's article on the history of IE -

IE1 was born when Microsoft got a license from Spyglass Inc. for the source code of Mosaic -- the first graphical Web browser technology. Microsoft launched IE1 in August 1995 as part of the Windows 95 Plus! pack, a $49 add-on for the landmark operating system.

IE2 came in November 1995, and by April 1996 it also was available for Windows NT, Windows 3.1 and Macintosh. Users could buy it as part of the Internet Starter Kit for Windows, which cost $20.

It wasn't until Internet Explorer 3.0, in August 1996, that Microsoft introduced the "blue E" logo we all know now.

IE4 was the Big Mama. Released in September 1997, Microsoft soon bundled it with Windows 98 -- a practice that took IE's market share from less than 20 percent in late 1997 to about 60 percent by 1999.

IE4 introduced Microsoft's Trident layout engine, which is still in use today in Internet Explorer.

Microsoft continued to eat away at Netscape's usage with Internet Explorer 5.0, which was officially released in March 1999 and was another major player in United States v. Microsoft.

IE6 shipped with Windows XP in 2001.

Microsoft itself has since likened the 9-year-old browser to old, spoiled milk, urging users to upgrade to the current version, Internet Explorer 8.

Internet Explorer 7, though it represented a big leap for Microsoft's browser, wasn't as widely used as IE6. Launched in October 2006, it included tabbed browsing, support for RSS and protection against phishing -- features popularized by rival Mozilla's Firefox.

By the time Microsoft released Internet Explorer 8 in March 2009, Chrome was on its second version and had a market share of about 2 percent.

The beta of Internet Explorer 9 is expected on September 15, 2010.

Related:
A Brief History of the Web
The History of Microsoft

Browsers, HOWTO, IE

HOW to continuously refresh any web-page in IE8 & FF

Have you ever felt hassled by a website that provides continuous updates (like cricket scores or live event updates) but requires you to reload the page manually? While Opera browser has an option to automatically reload a web page at pre-defined intervals, Internet Explorer, Firefox & Safari do not have any such feature by default.

I found this code for a browser bookmarklet to automatically refresh any web-page in IE on StackOverlow-

javascript:( function(){ i=0;setInterval("i++;var x=new ActiveXObject('Microsoft.XMLHTTP');
x.open('GET',location.href+'?'+i,true);x.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
x.onreadystatechange=function(){if(x.readyState==4)
{document.body.innerHTML=x.responseText;}};
x.send(null);",5000); }() )

I made the following minor change to it by replacing the use of Microsoft.XMLHTTP ActiveXObject with XMLHttpRequest object so that it works in all new browsers -

javascript:( function(){ i=0;setInterval("i++;var x=new XMLHttpRequest();
x.open('GET',location.href+'?'+i,true);x.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
x.onreadystatechange=function(){if(x.readyState==4)
{document.body.innerHTML=x.responseText;}};
x.send(null);",5000); }() )

Note that in the code snippets I have added newline characters for readability & formatting. Make sure you remove the newline characters so that the whole code is on just one line. The code uses a JavaScript Timer to refresh the page every 5 seconds or 5000 milli-seconds. Change it to set an interval of your choice.

To add the bookmarklet in Firefox, enable the Bookmarks Toolbar (View > Toolbars > Bookmarks Toolbar). Right click on the Bookmarks Toolbar & select New Bookmark. In the Add Bookmark dialog box that opens, type "Refresh Page" as the name of the bookmarklet & paste the second code snippet that's above into the Location textbox as shown in the screenshot below.

A good way to share Bookmarklets (like the jQuerify Bookmarklet or these popular Bookmarklets) is to host it on a webpage as hyperlinks. I could not find a way to embed it on a webpage as a hyperlink (because the code involves using nested quotes) nor a clean way to add the above Bookmarklet to the Favorites Bar in IE8. The following steps to add the Bookmarklet though a little clumsy, get the job done -
1. With the Favorites Bar (View > Toolbars > Favorites bar) open, add any webpage from the tabs as a Favorite.
2. Right click on that Favorite in the Favorites Bar & select Properties from the context menu.
3. In the URL text box of the Web document tab, add the Bookmarklet code shown above

4. A warning "The protocol 'javascript' does not have a registered program. Do you want to keep this target anyway?" appears. Click on the "Yes" button
5. Go to the General tab & type the name for the Bookmarklet as "Refresh Page"

Now whenever you need a webpage to be reloaded automatically, click on the Bookmarklet while you have that page open.

I've tested the Bookmarklet for a short while with Google News. Please report if you find any issues with the Bookmarklet or any other feedback that you may have.

Also see:
View Selection Source in IE

.120

"Open With Google Docs Viewer" IE8 Accelerator

Accelerators in IE8 work on text within a web page & let you access popular web services from the context menu. For instance, to translate a word you can highlight text from any webpage, and then click on the blue Accelerator icon that appears above your selection & choose the Translate with Live Search Accelerator.

I recently built a "Open With Google Docs Viewer" IE8 Accelerator that lets you view a PDF, Powerpoint or TIFF document on the Web without downloading it to your local computer. Once installed (click on the button on this page), you can use this Accelerator to view any files of those formats within the browser with Google Docs Viewer. It is also helpful when you don't have the supporting application to open the file with. Once the file is opened within Google Docs Viewer, you can choose to download or print or edit it online in case it is a .PDF or .PPT file.

It's easy to build Accelerators and you can find plenty of independently developed IE8 Accelerators (and Web Slices and Search Providers) like my favorite "Find on LinkedIn" Accelerator in the IE 8 Add-ons Gallery.

I submitted one a while back & wish the site's interface to contribute was more explicit & intuitive. To start contributing you have to click on the "Join" link on the top right corner of the Add-ons Gallery home page to create an account. Once you are signed-in, its not immediately obvious where you have to upload your Accelerator XML file. You have to click on your user name after signing-in to reach the Upload page where you have to provide details about your Accelerator. It is published on the Gallery after a Review. It would have been better if names of the contributors were shown once they are listed on the Gallery.

Also see:
HOW TO open a PDF or Word .DOC file within the browser

Browsers, IE

Deleting cookies doesn't clear Hotmail's "Remember me" in IE8

An anxious Hotmail/Passport user was bothered that in IE 8 his Accounts showed up even after deleting cookies. He posted this concern on the MSDN IE Web Development Forum.

I verified this in IE 8 (on Windows XP SP2 & Vista) by clicking the Delete button in the Browsing History section in the General Tab of Internet Options. I believed this "Remember me" feature depended on cookies & should go away on deleting cookies. I even closed the browser & re-opened the browser after 10 minutes to see the user name still there. On deleting cookies in Chrome though, the user name does go away.

I found that in the Hotmail/Windows Live Sign In page, only on clicking the X mark that you get on hovering near the user name (which represents "Don't remember this Windows Live Id") can you make the credentials go away.

I checked with my Indian MVP colleagues what the reason could be for this intriguing behavior in IE 8. I got to know from Windows Client MVP Ramesh Kumar that this is because of the Windows Live Sign-in Helper, an IE 8 Add-on that is enabled by default.

The purpose of this Windows Live Sign-in Assistant is to provide sign-in support for multiple IDs. It has been provided to make the sign-in experience faster and more convenient for users that have more than one Windows Live ID account.

So this explains the mystery of the credential persistence for those who are not aware of this IE 8 Add-on. The Windows Live Sign-in Assistant article explains what you can do if you don't need this feature -

If you decide that the Sign-in Assistant is not for you, you can disable it by going to the Tools menu in IE, selecting “Manage Add-ons”, highlighting “Windows Live Sign-in Helper”, and then choosing “Disable” in the settings box. Alternatively, you can remove it permanently by using the “Add/Remove Programs” dialogue in the Control Panel (it shows up as “Windows Live Sign-in Assistant”).

Also see:
HOW TO create your own IE8 Accelerator

Browsers, IE

View Selection Source in IE

One of the features I like in Firefox as a developer is the "View Selection Source" option that you can choose from the context menu to view dynamically rendered source of a desired portion of the web page. This feature helps you focus on a specific portion of a web page that you want to investigate instead of getting the entire HTML source.

IE 8's Developer Tools lets you view the HTML source for selected content as well but using it is cumbersome. After invoking Developer Tools (Tools > Developer Tools or F12 key) with the HTML tab open, you have to select an element in the DOM Explorer & then choose View > Source > Element Source with Style. That's about 5 steps compared to just a single step in Firefox.

Patrick Clancey has shared a bookmarklet that will let you view the HTML source of a selected portion of a web page within an alert window, in just a single step. Follow these steps to install the bookmarklet in IE 8:

Scroll down to the bottom of this page.
Right click on the link View Selection Source
Select "Add to Favorites..."
In the "Add a Favorite" dialog box that opens, select Favorites Bar from the dropdown opposite to label "Create in"
Click on the Add button

From the menu, select View > Toolbars & select the Favorites Bar to see the bookmarklet appear below the address bar.

To use the bookmarklet, select the content you want to view the HTML source of and click on the View Selection Source bookmarklet. The source will show up in an alert window

Also see -
IE8 Developer Tools Tips & Tricks:
#6: Count links in a page
#5: Find Link Paths
#4: Edit CSS Visually
#3: Customize HTML Source Viewer
#2: Script Console
#1: Color Picker

Browsers, HOWTO, IE

HOW TO test a web page in different versions of IE

Pete LePage, an Internet Explorer Product Manager discourages running multiple versions of IE on the same box (he calls them "Frankenbuilds") using tools like IETester.

There 2 good free alternatives for testing your web application in different versions of IE -

For help on using a VPC image, check this step by step guide.

Also see:
HOW TO easily verify your website design in different browsers/OSs

Browsers, HOWTO, IE

HOW TO create your own IE8 Accelerator

Roughly a year after it has been in Beta, IE8 was released last week. It is more standards compliant than the versions before it. This is good news for web developers as they won't have to write browser specific code. IE8 also introduces new features like Accelerators and Web Slices that will surely interest web developers.

Accelerators are XML files that let you act on data in a web page by interacting with web services. It is more direct than using a search provider which again does not adapt to all scenarios. Accelerators appear in the context menu. Although it may look a little daunting at first, it is simple to create and deploy as it all it takes is filling up an XML template (borrowed from a MSDN code sample). The OpenService Accelerators Developer Guide explains what the elements & attributes of the Accelerator XML file mean.

I prefer previewing PDF & Word files in web pages that I surf instead of opening them directly. Google Search & GMail have a way to preview PDF & Word files as HTML but otherwise there is no direct way to view them as HTML. For such tasks, the Online Viewer from Samuraj Data has been my Man Friday. I've now created an Accelerator called "ViewAsHTML with Samuraj Data" that will convert a PDF or Word file link on a web page to HTML in a single step. I have jotted down the steps required to build this Accelerator in an article. Read it or install the Accelerator and try it out yourself. I would love to hear any feedback.

Browsers, IE

IE8 Developer Tools Tips & Tricks - #6: Count links in a page

Google Webmaster Guidelines recommend keeping the links on a given page to a reasonable number (fewer than 100).

Matt Cutts explains that although not following "100 links" recommendation will not result in Google automatically considering the page to be spammy, it is a good idea to follow the guideline as it will provide a better user experience and ...

If you end up with hundreds of links on a page, Google might choose not to follow or to index all those links. At any rate, you’re dividing the PageRank of that page between hundreds of links, so each link is only going to pass along a minuscule amount of PageRank anyway.

So if you would like to follow the guideline, how to count links in web page?

IE8 Developer Tools generates a nice report with a numbered list of all the links in a page when you choose View > Link Report from the Developer Tools menu. Although earlier versions of IE Developer Tools/Toolbar had this Link Report feature, the links were not numbered.

Also see:
Google Browser Security Handbook
IE8 Developer Tools Tips & Tricks - #5: Find Link Paths

Browsers, IE

IE8 Developer Tools Tips & Tricks - #5: Find Link Paths

Cloaking hyperlinks is a cunning trick that comment spammers & phishing attackers use to ride on the popularity of websites that are in the good books of search-engines. If you run a public website that allows comments or accepts input, you should keep an eye on URLs submitted by users that could be cloaked under unsuspecting hyperlink text.

Developer Tools has a nice feature called Link Paths that will show the URLs corresponding to hyperlinks on a specified page as labels overlaid on the link text. You can also have it generate a report of all Links in a page. This can also be helpful while debugging a database-driven web page that you may have built with dynamic URLs based on values retrieved from a database.

To try this feature, open Developer Tools from the menu or using the keyboard shortcut F12 after you have opened the web page whose hyperlinks you want to inspect. From the View menu, select Link Paths. Switch to the web page and you will see the actual URLs as labels wherever links are present. From the same menu, you can choose Link Report to have a complete list of links on the page generated for you.

Browsers, HTML/CSS, IE

IE8 Developer Tools Tips & Tricks - #4: Edit CSS Visually

Debugging CSS in an inherited web application or trying to adapt CSS from an inspiring design of someone's website is generally not an easy task. One of the interesting features in IE 8 Developer Tools is the facility to edit CSS visually.

After you open the desired web page of which you want to debug CSS, open Developer Tools from the menu or using the keyboard shortcut F12.
Click on the CSS tab.
If you already know the Class and ID information, select it from the treeview of all Class and ID style definitions for the corresponding web page otherwise go to the View menu in Developer Tools and select Class and ID information. On choosing this all the CSS Classes and IDs will be displayed as small labels on the web page that you are debugging CSS for.
You can see how the attributes of a particular style definition operate by un-checking the checkboxes next to each element's style definition & view the changes immediately in real-time by switching to the web page.

Browsers, IE

IE8 Developer Tools Tips & Tricks - #3: Customize HTML Source Viewer

Developer typically look at the HTML Source to locate possible coding issues. Notepad is not an ideal viewer as it lacks the sophistication of EditPlus or NotePad++ or any of the numerous editors. Luckily it is easy to change the viewer in IE8 (RC1).

Hit F12 to invoke Developer Tools. From the menu, choose File > Customize Internet Explorer View Source and then from the cascading menu, select Other. This will allow you to specify the path of your favorite editor's executable. Once you set it, the HTML Source will be shown in your favorite editor whenever you choose View Source from the browser.