Wednesday, September 3rd, 2008
Category: Browsers
, HTML, IE
There have been some clever tricks to create new custom tags in Internet Explorer, such as the createElement trick. However, I never realized that Internet Explorer itself provides a facility to define new tags in the markup and have them styled, since Internet Explorer 5!
Some details from the MSDN documentation on this feature, titled "Using Custom Tags In Internet Explorer". The trick lies in making sure you namespace things. For example, in the MSDN docs for this feature the example of creating a new JUSTIFY tag is given:
<HTML XMLNS:MY>
<MY:JUSTIFY>
This paragraph demonstrates sample
usage of the custom MY:JUSTIFY tag in a document.
By wrapping the paragraph in start and end
MY:JUSTIFY tags, the contained
text is justified within the specified width. Try
resizing the window to verify that the
content is justified within a 500-pixel width.
And don't forget to right-click anywhere on the
window and "View Source".
</MY:JUSTIFY>
You can even style this with CSS!
<HTML XMLNS:MY>
<STYLE>
@media all {
MY\:JUSTIFY { text-align:justify; width:500 }
}
</STYLE>
The docs then go on to discuss applying an Internet Explorer 'behavior' to this custom element to give it expanded abilities:
Custom tags become much more interesting when applied with a DHTML behavior. Introduction to DHTML Behaviors (or behaviors) are applied to elements on a page, the same way styles are, using cascading style sheets (CSS) attributes. More specifically, the proposed CSS behavior attribute allows a Web author to specify the location of the behavior and apply that behavior to an element on a page.
Using DHTML in Internet Explorer 4.0.0, it is possible to create simple animated effects, such as flying text, by manipulating the position of elements on a page over time. Beginning with Internet Explorer 5, this functionality can be encapsulated in a behavior, applied to a custom <InetSDK:FLY> tag, and wrapped around blocks of text on a page. This can be applied to cause text to fly from various directions.
I'm going to do more testing on this functionality today to see how deep it goes, but if true it makes it easier to create browser shims for Internet Explorer for things like SVG, MathML, etc., including HTML 5 (if we namespace the HTML 5 elements, required to get this to work).
The reason I'm looking for an alternative to the createElement trick is I've found that it doesn't work with nested custom tags, which limits its usefulness. For example, I've found the following to not enter the DOM correctly:
HTML:
-
-
-
<custom_container>
-
<custom_child></custom_child>
-
</custom_container>
-
</body>
-
</html>
-
Tuesday, September 2nd, 2008
Category: IE, JavaScript
The IE 8 beta has a new method, toStaticHTML that sanitizes HTML strings by removing dHTML elements and attributes from an HTML fragment.
The example they give is:
HTML:
-
-
-
function sanitize()
-
{
-
var szInput = myDiv.innerHTML;
-
var szStaticHTML = toStaticHTML(szInput);
-
ResultComment = "\ntoStaticHTML sanitized the HTML fragment as follows:\n"
-
+ "Original Content:\n" + szInput + "\n"
-
+ "Static Content:\n" + szStaticHTML + "\n";
-
myDiv.innerText = ResultComment;
-
}
-
</script>
-
-
-
<body onload="sanitize()">
-
-
<script>function test() { alert("Testing, Testing, 123..."); }
</script>
-
<span onclick="test()">Click Me
</span>
-
</div>
-
</body>
-
Once sanitized this becomes just:
Wednesday, August 27th, 2008
Category: Announcements, Browsers, IE
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:
CSS:
-
-
div.someClass {
-
/* Internet Explorer */
-
width: expression(document.body.clientWidth> 600) ? "600px" : "auto";
-
/* Standards-compliant browsers */
-
max-width: 600px;
-
}
-
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.
Monday, August 18th, 2008
Category: CSS, IE, jQuery
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:
JAVASCRIPT:
-
-
jQuery(Transformie.trackChangesFor).bind('propertychange', function(e) {
-
if(e.originalEvent.propertyName == 'style.webkitTransform') {
-
Transformie.refreshMatrix(this);
-
}
-
});
-
From there you can see the transforms which look like:
JAVASCRIPT:
-
-
// rotate
-
matrices.push($M([
-
[Math.cos(a), -Math.sin(a), 0],
-
[Math.sin(a), Math.cos(a), 0],
-
[0, 0, 1]
-
]));
-
Very nice indeed.
Tuesday, August 12th, 2008
Category: IE
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.
Thursday, July 31st, 2008
Category: Browsers, IE
The first main play for IE 8 was to get developers on board, and start a conversation with us on what they are fixing, and where they are going.
There were a couple of user features such as Activities and Web Slices, but you could tell they hadn't finished there.
In their latest blog post they talk about reliability and the fact that they now have isolation between web pages and the chrome itself via processes. This means that a page could die, but the browser is fine:
One of our most significant investments is in a feature called Loosely-Coupled IE (“LCIE”), which is an architectural attribute that helps isolate different parts of the browser from each other, most notably, the frames from the tabs. LCIE is the foundation that we have built a few of our features on including Automatic Crash Recovery of which I expand on below.
For Beta 2, we added the following changes:
Frame Process Merging
To help improve startup performance, we have reduced the number of processes that we start. Instead of firing up two processes every time you launch the browser (one for the frame and one for your tabs), we now only fire up one frame process the first time you launch IE. Subsequent launches will only start a new tab process or make a new tab in an existing tab process.
For users that are accustomed to browsing websites in multiple “sessions”, for example if you want to log in to multiple email sites simultaneously, you can specify the “-nomerge” command line option to disable this feature.
More tab processes
It turns out that the vast majority of all IE sessions contain three or fewer tabs. Accordingly, in Beta 2 we try to give users three efficient tab processes. This is contingent on the user’s computer capabilities, but the more capable a computer is, the more processes we will use, up to a point. Adding more processes gives users much better isolation in the event of a failure. If each tab is in its own process, websites are completely isolated from each other.
Virtual tabs
We have also added the internal capability to “hot swap” the process from underneath a tab. Previously, Protected Mode worked on a per-process basis. For example, say you add a website to your trusted sites in IE7. If that site links to another site that is not in your trusted sites, it will cause you to switch browser windows when you click the link.
We improved this in IE8 Beta 1 with LCIE when we split the frame from the tabs. With the split we can create a new tab in the same window and switch you to that tab as opposed to being “punted” to a new window.
Virtual tabs lets you navigate across Protected Mode in the same tab since we just switch the process under the tab to the correct integrity level. This is really just “UI-sugar” – virtual tabs do not impact security or protected mode in any way, other than to make it more convenient to transition between protected mode on/off.
LCIE's capability of isolating different parts of the browser coupled with more tab processes and virtual tabs will improve the performance and overall reliability of Internet Explorer.
I saw an early IE 8 beta 2, and there are other very interesting features in there too. Some were subtle but interesting. We should get our hands on it soon!
Tuesday, July 22nd, 2008
Category: IE
If there's a single experience that bonds all Web developers, it is the incomprehensible joy of wasting hours of our lives supporting IE6. The quasi-palindromic Dionysios Synodinos (alright, it's pretty far from reversible, but there's got to be a good anagram in there) over at InfoQ has put together a fun piece discussing wither IE6. From the article:
Since attaining a peak of about 95% usage share during 2002 and 2003, Internet Explorer 6 (IE6) has been rapidly losing market share. As the end of 2008 approaches, significant online services, vendors and web frameworks are dropping support for IE6. Will this year be the end of IE6 and what does this signify for Web 2.0 developers?
Dionysios draws examples and quotes from Apple, SproutCore, 37signals, Douglas Crockford, Dylan Schiemann, John Resig, and more as he searches for an answer. There's no conclusion to the piece, but plenty of perspective. Some excerpts:
Dylan Schiemann of Dojo: I think we're stuck with IE 6 for at least another year.
Douglas Crockford: If you are operating a mainstream site that appeals broadly to all users, then regrettably you must continue to support IE 6 until its share drops to insignificance.
Jeffrey Zeldman: If your company can afford to quit supporting IE6, now is as good a time as any to do so. Whether or not you can do so depends on your audience and business model.
If nothing else, raising the hope of dropping IE6 support before I send my kids to college makes it a welcome article indeed.
Thursday, July 17th, 2008
Category: CSS, IE
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.
Wednesday, July 16th, 2008
Category: HTML, IE, Standards
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 :)
Wednesday, July 9th, 2008
Category: Browsers, IE
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.
Thursday, July 3rd, 2008
Category: IE, 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.
Wednesday, June 11th, 2008
Category: IE
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.
Monday, June 9th, 2008
Category: IE, Microsoft, Testing, Tutorial
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:
JAVASCRIPT:
-
-
function createButton() {
-
var obj = document.createElement("button");
-
obj.innerHTML = "click me";
-
obj.onclick = function() {
-
//handle onclick
-
}
-
obj.onmouseover = function() {
-
//handle onmouseover
-
}
-
return obj;//return a object which has memory leak problem in IE6
-
}
-
var dButton = document.getElementsById("d1").appendChild(createButton());
-
//skipped....
-
You can use the following which doesn't:
JAVASCRIPT:
-
-
function createButton() {
-
var obj = document.createElement("button");
-
obj.innerHTML = "click me";
-
obj.onclick = function() {
-
//handle onclick
-
}
-
obj.onmouseover = function() {
-
//handle onmouseover
