tuesdayDeveloper;

So you may have read 20 Things I learned About Browsers and the Web and noticed the push from Google to bring users using outdated browsers and other old technology into the 21st century. This online “book” which describes the Internet, web application, browsers and the like in a very simple and easy to understand maner is using some of the advanced technologies it explains. There are noticeable javascript and HTML5 animations that make us feel that we are really reading a book. I absolutely agree that users should upgrade to the latest versions of their browsers and that IE6 should die, but I do have a question: Is anyone who is using an outdated browser (and therefor not technologically up-to-date) going to even read the book?

First of all, there’s the obvious: the people this marketing campaign is targeting don’t care. If they did, they would be using an up-to-date browser already.

Second, if they do care and they were just ignorant of the facts, are they going to read it? It’s pretty long. They don’t really get to the important stuff (their message) until your almost a quarter the way through the book or so.

If they do read it there’s the third question (since I’m using the latest version of my favorite browser I don’t know) how does this even look on an outdated browser? I’m assuming that Google took the precautions to make it viewable, but will the pages flip in IE6 like the do in Chrome? I’m guessing not, but maybe that is Google’s point in this stunt. Perhaps when a user tries out a new browser and sees the difference they compair the two experiences and decide never to go back.

Please don’t misunderstand. I want all web users to follow the counsel found in The 20 Things Book, I just don’t know if anyone will read it. As a developer I do want to try to educate the users of my products to ensure they are following basic safe practices, perhaps Google is hoping that developers will advice their web users to read the book. I guess we’ll see.

So what do you think? Is there something I overlooked? It this move brilliant, or is it done in an attempt to persuade people to make smartter choices and done hoping it will get read?

Post Ratings: (No Ratings Yet)

Dealing with browsers is like dealing with children (Disclaimer, I am not giving parental advice). Most parents I know with more than one child try to treat each of their children fairly, but that doesn’t always mean that each child is treated the same. For a teenager who is always bending the rules, they may set a curfew of ten o’clock; but for the children that are obedient, who usually try to follow the rules, parents may let them stay out until midnight.

Internet Explorer is like a bad child. The rules you set for this browser by necessity must be different than the others. And for good reason, IE doesn’t play nicely with others, it continually disobeys rules, and when it does follow rules, it follows them the way it wants to (not the way you told it to). Following is a list of rules that I’ve found helpful when dealing with IE. The rules will be mostly javascript, but there will be some CSS fixes. As I find other helpful tips I’ll add them to this post. If you know of a rule that is helpful in dealing with IE, please share (I’ll update my post to include your suggestions).

Please know, that while these tips usually work in IE, they sometimes don’t, hey children are unpredictable. On this post, these have been tested in IE 8.

Event handling
The event in IE is global. This means that you must call events differently than in other browsers. In many ways this is a nice thing, you can call an event without passing it as a parameter into a function. You could set a global variable in your javascript so that other browsers would function the same way, but I like to limit the global variables I use so I do the following in my functions.

1
2
3
4

function someFunction(event){
     event = event || window.event;
     //...
}

This snippet of code looks to see if the event was null when passed in, if the variable is empty the code will assume that the browser is IE and set event to the window.event global variable. You can now go on using the event variable without having to worry to change the way your function works in different browsers.

Mouse X and Y Coordinates
Microsoft Internet Explorer doesn’t support clientX and clientY, in stead, pageX and pageY are used. Use the following to get the correct X or Y coordinates for either IE or another browser.

1
2
3
4
5

function someFunction(event){
     event = event || window.event;
     var x = (event.pageX) ? event.pageX : event.clientX;
     var y = (event.pageY) ? event.pageY : event.clientY;
}

If ternary are confusing to you, use:

1
2
3
4
5
6
7
8
9
10
11
12

function someFunction(event){
     event = event || window.event;
     var x;
     var y;
     if (event.pageX) {
          x = event.pageX;
          y = event.pageY
     } else {
          x = event.clientX;
          y = event.clientY;
     }
}

If you are not looking for coordinates of a mouse event, but rather for an object, this is the script that I’ve found most helpful:

1
2
3
4
5
6
7
8
9
10

function findPos(el) {
	var y = 0;
	var x = 0;
	while(el != null) {
		y += el.offsetTop;
		x += el.offsetLeft;
		el = el.offsetParent;
	}
	return [x, y];
}

This function returns an array, so when you call it (var position = findPos(el);) you will need to get the x value as position[0] and the y value as position[1].

Fixed Positioning
It’s really quite painful that IE doesn’t support the fixed position. Sometimes it does fine, but other times you div is all messed up. This following script will help fix fixed. All of the examples so far have used normal javaScript, in truth I prefer to do things with jQuery, but only when its more efficient (usually it is). This following script is just easier if you do it with jQuery (be sure to include the jQuery library:

1
2
3

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

If you prefer to not use the jQuery library, this reference seems to work.

Source Element
When you click an element, the DOM can tell you which element you clicked, but, of course, you have to work around to get it to work in IE.

1
2
3
4

     //..
     event = event || window.event;
     var sourceElement = event.target || event.srcElement;
     //..

Post Ratings: (No Ratings Yet)

I love America. I was born and raised here and I do have national pride, but one area of frustration that I’ve had as long as I can remember is that America doesn’t conform to standards. I spent 2 years in Germany and when I would talk to my family at home about the weather the inevitable question would be, “how hot is that in Fahrenheit?” When I would describe the places I was working in the question was, “how far is that in miles?”

You may be of a different opinion, but I don’t understand why America hasn’t conformed to metric standards. In fact, I’ve decided that this is one way that Internet Explorer is just like America, the both feel that they are the standard—their not—let me tell you, there’s a reason why us geeks make and maintain consistoriums!

Now, I’m all for pushing the envelop and developing new standards. You see Apple setting the bar for mobile phones, but you, Microsoft, you continue to disappoint. I admit that have a glimmer of hope for IE9, but I’ve been disappointed before. You told us that standards would be supported in IE7, they weren’t. We were told that IE8 would support standards, not really. In the tests that I’ve done with IE9 I’ve only noticed a few smaller problems (and that was when using jQuery or with CSS3) so you’re starting off on a better foot.

So, while I think that America is great, I sure do get frustrated with them. And while I get frustrated with you, IE, I can’t really say you’re great. But since I’m a pragmatist, and I’ve been known to to change my views before, I’m willing to work with you again, but you must understand that this will be a tenuous relationship. I don’t know if I can live with you if your next iteration turns out to be as bad as the rest of your lot.

What are your thoughts? What do you want to see in IE9? What has disappointed you in the past with IE?

Post Ratings: (No Ratings Yet)

Disclaimer: I wrote this post after I looked at the results (see below) of a project I’m working on. IE did not preform well.

I make no secret to my dislike of Microsoft’s Internet Explorer. It is, in a word, primitive. IE has made some great strides recently, but it’s still lagging behind the rest of the market. If I were rank my favorite browsers the order would be thus: First place: Google Chrome. Tied for Second Place: Apple Safari, Mozilla Firefox, and Opera. After that, there’s no one worth mentioning. Of course, if you look at the market the order would be Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple Safari (pretty much tied for now), and then Opera.

So why my acidic review of IE? There’s a few reasons. First and formost is because when developing web sites all of the different browsers look alike (or at least mostly alike) until you get to IE. IE is a pain to develop for while keeping all of the other pages pristine. If you’re using IE, then you probably see a great big gaping error on this page which I haven’t gotten around to fix yet… someday. Anyway, compare a recent screenshot of IE compared to the exact same code as rendered in Chrome.

Now I will admit that I used a lot of CSS3 code which isn’t officially supported by a few browsers, but you can see that IE will be causing me a lot of work that I won’t have to do with the other browsers. I estimate that it will probably take be about five times as long to work out the solution for IE than it took for me to write the code for Chrome. I’m convinced that Internet Explorer (or at least its programmers) enjoy inflicting pain on developers.

Of course, I have other reasons why I don’t particularly like IE. It’s slow. It takes up my precious screen real estate. It’s not very customizable (meaning it forces me to work the way it wants me to rather than the way I want to work). Oh, and there’s the fact that a lot of websites only work for IE and since I’ve been a Linux/Mac guy for a while now, it’s rather frustrating when I can’t view a page.

I would call it poor practice to only support IE, but well, let’s face it, almost everyone in the industry uses Windows and uses IE and even if they do use another operating system they probably have Windows too. So I completely understand why companies develop exclusively for IE.

Will I stop developing for IE? I’ve thought about it, but there’s that whole 60% of the market thing. Will I ever succumb and make IE my default browser? Never!

What are your thoughts on different browsers? Why do you prefer your browser of choice or dislike another? Have you noticed the same issues I’ve had?

Post Ratings: (No Ratings Yet)