ciplogic.com
Live with grace. Write superb software.

Yes, you read the title correctly. Bear with me, it's not a marketing ploy.

IE's history is a sour point in the memory of any legitimate web developer. But in all honesty there are quite a few things I would love other browsers to have them as well.

So without further due, let's start with sweet point number 1:

1. Backwards compatibility mode

Major updates, especially for the corporate world, are not always an option. I love the fact that IE allows you to pick from its developer tools the version of IE to target. This can also be controlled via request headers, meta tags, or company policy, and it's reasonably easy to set-up. Comparing with Firefox ESR - which is the only other option (why?) that offers stability over upgrades over years, IE is a breeze.

2. resize() events on elements

Check this HTML:

1
2
3
4
5
<body>
    <div id="editableDiv" style="border : red solid 1px" contenteditable='true'>
        edit this, and check the browser log.
    </div>
</body>

and JavaScript:

1
2
3
document.getElementById("editableDiv").onresize = function() {
    console.log('resized');
}

The beautiful thing is that you don't need to use a timer, and keep checking if the element changed its position. Sweet, sweet, sweet.

3. The behaviour CSS attribute

Let's assume you want to run a piece of JavaScript whenever you have a new HTML element added (or already existing) - including programatically like AJAX updates, or simple DHTML document.createElement appends.

How do you do that?

In IE, you can create a CSS selector that will match the element, and attach behaviour to it. The behaviour is an external file that can contain JavaScript applied to that element:

For example if you want to disable resizing of images in content editable regions you need a CSS selector:

1
2
3
img {
    -ms-behavior : url(/css/noresize.htc);
}

and the noresize.htc:

1
2
3
4
5
6
7
8
9
10
11
<PUBLIC:COMPONENT>
    <PUBLIC:ATTACH EVENT="onresizestart" ONEVENT="resize()"/>
    <SCRIPT LANGUAGE="javascript" type="text/javascript">
        function resize() {
            event.cancelBubble = true;
            event.returnValue = false;
 
            return false;
        }
    </SCRIPT>
</PUBLIC:COMPONENT>

Now even if you add a NEW image, this code will be executed for every instance. How amazing is this?

Awesome.

Sample 3 courtesy of this nice post: http://nickw101.wordpress.com/2011/02/25/disabling-image-resizing-in-ie-contenteditable-elements/

 

Disqus Comments

comments powered by Disqus

Germanium

The one to rule them all. The browsers that is.

SharpKnight

SharpKnight is an Android chess game.

MagicGroup

MagicGroup is an eclipse plugin.