SWiK
» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with front + ie

Internet Explorer 8 Beta 2 and Web Standards

Internet Explorer 8 Beta 2 was released today. There are several cool UI enhancements that this beta brings to the table that I won't cover in this post, but you can learn more about them on the IEBlog. Instead, I want to talk about how beta 2 affects IE's relationship to web standards.

First, CSS Expressions are no longer supported in Standards Mode:

Also known as 'Dynamic Properties', CSS expressions are a proprietary extension to CSS with a high performance cost. As of Internet Explorer 8 Beta 2, CSS expressions are not supported in IE8 standards mode. They are still supported in IE7 Strict mode and Quirks mode for backward compatibility.

In case you don't know, CSS expressions were actual bits of JavaScript that you could run from CSS rules; this was commonly used to simulate the CSS max-width property for IE:

PLAIN TEXT
CSS:
  1.  
  2. div.someClass {
  3. /* Internet Explorer */
  4. width: expression(document.body.clientWidth> 600) ? "600px" : "auto";
  5. /* Standards-compliant browsers */
  6. max-width: 600px;
  7. }
  8.  

IE 8 beta 2 also now supports alternate style sheets:

Internet Explorer 8 now supports alternative style sheets as specified by HTML4 and CSS2.1. The alternative styles that are defined by the Web page author is available through the Style menu under the Page menu. The styles are also available through the Style menu under the View menu. The No Style option on either menu can be used to disable all authors styling.

In terms of the Known Issues with IE 8 Beta 2, the first is related to Ajax bookmarking and back button support and using window.location.hash to do cross-domain communication:

Internet Explorer 8 create entries in the travel log and back button for each instance of window.location.hash that is set. This is part of the behavior for Internet Explorer 8 AJAX Navigation. If you use this technique to communicate between documents, we recommend that you switch to the Internet Explorer 8 Cross Document Messaging feature that is based on Section 6.4 of the HTML 5.0 specification.

Finally, there are some issues with the onload event for IE's XDomainRequest object that helps with cross-domain communication:

The onload event may not fire reliably. We recommend you use the onprogress events which continues to fire as the data is received.

Unfortunately this is it for this release. You can see the full Beta 2 release notes, or download it yourself.

On a related note, IE 8 Beta 2 includes cross-site scripting attack (XSS) protection:

The XSS Filter operates as an IE8 component with visibility into all requests / responses flowing through the browser. When the filter discovers likely XSS in a cross-site request, it identifies and neuters the attack if it is replayed in the server’s response. Users are not presented with questions they are unable to answer – IE simply blocks the malicious script from executing.

Finally, PPK has also published a post on IE 8 Beta 2 and its changes.

Ajax: Ajaxian

Transformie: Implement WebKit CSS transforms in IE

Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE

When you include the library, it can scan for your -webkit-transform-* transforms (soon to support the standard transform-*) and will go to work for you using a couple of nifty technologies all put together:

  • IE Filters such as DXImageTransform.Microsoft.Matrix that do the rotate, skew, scale, and general matrix work for you
  • onpropertychange "almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event." Here it is at work in the library:
    PLAIN TEXT
    JAVASCRIPT:
    1.  
    2. jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {
    3.         if(e.originalEvent.propertyName == 'style.webkitTransform') {
    4.                 Transformie.refreshMatrix(this);       
    5.         }                     
    6. });
    7.  

From there you can see the transforms which look like:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // rotate
  3. matrices.push($M([
  4.         [Math.cos(a),   -Math.sin(a),      0],
  5.         [Math.sin(a),   Math.cos(a),       0],
  6.         [0,     0,   1]
  7. ]));
  8.  

Very nice indeed.

Ajax: Ajaxian

mtjs_iepnghandler: more PNG support for IE 6

Micah Tischler wasn't happy with the variety of approaches for allowing transparent PNG support in IE 6, so he continued his work with mtjs_iepnghandler which intelligently provides true background repeat functionality for transparent PNGs as well as full positioning.

In this script image tags are supported, both with and without a blank spacer GIF, and background image PNGs may be positioned, as well as repeated, even if they're smaller than the content element they're in. Also, the repeat functionality is implemented to provide true repeat functionality, rather than just stretching everything willy-nilly.

mtjs_iepnghandler.js traverses the DOM, making adjustments where it runs into PNGs. The methods used depend on whether a PNG is in use as an image, or as a background, and, if it's a background, whether it is repeated or positioned. The script also takes into account the dimensions of the PNG to make intelligent decisions about how to implement repeats. It should be noted that, like mtjs_csswalker_iepnghandler.js, the script just sits quietly and does nothing on browsers other than IE5-6.

Micah finishes up his post comparing his solution to the others out there.

Ajax: Ajaxian

IEPNGFix 2: Now supports CSS background position and repeat

Ah the age old IEPNGFix solution to the problem that we had with IE 5.5 / 6.0 not supporting alpha transparency. The first IEPNGFix solved the problem:

This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported.

Now we have a new version that adds the ability to use CSS1 compatible background position and repeat.

Ajax: Ajaxian

IE8 HTML 5 Ajax Page Navigations

Sharath Udupa, an IE developer at Microsoft has posted on the IE 8 page navigations feature:

In IE8 mode, we provide support for script to update the travel log components (for e.g. back/forward buttons, address bar) to reflect client-side updates to documents. This allows a better user experience where users can navigate back and forth without messing the AJAX application state.

What is interesting here is that even though Sharath said: "adopted in IE8 from HTML5" we have Richard Monson-Haefel (Curl evangelist) saying Ajax is dead RIA walking. This strong conclusion comes from the fact that IE implemented an HTML 5 feature???

The Open Web always has baggage from the fact that there are many parties involved, but the benefits have always made it win out. The browser is the virtual machine of the Web. While Richard thinks that fragmentation can kill Ajax, I see a brighter picture. We have HTML 5 to look at, and browser are innovating in interesting ways. That is a good thing. It pushes us forward.

It is interesting that the articles pushed are on Silverlight using this for its own goals, but Sorry Richard, this doesn't mean people will be learning Curl :)

Ajax: Ajaxian

Unobtrusive DOM 2 Event implementation for IE; Uniform Event Model revisited

Tavs Dokkedahl sent in a great email about work that he and Allan Jacobs have done on bringing DOM event implementations to IE. Here it is in full:

About a year ago or so I put out the Uniform Event Model (UEM) script which
was an implementation of the W3C DOM 2 Event Interface for IE. As it turned
out that release was very premature - the script was simply incomplete and
definitely not ready for production use.

The design ideas however were good enough. Since then Allan Jacobs has
joined the JSLab team and together we have written a new version of UEM
which is much more stable and modular.

This first release includes support for:

  • DOM 2 Event Interface in IE
  • DOM 2 UIEvent Interface in IE
  • DOM 2 MouseEvent Interface in IE
  • DOM 2 Legacy keyboard handling in IE (fancy way of saying "handle it like
    Firefox")

The code is unobtrusive - no special syntax or semantics are needed. A lot
of documentation is available

There still exists issues with some types of events but at large the code is
stable and is performing well enough to be released to the public. Hopefully
we can get some feedback on how to improve it and catch some early errors.

The size of the script is about 32Kb (when minified) it its basic form but
additional modules are available for inclusion. The download page can be
found at http://www.jslab.dk/jdc.download.php

We are currently working on finishing the DOM 3 KeyboardEvent and DOM 3
textInput interfaces (for IE, Firefox, Opera and Safari) besides various DOM
corrections for other browsers than IE.

Ajax: Ajaxian

IE8 showing how serious it is about security

The IE8 team has created a blitz on its blog with a slew of posts on security. There is a ton of great stuff here, and is well worth going into detail on each post:

IE8 and Trustworthy Browsing

At first they set the scene:

This blog post frames our approach in IE8 for delivering trustworthy browsing. The topic is complicated enough that some context and even history (before we go into any particular feature) is important, and so some readers may find this post a bit basic as it’s written for a wide audience. In previous posts here, we’ve written about IE8 for developers: the work in standards support, developer tools, script performance, and more. In future posts, we’ll write about IE8 for end-users (beyond the benefits of improved performance, activities, and Web Slices). This post starts a series about trustworthy browsing, a topic important for developers and end-users and everyone on the web. By setting the context and motivation with this post, the next posts that dive into the details of IE8 will build on this foundation.

Trustworthy refers to one of our overall goals: provide the most secure and most reliable browser that respects user choice and keeps users in control of their machine and their information. For reference, Microsoft’s framework for Trustworthy Computing in general spans four areas: security, privacy, reliability, and business practices.

IE8 Security Part III: SmartScreen® Filter

For Internet Explorer 8, we’ve built upon the success of the Phishing Filter feature (which blocks over a million phishing attacks weekly) to develop the SmartScreen® Filter, a replacement that improves upon the Phishing Filter in a number of important ways:

  • Improved user interface
  • Faster performance
  • New heuristics & enhanced telemetry
  • Anti-Malware support
  • Improved Group Policy support

IE8 Security Part IV: The XSS Filter

The XSS Filter operates as an IE8 component with visibility into all requests / responses flowing through the browser. When the filter discovers likely XSS in a cross-site request, it identifies and neuters the attack if it is replayed in the server’s response. Users are not presented with questions they are unable to answer – IE simply blocks the malicious script from executing.

With the new XSS Filter, IE8 Beta 2 users encountering a Type-1 XSS attack will see a notification.

IE8 Security Part V: Comprehensive Protection

As we were planning Internet Explorer 8, our security teams looked closely at the common attacks in the wild and the trends that suggest where attackers will be focusing their attention next. While we were building new Security features, we also worked hard to ensure that powerful new features (like Activities and Web Slices) minimize attack surface and don’t provide attackers with new targets. Out of our planning work, we classified threats into three major categories: Web Application Vulnerabilities, Browser & Add-on Vulnerabilities, and Social Engineering Threats. For each class of threat, we developed a set of layered mitigations to provide defense-in-depth protection against exploits.

Ajax: Ajaxian

X-UA-Compatible: IE=EmulateIE7

The IE team has created a new value for the X-UA-Compatible header in IE 8 IE=EmulateIE7.

We already had IE=7, which causes the page to be displayed in "IE7 Standards mode." This forces both quirks and standards mode pages up that path, and people were asking for a solution that only pushes the non-quirks mode ones to change, thus the new option:

In response to the great IE8 Beta 1 feedback we’ve received so far, we are introducing the “IE=EmulateIE7” tag to address this problem. EmulateIE7 tells IE8 to display standards DOCTYPEs in IE7 Standards mode, and Quirks DOCTYPEs in Quirks mode. We believe this will be the preferred IE7 compatibility mode for most cases. Support for IE=EmulateIE7 is available now as part of the IE June Security Update for IE8 Beta 1. Installing this update will enable you to verify you’ve applied the EmulateIE7 tag to your site correctly.

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content. Although adding this tag will prevent most display issues, you may also need to update your site to properly detect IE8. To learn more about IE8 document compatibility and browser detection, check out the IE Compatibility Center.

Ajax: Ajaxian

Is “finally” the answer to all IE6 memory leak issues?

Hedger Wang has been scanning a lot of Chinese blogs lately for solutions to IE6 and memory leak issues. One of the things he stumbled upon is a pretty nifty way of nulling the objects to stop memory leaks by using the try ... finally construct. So instead of this solution which leaks memory:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createButton() {
  3.       var obj = document.createElement("button");
  4.       obj.innerHTML = "click me";
  5.       obj.onclick = function() {
  6.         //handle onclick
  7.       }
  8.       obj.onmouseover = function() {
  9.         //handle onmouseover
  10.       }
  11.       return obj;//return a object which has memory leak problem in IE6
  12.     }
  13.     var dButton = document.getElementsById("d1").appendChild(createButton());
  14.     //skipped....
  15.  

You can use the following which doesn't:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createButton() {
  3.       var obj = document.createElement("button");
  4.       obj.innerHTML = "click me";
  5.       obj.onclick = function() {
  6.         //handle onclick
  7.       }
  8.       obj.onmouseover = function() {
  9.         //handle onmouseover
  10.       }
  11.       //this helps to fix the memory leak issue
  12.       try {
  13.         return obj;
  14.  
  15.       } finally {
  16.         obj = null;
  17.       }
  18.     }
  19.     var dButton = document.getElementsById("d1").appendChild(createButton());
  20. }
  21.  

More demos, proof of concept examples and the "finally" explanation is available on Hedger's blog: Finally, the alternative fix for IE6's memory leak is available

Ajax: Ajaxian

String Performance in IE: Array.join vs += continued

Tom Trenka has followed up his last post on String performance with a deep dive on IE that dispells the myth of Array.join.

Tom goes through tons of tests across versions of IE and using varying sizes of data.

In Conclusion

First things first—with the performance improvements with IE7, we no longer need to consider using an alternate path when doing large scale string operations; using Array.join in an iterative situation gives you no major advantages than using += in the same situation. In addition, the differences with IE6 were slight enough to allow you to not bother forking for that specific version.

The only time considering using an array as opposed to a string for these kind of operations is when you are aware that the fragments you are appending are very large (on the order of > 65536 bytes); doing this will cause the GC issues Dan Pupius talks about in his analysis of object allocation and the JScript garbage collector.

From there, we can progress to programming techniques—with Internet Explorer, it is much better to call Builder.append with as many arguments as possible than to simply iterate and push things in one at a time.

It is also better to start small; try to structure your string operations so that very large string operations are minimized. In this case, using a temporary buffer to assemble a set of strings together and then adding them to a much larger string is better than constantly adding small fragments to a larger string.

And as always, minimizing the size of an iteration will help get extra performance out of JScript.

The raw numbers have been made available to scour over.

Ajax: Ajaxian

IE 8 beta 2 coming in August

Bill Gates gave his last talk, appropriately, to developers at TechEd. No matter what you think of the guy, he is an icon that helped create the software industry. Without him and Steve Jobs, who do we have? :)

In his speach he talked about Internet Explorer, and how IE 8 will have an update in a couple of months:

Gates also highlighted Microsoft's flagship Web technology, the Internet Explorer (IE) browser, which has been an asset and a curse for the company over the years. While it allowed Microsoft to secure its dominant position in Web-browsing technology, it also triggered Microsoft's U.S. antitrust woes, something that haunts the company to this day. IE also has taken a hit in the past several years as Mozilla Firefox, an open-source browser, has gained a loyal following, forcing Microsoft to step up development and make its own product more innovative.

Gates revealed that beta 2 of the next version of IE, IE 8, will be available in August. He also stumped for what has been his pet interest during his years at Microsoft -- natural human-interface technology that allows people to interact with computers in ways similar to how they interact with each other. Last week, Microsoft revealed that the next version of Windows, Windows 7, will include touchscreen technology, a fact he mentioned in his talked.

I have a funny feeling that we are going to see some really cool things to come out of IE 8. A few surprises.

Ajax: Ajaxian

IE 8 and Cross Document Messaging

IEBlog has posted about the IE 8 support of postMessage, which is great news.

They link to a MSDN article that discusses the support, and a use case.

Jeff Walden noted that "the interface implemented by the current IE8 beta lags the HTML5 specification by several revisions in backwards-incompatible ways, so if you're going to experiment with this, be aware that what you're doing will break in a future revision of IE8." and detailed the differences.

It appears that only Firefox 3 RC 1 and Webkit Nightly have implemented the current spec.

Ajax: Ajaxian

IE and Windows XP Service Pack 3… still IE 6

Whenever I see a post on the IE Blog that has a title like IE and XP SP 3 I hope to see "oh, and IE 6 users will be upgraded". How much pain would be relieved when IE 6 usage is minimal?

Unfortunately, I was disappointed again:

XPSP3 will continue to ship with IE6 and contains a roll-up of the latest security updates for IE6. If you are still running Internet Explorer 6, then XPSP3 will be offered to you via Windows Update as a high priority update. You can safely install XPSP3 and will have an updated version of IE6 with all your personal preferences, such as home pages and favorites, still intact.

Ajax: Ajaxian

100 Line Ajax Wrapper

Kris Zyp gives us a glimpse at a potential future with his 100 line Ajax wrapper that tries to do the right thing cross browser for the various cross-domain models:

With IE8’s new XDomainRequest feature, a new API is added for cross-site requests, instead of using the W3C cross-site access proposal. Just for fun, I thought I would provide a little glimpse of what the classic Ajax request wrapper function may look like for the next era of web developers. Just a few simple calls to XMLHttpRequest would be way too easy, so instead we get do this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function doRequest(method,url,async,onLoad,onProgress) {
  3.     var xhr;
  4.     if ((onProgress || isXDomainUrl(url)) && window.XDomainRequest) {
  5.         // if it is x-domain or streaming/incremental updates are needed we will use IE's XDomainRequest for IE
  6.         // streaming/interactive mode is broken in IE's XHR, but for some reason works in XDR (with onprogress), so we will
  7.         // need to use XDR if incremental updates are necessary
  8.         // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334813
  9.          if (url.match(/^https:/) && !onProgress) {
  10.             // XDR doesn’t work for secure https communication
  11.             // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333380
  12.             loadUsingScriptTag(url); // script tag insertion can be more secure than XDR
  13.                                 // in some situations because it supports https
  14.             return;
  15.         }
  16.         xhr = new XDomainRequest;
  17.         // relative paths don’t work in XDomainRequest, see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333275
  18.         if (!url.match(/^http:/)) { // test to see if it is an absolute url
  19.             url = absoluteUrl(location.href,url); // must have a function to turn it into an absolute url
  20.         }
  21.         if (!(method == “GET” || method == “POST”)) {
  22.             // XDomainRequest does not support methods besides GET and POST
  23.             // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334809
  24.             // We will try to add the method as a parameter and hope the server will understand… good luck :/
  25.             url += “&method=” + method;
  26.             method = “POST”;
  27.         }
  28.         function xdrLoad() {
  29.            if (xhr.contentType.match(/\/xml/)){
  30.                 // there is no responseXML in XDomainRequest, so we have to create it manually
  31.                 var dom = new ActiveXObject(”Microsoft.XMLDOM”);
  32.                 dom.async = false;
  33.                 dom.loadXML(xhr.responseText,200);
  34.                 onLoad(dom);
  35.            }
  36.            else {
  37.                 onLoad(xhr.responseText,200); // we will assume that the status code is 200, XDomainRequest rejects all other successful status codes
  38.                 // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
  39.            }
  40.         }
  41.         if (async === false) {
  42.             // XDomainRequest does not support synchronous requests
  43.             // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=336031
  44.             // so we will try to block execution on our own (which is not really possible in any reasonable manner)
  45.             var loaded;
  46.             xhr.onload = function() {
  47.                 loaded = true;
  48.                 xdrLoad();
  49.             }
  50.             xhr.open(method,url);
  51.             xhr.send(null);
  52.             while(!loaded) { // try to block until the response is received
  53.                 // I am sure the user won’t mind just clicking OK so we can block execution
  54.                 alert(”Waiting for the response, please click OK because it probably is here now”);
  55.             }
  56.             return;
  57.         }
  58.         else {  // do an asynchronous request with XDomainRequest
  59.             xhr.onload = xdrLoad;
  60.             xhr.open(method,url);
  61.             xhr.onprogress = onProgress;
  62.         }
  63.     }
  64.     // we will mercifully skip all the branches for ActiveXObject(”Microsoft.XMLHTTP”) to accomodate IE6 and lower
  65.     else {
  66.         xhr = new XMLHttpRequest; // use the standard XHR for same origin and browsers that implement cross-site
  67.                         // W3C requests and streaming
  68.         xhr.open(method,url,async);
  69.         xhr.onreadystatechange = function() {
  70.             if (xhr.readyState == 3) // interactive mode
  71.                 onProgress(xhr.responseText);
  72.             if (xhr.readyState == 4) // finished
  73.                 onLoad(xhr.responseText,xhr.status);
  74.         }
  75.     }
  76.     xhr.send(null); // finally send the request whether it be XDR or XHR
  77.  
  78.         // and supporting functions
  79.         function absoluteUrl : function(baseUrl, relativeUrl) {
  80.                 // This takes a base url and a relative url and resolves the target url.
  81.                 // For example:
  82.                 // resolveUrl(”http://www.domain.com/path1/path2″,”../path3″) ->”http://www.domain.com/path1/path3″
  83.                 //
  84.                 if (relativeUrl.match(/\w+:\/\//))
  85.                         return relativeUrl;
  86.                 if (relativeUrl.charAt(0)==’/') {
  87.                         baseUrl = baseUrl.match(/.*\/\/[^\/]+/)
  88.                         return (baseUrl ? baseUrl[0] : ”) + relativeUrl;
  89.                 }
  90.                         //TODO: handle protocol relative urls:  ://www.domain.com
  91.                 baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*$/)[0].length);// clean off the trailing path
  92.                 if (relativeUrl == ‘.’)
  93.                         return baseUrl;
  94.                 while (relativeUrl.substring(0,3) == ‘../’) {
  95.                         baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*\/$/)[0].length);
  96.                         relativeUrl = relativeUrl.substring(3);
  97.                 }
  98.                 return baseUrl + relativeUrl;
  99.         }
  100.         function loadUsingScriptTag(url) {
  101.                 … do JSONP here if we want
  102.         }
  103. }

I think that says.... please just implement the standard IE team! :)

Ajax: Ajaxian

Are you sure your unload handler is firing in IE?

Johan Sörlin found that sometimes his unload event never fired in IE:

We recently found a serious bug in IE where the unload event wouldn’t fire on a specific page we had on a site. After some bug tracking we found out that the unload event never fired since all the contents of the page hadn’t finished loading before we navigated to another page.

This is a major problem since the unload event is commonly used to clear circular references etc in IE to prevent memory leaks. So this bug makes all Ajax libraries/frameworks out there that depend on the unload event on IE to fail if the page is unloaded before the contents of the page finished loading.

Here is an example of the bug, run the page in IE and follow the instructions on the page.

He then produced a work around:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function fixUnload() {
  3.         // Is there things still loading, then fake the unload event
  4.         if (document.readyState == 'interactive') {
  5.                 function stop() {
  6.                         // Prevent memory leak
  7.                         document.detachEvent('onstop', stop);
  8.  
  9.                         // Call unload handler
  10.                         unload();
  11.                 };
  12.  
  13.                 // Fire unload when the currently loading page is stopped
  14.                 document.attachEvent('onstop', stop);