Friday, January 2nd, 2009
Category: Browsers
, IE
At a New Years Eve party, a friend help up a drink and toasted to his company deciding to discontinue direct support of IE 6 in 2009, and letting users know that the site may work better with IE 7 or another latest browser.
Then, Asa Dotzer puts up a chart of the IE 6 numbers:
Still far too high a percentage and enough to make you grown. Also, the last few pounds are the hardest to lose. The good news for me is that on most Web applications that I personally work, and definitely those that I work on in early 2009 will have much different numbers.
Maybe IE 8, Windows 7, and the great new browser war will help, or maybe some percentage is for lost computer souls.
Wednesday, December 17th, 2008
Category: Browsers, IE
We desperately want users to upgrade to the latest and greatest. A prominent and respected Web citizen recently said “With Ajax we are developing to 1997 technology, and are restricted by IE 6.” What if you didn’t have that nagging feeling, and instead could use the platform that sits below the clients of modern browsers? You could do a hell of a lot more.
Well, maybe we get a small bone in the zero day exploit for IE that is doing the rounds right now.
Some are arguing over how easy or hard it is to get safe (run some regedit really OK?) but scary it is. Other folks can’t gloat though, as who know what the hackers will find next. But, for now, we may get a few switchers. Maybe the IT guys who made the call to write ActiveX components back in the day will finally get a kick up the backside and move over? The end users? Hmm, I wonder how many are paying any attention versus clicking on the big “Internet” button and doing their thing.
Thursday, December 11th, 2008
Category: Browsers, IE
The IE8 team let their partners know about a December "Partner Build" that contains the following changes since IE8b2:
Accessibility-ARIA
ARIA attribute names containing dashes, such as “aria-checked”, no longer have to be referenced by their camelCased equivalent (ariaChecked) in IE 7 Mode and Quirks Mode. As a consequence of this change, the camelCased syntax no longer exists for these attributes.
Another article was recently published on new accessibility features in IE8.
AJAX-XDR
XDR now checks Access-Control-Allow-Origin header for specific URLs as well as wildcards.
Developer Tools
The Developer Tools now has a menu option to let the user choose the view source app. In IE7 the only choice was Notepad and in IE8 Beta 2, the built-in viewer was the only choice. Now users can choose Notepad, built-in viewer, or another application.
CSS
Syntactically valid filter declarations are applied in standards mode, even if unquoted Starting with IE8 Beta 1, the following filter declaration was not applied in standards mode:
CSS:
-
-
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70,Style=2);
-
Instead, IE8 standards mode required the following declaration:
CSS:
-
-
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80,FinishOpacity=70, Style=2)”;
-
For web applications supporting both IE7 and earlier as well as IE8 standards mode, this meant maintaining both declarations and possible a third for other browsers in the case of opacity.
Starting with IE8 Partner Build, the first declaration above will be applied in standards mode if and only if its syntax is valid. If it is not e.g. the final parenthesis is missing then the declaration will not be applied and our CSS parser fails per the standard.
CSS style sheet encoding detection complies with CSS 2.1 e.g. including @charset directive, charset attribute on link element etc.
Compatibility View List
Check box added in Tools->Compatibility View Settings to receive updates from Microsoft. At the moment, the functionality of this feature works but our list will not be activated until the next release of IE.
Filter Syntax Property
IE8 will accept the current filter syntax as well as the fully quoted syntax (“–ms” prefix) previously announced for IE8.
Links Bar
A new option allows users to put as many items on the Favorites bar as they want. The size of Links bar items can now be set to long (default), short (5 characters), or simply the favicon.
InPrivate Blocking
New InPrivate Blocking button on the status bar. This can be pressed to turn InPrivate Blocking on and off.
InPrivate Blocking now has a quick on/off entry in the Safety menu (or Ctrl-Shift-B).
The InPrivate Blocking on/off setting is now a session-specific option. InPrivate Blocking will be off by default each time users launch Internet Explorer.
InPrivate Blocking can now be turned on for all browsing sessions, not just InPrivate Browsing sessions.
UI Improvements to the InPrivate Blocking settings dialog.
New feature first-run dialog box.
InPrivate Subscriptions have been removed.
Add-ons are now disabled while in InPrivate Browsing.
Smart Address Bar
Increased number of typed addresses (up to 12 by default, up to 25 if History and Favorites are turned off).
Removed AutoComplete Suggestions.
Turned off Feeds by default. Feeds can be turned on through the AutoComplete Settings dialog in Tools->Internet Options->Content->AutoComplete Settings’.
Monday, December 8th, 2008
Category: Browsers, IE
That is the equation that Jeremy Keith shares with us on his article for this years 24ways. He is discussing IE6, which he sets to the variable of $web_designer_nemesis (variable used to equal NN4).
He looks at the sliding scale of support for the browser:
- Block IE6 users from your site.
- Develop with web standards and don’t spend any development time testing in IE6.
- Use the Dean Edwards IE7 script to bootstrap CSS support in IE6.
- Write an IE6 stylesheet to address layout issues.
- Make your site look exactly the same in IE6 as in any other browser.
And, gives some weight behind what you may or may not want to do. We all keep running into the highs and lows of Web development. As we look to the amazing features that current gen browsers give us we think about apps we could build. Then we come back to reality as we think about getting these apps working on browsers that people use.
A smart man just told me:
The Ajax applications that we rave about now are running on 1997 technology. Take a look at what current browsers can do, and then you will get a glimpse of where we are going.
I want to see as many forces as possible trying their best to get IE 6 users to upgrade (again: to IE.latest is fine!). One way is to develop applications that have amazing functionality that they can't use unless they upgrade.
Monday, October 27th, 2008
Category: IE, Microsoft
Update: Jane Kim from Microsoft posted a message about this issue:
Hey folks, we created the guidelines with this scenario in mind - we definitely want to support applications using the icon to indicate Web Slice content.
We will update the documentation to make this clearer. Thanks!
- Jane Kim [MSFT]
Thanks for clarifying things Jane!
Original post:
Web Slices are a cool new feature coming in Internet Explorer 8, where you can subscribe to portions of a web page and see updates to them in the Favorites toolbar. There is even an open specification for Web Slices (partially based on hAtom) so that others can implement it. Daniel Glazman has been working on a Firefox extension to implement the spec.
Just as RSS has a standard icon where a site can indicate it can be subscribed to:
Web Slices have a similar icon to indicate you can subscribe to a portion of a page when the standard is being used:
Unfortunately, the terms of service for this icon got switched around and Daniel noticed that it looks like other browsers therefore can't use it. From the terms of service for the icon:
DO NOT use the icon:
- As a logo or favicon for a Web site or online content, whether Web Slice enabled or not. The icon represents the Web Slice technology, and not the Web site or content itself
- As an application icon
- As an icon or logo for any product or service, or as a feature or design element of another icon, logo, trademark or service mark
- In any manner that expresses or implies an affiliation with, sponsorship, or endorsement by Microsoft or any third party
I'm sure this was unintentional, as often happens with licenses, since Microsoft has provided a simple standard in good faith. Microsoft should just open source the icon, just like the RSS icon was, so that there can be a standard UI mechanism to indicate to users that a Web Slice is available. As an alternative, if they want to retain control to ensure the icon is used properly, they should update the terms of service so that other browsers to use the icon to indicate a portion of the page can be subscribed to.
Wednesday, October 22nd, 2008
Category: IE, JavaScript
Continuing with SitePen stories for today, Dustin Machi posted a short but interesting piece on how to detect loss of focus on IE6.
So your cool new app is perfect, but you want it to lock the user out when the browser hasn’t had focus after 15 minutes? Well that’s easy you think, I’ll just connect to the document’s blur and focus events and be good to go. You quickly add a little bit of code to your Dojo widget:
JAVASCRIPT:
-
-
dojo.connect(dojo.doc, "onblur", this, "onWindowBlur");
-
dojo.connect(dojo.doc, "onfocus", this, "onWindowFocus");
-
After reluctantly firing up your Virtual Machine to test Internet Explorer 6, much to your dismay, onfocus events are immediately followed by onfocusout events. You feel the harsh reality that IE6 is going to suck away a bit more of your life.
Fortunately, while the solution seems to be difficult to track down on the “interwebs”, it is in fact pretty simple. The key is to understand that IE tracks the activeElement (document.activeElement) and fires onfocus and onfocusout events as the activeElement changes. As the onfocusout events occur, you must track what the activeElement is. When an onfocusout event happens and the activeElement doesn’t change, then the window has lost focus.
Here's the final cross-browser version:
JAVASCRIPT:
-
-
if (dojo.isIE) {
-
dojo.connect(dojo.global, "onfocus", this, "onWindowFocus");
-
dojo.connect(dojo.doc, "onfocusout", this, function() {
-
if (this._activeElement != document.activeElement){
-
this._activeElement = document.activeElement;
-
}else{
-
this.onWindowBlur()
-
}
-
});
-
}else{
-
dojo.connect(dojo.doc, "onblur", this, "onWindowBlur");
-
dojo.connect(dojo.doc, "onfocus", this, "onWindowFocus");
-
}
-
Tuesday, October 21st, 2008
Category: Browsers, IE
CSS:
-
-
div.title { background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); }
-
The CSS expressions of old will no longer work in IE 8. Whenever a feature goes away in IE, Ajax hackers get worried, as many hacks rely on quirks or proprietary features of the browser.
Why did Microsoft choose this course?
-
To comply with standards
- Expressions are proprietary to Internet Explorer and as such not interoperable.
- A common use-case for expressions was to fix IE bugs or to emulate those CSS 2.1 features not yet supported by the browser, for example, min-width and max-width. We have not only worked hard to fix these bugs in IE8 but our new layout engine supports the missing features natively.
- To improve performance
- To reduce the browser attack surface
- Because they expose a script execution context, CSS expressions constitute a possible script injection attack vector.
The feature will still exist in IE 7 and quirks modes, but consider yourself warned and that it is time to use the new CSS 2.1 support and the like to get around the issues that CSS expressions (or Dynamic Properties) came about to solve.
Do you ever use this feature? Run into any issues where the new support doesn't give you everything you need? Now is the time to let Microsoft know.
Friday, October 10th, 2008
Category: Browsers, IE
Anne van Kesteren of Opera Software has updated his post on IE 8 to cover beta 2:
-
XDomainRequest: Microsoft unfortunately continues with XDomainRequest rather than making changes to XMLHttpRequest as other browsers are doing and as is being standardized by the W3C Web Apps Working Group. (Disclaimer: I am the editor of XMLHttpRequest Level 2.)
Some agreement was made to at least support the same protocol on the server, namely using the Access-Control-Allow-Origin header as per Access Control for Cross-Site Requests. (Disclaimer: I am the editor of that draft too.) However, IE8 only supports * as value for that header, not an origin, e.g. http://annevankesteren.nl (test). Sunava pointed out that was because the W3C WebApps WG was still debating the matter. Here is hoping they will fix the bug as there is agreement on that syntax.
-
HTML5 DOM Storage: localStorage and sessionStorage are now supported. Enumerating through them does not give the results I was expecting (I got "length" and "remainingSpace" back as well, besides the keys) and they still have a remainingSpace member that is not part of HTML5. Given that anything that gives some indication of space is highly vendor specific as it depends on encoding, compression, and type of device, they should really rename it to msRemainingSpace or some such or simply drop it.
IE8 also supports an event named storagecommit that is not part of HTML5 which tells you when the data has been written to an XML backend format IE8 uses. The event object for used for the storage does not expose key, oldValue, and newValue. The url member is named uri and the source member is null rather than a reference to the Window object. Ouch!
-
ARIA: Aaron Leventhal recently blogged about how ARIA in IE8 is a pain. (Aaron works for IBM making Firefox and Web applications accessible and is a member of the W3C PF WG which standardizes ARIA.) In short, when IE8 renders in super standards mode ARIA will work as everywhere else, otherwise you have to use Microsoft proprietary syntax. So not only do you need to upgrade your application code to be keyboard accessible and ARIA-enabled, you will also need to upgrade it from quirks to standards mode. Alternatively, you could take the easy way out and lock out other browsers. Not nice.
He did admit that he has "only played around with Internet Explorer 8 for an hour so" :)
Tuesday, October 7th, 2008
Category: Browsers, IE
Sunava Dutta has detailed the enhancements made to IE 8 beta 2 for Ajax developers including XDR, XDM/postMessage, DOM Storage, offline detection, and more. A lot of great stuff!
XDomainRequest (XDR)
This is an object built from the ground up to make client-side cross-domain calls secure and easy. To reduce the chances of inadvertent cross domain access, this object requires an explicit acknowledgement for allowing cross domain calls from the client script and the server. Additionally, it reduces the need for sites having to resort to the dangerous practice of merge scripting from third parties directly into the mashup page. This practice is dangerous because it provides third parties full access to the DOM. All this comes with the added benefit of improved client-side performance and lower server maintenance costs thanks to the absence of a need for server farms for proxying.
During the Beta 1 timeframe there were many security based concerns raised for cross domain access of third party data using cross site XMLHttpRequest and the Access Control framework. Since Beta 1, we had the chance to work with other browsers and attendees at a W3C face-to-face meeting to improve the server-side experience and security of the W3C’s Access Control framework. As a result, we’ve updated XDR to be explicitly compliant with syntax and directives in the sections of Access Control for requesting simple public third-party data anonymously on the client! (Section 5.1.3 in the Access Control Process Model)
The updates to XDR from Beta 1 allow IE8 to request data from the domain's server by sending an Origin header with the serialized value of the origin of the requestor. IE8 Beta 2 will only return the response if the server responds with Access-Control-Allow-Origin: *, instead of allowing the XDomainRequestAllowed: 1 header as we did in Beta 1. Other changes include support for relative paths in the open method, and restricting access to only HTTP and HTTPS destinations.
Cross-document Messaging (XDM)
Cross-document messaging is another powerful cross-domain feature that I’ve blogged about in the past. Rather than make a backend request to a remote Web service, this allows sites hosting third-party IFrame-based "gadgets" or components to communicate directly with the parent, without unsafely violating the same site origin policy. This has advantages including improved performance and reliability, as developers don’t have to resort to workarounds that behave differently between browsers and have unwanted side-effects. This technique also removes the need for embedding third-party script in your page, lessening the chance of potential information disclosure vulnerabilities like the disclosure of your sensitive data (such as information in your social network profile) to third parties without your consent.
Beta 2 updates here include moving the onmessage handler from the document object to the window object to better align with the updated HTML 5.0 draft.
window.attachEvent("onmessage", HandleMessage);
We also replaced e.URI with e.origin, which is serialized form of “scheme” + “host” + “non-default port”. This is far safer as the URI can carry potentially sensitive information from the origin site that is not needed by the recipient for the decision to grant or not grant access.
if (e.origin == 'http://www.contoso.com')
{
// process message text
}
Finally, the HTML 5.0 draft also mandates that the targetOrigin parameter for the postMessage method now be made a required parameter, as opposed to an optional one. This will make it difficult for developers to make errors by requiring an explicit acknowledgement of the target destination of the message by specifying the origin <URL> or wildcard <*>.
frameOther.postMessage("This is a message", "http://example.com");
DOM Storage
Today, web pages use the document.cookie property to store data on the local machine. Cookies are limited in capability by the fact that sites can only store 50 key/value pairs per domain. Furthermore, the cookie programming model is cumbersome and requires parsing the entire cookie string for data. While cookies are useful for marking transitions and changes on the client to the server as they are sent with the request headers in chunks of up to 4KB, IE8 brings better alternatives for scenarios involving persisting data on the client and distinctly maintaining sessions in different tabs. The W3C’s HTML 5 DOM Storage objects provide a much simpler global and session storage model for key/value pair string data. Sites can store data for the life of a tab or until the site or user clears the data.
Updates for Beta 2 include changing the name of the persistent globalStorage attribute to localStorage and the removal of the need to specify the domain when writing to the localStorage
// Store a key-value pair.
localStorage.setItem("FirstName","Sunava");
Finally, we also included improved support of the updated onstorage HTML 5.0 event returned when the storage is changed. We now return the URI when the local storage is changed, so that handlers for pages can know who carried out the latest transaction in the storage space in addition to providing the source to the window of the origin. Furthering the good news, the HTML 5.0 Working Group has incorporated the clear method, which we shipped in Beta 1, into the draft. This essentially allows for script to clear all items accessible in its storage space without having to iterate though the keys.
Connectivity Event
The navigator.onLine property and online/offline events now work on Windows XP as well as Windows Vista. The work to enable this was not trivial, as connection awareness in Windows XP is not quite as advanced as Windows Vista. That said, this will be extremely beneficial for developers, who we believe shouldn’t have to worry about OS differences. The value of connectivity events is particularly appealing when used in conjunction with the localstorage, where data can be cached in case of network loss!
XMLHttpRequest
Introducing the XDomainRequest object in IE8 hasn’t diverted our attentions from constantly tweaking and improving XMLHttpRequest, which will continue to be our flagship object for same-domain communications. Post-Beta 1 energies here have focused on a few bug fixes around reliability and working with the Web Apps Working Group to clarify and improve the draft specification, our compliance with it, and W3C public test cases. A timeout method introduced here in Beta 1 for the convenience of developers is currently being evaluated for adoption in the XMLHttpRequest spec.
// Sets timeout after open to two seconds.
xhr.timeout = 2000;
ToStaticHTML, to JSON, and fromJSON
What do you do with the strings returned from third parties using XDomainRequest or Cross-document Messaging? In today’s world of increasing script injection and Cross-site Scripting (XSS) attacks, having the option of passing these through a safe parser comes as a welcome relief. As detailed in Eric Lawrence's post on Comprehensive Protection for IE8 Security, toStaticHTML provides a powerful way of sanitizing your strings by purging potentially executable content.
//Calling:
window.toStaticHTML("This is some <b>HTML</b> with embedded script following... <script>alert('bang!');</script>!");
//will return:
This is some <b>HTML</b> with embedded script following... !
In addition, IE8 Beta 2’s toJSON and fromJSON methods provide improved performance as opposed to non-native Javascript deserializers and serializers. Our implementation is based on the ECMAScript 3.1 proposal for native JSON-handling which uses Douglas Crockford’s json2.js API. In addition to the performance benefits of going native, the JSON parser provides a safe alternative to the eval() method, which has been a common and dangerous way to revive JSON objects, and could allow arbitrary script functions to execute.
Wednesday, September 24th, 2008
Category: Browsers, IE
Toru Yamaguchi has built a very cool shim, ExDOMStorage, which implements the HTML 5 DOM Storage API for IE 6 and 7.
It does so by strapping in the functionality via an HTC behaviour:
JAVASCRIPT:
-
-
(function() {
-
if (window["localStorage"] && window["sessionStorage"])
-
return;
-
-
with({ nodeSet: document.getElementsByTagName("script"), storages: ["localStorage", "sessionStorage"] }) {
-
var loader = nodeSet.item(nodeSet.length - 1);
-
var src = loader.getAttribute("src");
-
var behavior_uri = src.replace(/\/\w+\.js$/, '/exdomstorage.htc');
-
-
for (var i in storages) with ({ storage: document.createElement('script'), name: storages[i] }) {
-
window[name] = storage;
-
loader.parentNode.appendChild(storage);
-
storage.addBehavior(behavior_uri + "#" + name);
-
}
-
}
-
})();
-
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:
