Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 03 2011

16:53

“But The Client Wants IE 6 Support!”





 



 


Frequently, when I discuss CSS3 with other developers, the issue of stubborn clients comes up. They tell me that even though they personally don’t think a website should look the same in all browsers and they’re eager to try all of these new techniques, their clients insist that their website should look the same, so the developers are stuck with the same Web development techniques that we used five to ten years ago. Their clients just don’t “get” graceful degradation.

Is this really the issue? Are our clients incapable of understanding these things? Is the problem that our clients don’t “get” the Web and need to be educated? I don’t think so. We got ourselves into this. We are the ones who caused this problem for our industry. We are the ones giving ourselves this trouble and making our profession less creative and enjoyable than it could be. It’s entirely our fault and no one else’s.

Wait, What?

If we choose to make a website pixel-perfect in Internet Explorer 6 to 8, then we are doing up to 100% more work. No matter how many frameworks, polyfills and other scripts we use to ease our pain, we will always be doing at least 30% more work for those browsers. How many of us actually charge 30-100% extra for this work? I haven’t heard of many who do. Clients get this kind of extra work for free, so of course they will say that they want IE 6 support. If I was a client, maybe I’d say so, too, especially if I didn’t know how these technologies work. They won’t care about our extra time if we don’t care enough ourselves to charge for it accordingly.

Of course, faster download times and better SEO are compelling arguments, but let’s face it: one of the biggest advantages of the new CSS features and new JavaScript APIs is the huge chunk of development time they save us, including making maintenance easier and quicker. As long as that doesn’t translate to reduced costs, clients will not care. And that’s perfectly understandable and natural.

Money always wins.
Money always wins the argument. (Image: HikingArtist)

I don’t do much client work these days, but every time I’ve taken on a client project in my career, I’ve always presented options for browser support to my client. They want pixel perfection in IE 7? It will cost them more. They want IE 6 support? It will cost double. I explain to them that this is because I will have to do double as much work for this browser. I’ve never had a single client opt to pay more to fully support older browsers. If it doesn’t come free, you’d be surprised at how many don’t care about it as much as you think. But even if they do, at least I will have enough motivation to do it without hating them, my job, browser makers and the universe. It’s fairer for everyone, including me.

“They’ll Just Go To Another Professional Who Doesn’t Charge Extra”

Whatever you do, don’t let the client think that you are charging extra for doing the same work as another professional. Not only will that look bad, but it’s also inaccurate. Explain to them that you just want to give them options and not decide on your own which browsers to support and charge for accordingly, without ever involving them in the process and letting them have a say about it.

How Much More?

You might have noticed that I implied above that supporting old Internet Explorers requires 30 to 100% more time. That’s a huge range, isn’t it? Actually, it should be even wider. I remember a case of a client coming to me with a CSS challenge that his developers weren’t able to solve. Making something that worked in modern browsers took me half an hour, then an hour to make it work in IE 8, and then three(!) more hours to get it to work in IE 7. Who knows how much longer it would’ve taken if I had to support IE 6, too! And that wasn’t the only occasion when it took me very little time to build a prototype that works in modern browsers and then a grossly disproportionate amount of extra time to make it work the same way in old Internet Explorers. If you’ve been in the field for more than a year, I’m sure this has happened to you, too.

On the other hand, if you don’t use any modern technology and you stick to CSS 2.1, then I guess you would only have to face the old IE bugs, which would take some extra time but not double. Or, if you used a ton of frameworks and polyfills, you would still have to spend some time making them work together and debugging potential conflicts, but still not double the time. 30% was an estimate for cases like those.

As you can see, the range is huge and depends on a number of different factors, including but not limited to the following:

  • You
    How modern are your development techniques? The more cutting-edge they are, then the more effort you will need to put into making good fallbacks or coming up with alternative techniques for old Internet Explorers (but less effort to make the original prototype)
  • The project
    If it’s a brochure website, the main thing that will need extra effort in order to work in old IEs is the styling. If it’s a Web application, it gets way trickier (and more time-consuming).
  • Level of support
    Supporting a browser is not black and white, either no support or full support. How good your fallbacks need to be will greatly determine how much extra time you have to spend on them.

So, I’m sorry but I can’t tell you how much extra you will need to charge to support old Internet Explorers. You’ll have to decide yourself, case by case, taking all relevant factors into consideration.

“But What If They Just Want To Pay For Firefox?”

Of course, there is a baseline of browser support that I won’t go below, even if the client doesn’t want to pay for it. We have a responsibility to ourselves and to the Web to follow the principle of universality. Even if a client wants to pay only for Firefox support, for example, my responsibility is to ensure that the website is still functional in the other browsers. Even if they are not willing to pay for mobile support, my responsibility as a Web developer is to at least add some media queries and make it decent there. Even if they don’t care about accessibility, my responsibility is to make the website somewhat accessible. These things don’t take up much time anyway, and they should be factored into even your lowest price.

So, What To Do With Old IEs?

So, what do I do for those wise clients who don’t want to pay for support of old Internet Explorers? Usually, I try to keep graceful degradation in mind and provide decent fallbacks for old browsers, so that at least the content is accessible in them. But in cases of really naughty browsers, like IE 6 and 7, sometimes even graceful degradation doesn’t work very well. Then, what I usually do is split my CSS into three files:

  • base.css
    Fonts, basic colors, etc.
  • screen.css
    Everything specific to the screen. Most of the CSS goes here.
  • print.css
    Print-specific styles, such as for hiding contact forms, etc.

Then, I just don’t serve screen.css to IE 7 and below. They get something like a print style sheet, without the hidden elements. It’s not very pretty, and it’s not modern, but at least they get the content. The same could be done with JavaScript. Check whether an API is present before using it, or simply don’t serve those script files to old Internet Explorers. If you’ve coded your JavaScript properly and it’s unobtrusive and all, then old browsers won’t get that extra functionality, but they won’t get JavaScript errors and broken functionality either. All of those require minimal effort on your part.

“Does That Mean I Always Have To Charge Less For Using Modern Stuff?”

While discussing my point of view with another developer, he asked me, “So, you’re saying that I shouldn’t charge more if I use responsive design and add a bunch of media queries?” Absolutely not! I’m not saying we should feel sorry for being cutting-edge or punish ourselves for that with less income! What I’m barely advocating is the common-sense idea of charging more for more hours of work. If you code some JavaScript that does the same thing that media queries do, then of course you should charge more for the JavaScript, because it will take you more time. But if you weren’t going to do anything like that, and the media queries were icing on the cake, then of course you should charge them more than you would for a non-responsive version of the website.

Conclusion

We may love what we do, but we certainly don’t love catering to the whims of old browsers. We do a lot of extra work to hide their incompetence, and that work needs to be compensated for properly. You don’t have to work for free, especially on something you don’t like doing. Explain the situation to your clients and they’ll understand how it goes, I promise. After all, “extra work = higher costs” is an established rule in every industry. The concept is not hard to grasp, and it makes the benefit of modern Web technologies much more tangible for technologically unsavvy clients.

What do you think?

How do you account for browser support in the pricing of your work? Do you charge extra for legacy browsers or do you provide a basic version of the design to legacy browsers? Let us know and leave a comment!

(al)


© Lea Verou for Smashing Magazine, 2011.

March 14 2011

16:52

The Things Internet Explorer Got Right


It’s the browser that everyone loves to hate—sometimes justifiably so. What was once the most innovative browser became the thorn in every front-end developer’s side. Amidst the turmoil and complaints today’s developers throw at Internet Explorer, what’s often not heard is how Microsoft changed the face of not only front-end development, but web development as a whole.

IE’s fall is not an uncommon story; in fact, it’s somewhat the same story as Netscape. The company behind the leading browser grows complacent, the browser stagnates, and a new champion arises. It’s a repetitive cycle, one that Mozilla faces again to some extent (but that’s another story for another time).


IE4’s Influence on the DOM

Prior to the version 4 browsers, JavaScript was primarily used for simple data processing (form validation). As such, web pages were primarily static. While a page could be dynamically generated by server-side applications, the page could not interact with the user. This limitation existed because of the browser’s inadequate Document Object Model (DOM), which is the application programming interface (API) JavaScript developers use to access and manipulate individual elements in the page. The DOM that existed prior to the version 4 browsers is frequently referred to as DOM Level 0. DOM Level 0 implementations allow developers access to <form/>, <a/>, and <img/> elements, but that’s about it.

“Microsoft is getting Internet Explorer back on track.”

Netscape Navigator 4

It wasn’t until Netscape released Navigator 4 (NS4) in mid-1997 that a browser’s DOM allowed web developers to alter a page with JavaScript. The technique of manipulating elements with JavaScript and the DOM was dubbed Dynamic HTML (DHTML). NS4’s DHTML was certainly a step forward, but its proprietary and ill-designed layer-based DOM and limited Cascading Style Sheet (CSS) support restricted developers in what they could actually accomplish.

Accessing Elements

Netscape did not implement a full object model. Aside from DOM Level 0 functionality, the only elements a developer could access were absolutely positioned elements, <layer/> elements, and <ilayer/> elements (the latter two elements were de facto positioned). Each of these types of elements were represented by a Layer object in NS4’s DOM. Netscape designed Layer objects to be very similar to frame (and thus window) objects. Each Layer object had a document property, which basically was another HTML document. Like frames, a Layer object could be nested in another Layer object, making code to access those layers extremely verbose like the following:

var myLayer1 = document.layers["myLayerId"].document.layers["mySecondLayerId"];
// or
var myLayer2 = document.myLayerId.document.mySecondLayerId;

These two lines of code do the same thing: they access the Layer object with an id of mySecondLayerId that is nested within a layer with an id of myLayerId. Yes, developers had to walk down the layer "tree" in order to access nested layers.

Dynamic Content

NS4’s DOM did not allow for the creation, insertion, relocation, and removal of DOM objects, but because each layer exposed a document object, a developer could dynamically change a layer’s content by using the write(), load(), and close() methods. While this gives some extra power to the layer model, it restricted developers in how they could dynamically update a page. New content would have to be written or loaded into a layer, effectively removing the layer’s existing content. Needless to say, most developers avoided content manipulation and instead focused on changing a layer’s style.

Changing Style

Web development using NS4’s DOM was painful and frustrating.

But style in NS4’s DOM was a funny thing. While the browser supported CSS to some degree, Layer objects did not provide an API for developers to directly access a layer’s style attribute like today’s style object. Instead, Layer objects exposed a very limited set of properties that altered a layer’s position, visibility, clipping, and background color/image—nothing else, and the value these properties accepted were also quite limited. For example, the positioning and clipping properties only accepted numeric values; a developer could not specify a unit (such as px, em, pt, etc). An example of such code follows:

var myLayer = document.myLayerId.document.mySubLayerId;
myLayer.top = 10;

Needless to say, web development using NS4’s DOM was painful and frustrating. NS4’s extremely limited DHTML capabilities stem from the limitations of NS4’s rendering engine (it could not reflow the page). But why spend so much time on Netscape’s DOM, especially in an article that’s supposed to be about IE? Had Netscape won the browser war, today’s DOM would be an evolutionary step from the DOM presented by Netscape in NS4. While today’s DOM is a standard put forth by the W3C (and some Netscape ideas are implemented in today’s standard), today’s DOM is heavily influenced by IE4’s DOM.

IE4’s DOM

Just a few months after Netscape released Navigator 4, Microsoft released the fourth version of IE. It, too, included support for DHTML, but Microsoft’s implementation was far different and superior to NS4. IE4 boasted much better CSS support and a more complete object model to access and manipulate elements and content in the page. The effect of IE4’s DOM was far reaching; in fact, a developer can find many similarities between IE4’s DOM and the standard DOM.

Accessing Elements

“Microsoft changed the face of not only front-end development, but web development as a whole…”

IE4’s designers wanted to turn the browser into a platform for Web applications. So they approached IE4’s API like an operating system’s—providing a near complete object model that represented each element (and an element’s attributes) as an object that could be accessed with a scripting language (IE4 supported both JavaScript and VBScript).

In IE4’s DOM, the primary means of accessing a particular element in the page was the proprietary all[] collection, which contained every element in the document. Developers could access elements with a numerical index or by specifying an element’s id or name, like this:

var myElement1 = document.all["myElementId"];
// or
var myElement2 = document.all.myElementId;

Using this code, developers could access the element object with an id of myElementId regardless of where it existed within the page. This is in stark contrast to Netscape’s layer model in which developers could only access layers through the layer’s hierarchy. The functionality of document.all["elementId"] evolved into the standard document.getElementById() method. But this wasn’t the only way a developer could access elements; one could walk the DOM tree and touch each element with the children[] collection and parentElement property—forerunners to the standard childNodes[] and parentNode properties.

In addition to loading elements as objects, IE4’s DOM represented an element’s attributes as properties of the element object. For example, the id, name, and style properties mapped directly to an element’s id, name, and style attributes, respectively. This design became standard.

Dynamic Content

Microsoft invented the innerHTML property.

Like Netscape, Microsoft did not provide a full-fledged API to dynamically add, move, and remove nodes with JavaScript. They did, however, invent the innerHTML property to get or set an element’s content. Unlike Netscape’s Layer object’s write() and load() methods, the innerHTML property was not an all-or-nothing solution to modifying an element’s content; a developer could use innerHTML to completely wipe out, replace, or add to an element’s content. For example, the following code gets an element’s content and modifies it:

var el = document.all.myElementId,
    html = el.innerHTML;

el.innerHTML = html + "Hello, innerHTML";

To this day, the innerHTML property is a cornerstone of DHTML. It is an efficient means to adding large amounts of content to an element. Even though it has never formally been included in any DOM standard, every major browser implements an innerHTML property.

Modifying Style

Microsoft invented several tools and designs that evolved into pieces of the standard DOM, but the work they did with IE4’s style API became standard with very little modification. The key to changing an element’s style in IE4 was the style property, the same property (and syntax) used by developers today.

DHTML changed web development forever. It was, however, IE4’s DOM that pushed the technology (and web development) forward by being the primary influence on the W3C’s DOM Level 1 and 2 specification. IE4 revolutionized web development in 1997, and IE would do so again a few years later.


IE Revolutionizes Ajax

Ajax blew the doors open for web development.

Before Ajax was Ajax, it was called remote scripting, and developers leveraging the power of remote scripting used hidden frames and iframes for client-server communication. A hidden (i)frame usually contained a form that was dynamically filled out and submitted through JavaScript. The server’s response would be another HTML document containing JavaScript that notified the main page that data was received and ready to use. It was crude, but it worked.

There was an alternative, however: a little known gem buried in Microsoft’s MSXML 2.0 library. IE5, released in March 1999, included MSXML 2.0, and developers found a component called XMLHttp (the actual interface name was IXMLHTTPRequest). Its name is misleading, as the XMLHttp object functions more like a simple HTTP client than anything else. Not only could developers send requests with the object, but they could monitor the requests’s status and retrieve the server’s response.

Naturally, XMLHttp began to replace the hidden (i)frame technique for client-server communication. A couple of years later, Mozilla created their own object, modeled after Microsoft’s XMLHttp, and called it XMLHttpRequest. Apple followed suit with their XMLHttpRequest object in 2004, and Opera implemented the object in 2005.

Despite its growing interest, the popularity of XMLHttp/XMLHttpRequest (collectively known as XHR here on out) didn’t explode until 2005 when Jesse James Garrett published his article, “Ajax: a New Approach to Web Applications.”

Ajax blew the doors open for web development, and at the forefront was JavaScript, XHR, and DHTML—two of which were Microsoft’s inventions. So what happened? What caused a browser that literally changed how web developers write web applications to become the bane of the modern Web?


Internet Explorer’s Fall

By 2003, Internet Explorer’s total market share was around 95%; Microsoft officially won the browser war. With no real competition in the Web space, Microsoft shifted their focus from the browser to .NET. This is confirmed by quotes from many Microsoft employees, but the most telling is from a CNET article entitled “Will Ajax help Google clean up?” In it, Charles Fitzgerald, Microsoft’s general manager for platform technologies, was quoted as saying:

“It’s a little depressing that developers are just now wrapping their heads around these things we shipped in the late 20th century [ed: DHTML and Ajax], but XAML is in a whole other class. This other stuff is very kludgy, very hard to debug. We’ve seen some pretty impressive hacks, but if you look at what XAML starts to solve, it’s a major, major step up.”

So in May 2003, Microsoft announced that IE would no longer be released separately from Windows (the excellent IE5 for Mac was also canned). The browser would still be developed as part of the evolving Windows operating system, but Microsoft would not release any stand-alone versions of IE. They were betting primarily on ClickOnce, a technology that allows developers to write conventional applications (using .NET of course) and distribute them via the Web.

But the Web continued to evolve in the path Microsoft originally set with IE4 and IE5, and Microsoft started to lose market share to Netscape’s heir: Firefox. Developers were writing web applications that lived in the browser, not in conventional applications via ClickOnce. That forced Microsoft to pick up IE, dust it off, and begin releasing stand-alone versions again.


Microsoft Continues to Innovate

IE9, includes much better standards support across the board.

The next two versions, 7 and 8, were largely evolutionary. IE7 contained a variety of bug fixes, the XMLHttpRequest identifier (although it still created an XMLHttp object from the MSXML library), and improvements to the UI and security.

IE8 was largely more of the same, except it sandboxed each tab—a feature that Google also implemented in Chrome (Microsoft announced it first). It isolates each tab in its own process, increasing security and stability. Sandboxing is becoming standard in today’s browsers (Firefox still lacks the capability), and it’s also moving into the realm of add-ons and plug-ins.

Microsoft is getting Internet Explorer back on track.

The latest version, IE9, includes much better standards support across the board, but it also innovates with its new JIT-compiling JavaScript engine (which uses a separate CPU core if available and can access the GPU) and its hardware-accelerated rendering engine. While JIT-compiling JavaScript engines are not new, IE9’s ability to offload compilation onto a separate core in parallel to the page rendering is an accomplishment that will spur on much needed performance for web applications. Its hardware-acceleration abilities proved useful when debuted, and now Firefox and Chrome offer hardware-acceleration to some extent.

There is no denying that Internet Explorer has caused headaches for web developers. The five year lull between IE6 and IE7 caused Microsoft to fall way behind the competition, making front-end development less than ideal. But Microsoft is getting Internet Explorer back on track. They shaped web development to what it is today; here’s hoping they do so again.

The next version of Internet Explorer, version 9, is scheduled to be officially released March 14th, 2011.

Sponsored post
feedback2020-admin
04:05

October 04 2010

18:22

Internet Explorer 9 Beta: Reviewed and Benchmarked


Microsoft is making some bold claims with the release of Internet Explorer 9 Beta. They explain that other browsers, unlike IE9 Beta, only use 10% of your PC’s capabilities; they show how websites will be streamlined and work faster by taking advantage of your graphics processing unit (GPU), and how a range of new features will provide a richer experience when combined with Windows 7.

Today, we will be looking at what new features IE9 Beta has to offer, and how it performs when bench-marked against Firefox, Chrome, Safari, and Opera.


Download and Installation

System Requirements

In order to run in Internet Explorer 9, you need to have one of the three following operating systems:

  • Windows Server 2008
  • Windows Visa
  • Windows 7

As you would expect, there are 32-bit and 64-bit versions, both of which require at least 512MB of RAM to run.
Depending on your operating system, you need between 70MB and 200MB of hard drive space. To be honest, as long as you’re running one of the three operating systems listed above, I don’t think are going to have any problems.


Download

IE9 Test Drive Website

Microsoft have set up two dedicated websites for the deployment of Internet Explorer 9.

IE9 can be downloaded from either of these websites; both sites are best viewed through IE9 to show off its highlights, new features, and performance enhancements. The Test Drive website provides dozens of application demos, each of which are tailored to show off IE9′s capabilities. We will be taking a look at the demos and benchmarking tools later in the article.

Before You Install

If you have Internet Explorer 8 installed, please be warned: if you install the 64-bit version of IE9, your 64-bit version of IE8 will be uninstalled. I haven’t tested if this is true for the 32-bit version but I wouldn’t see why it would be any different.

As far as I could see, IE9 retained all of my bookmarks, favorites, and so on, but you may want to backup your data just in case.

Installation

The installation should run smoothly. I am using a Windows 7 system with fairly up-to-date hardware. I can’t vouch for other operating systems, but during the install a Windows update occurred and it needed a full reboot. I have since confirmed this with several other Windows 7 users, all of which experienced the same install steps.

I can imagine a Windows update will be provided prior to the full release of IE9, hopefully that will render the reboot unnecessary in the future.


Top New Features

Hardware Accelerated Graphics and Text

IE9 HTML5 Speed Read Demo

It appears that right from the start, the developers of IE9 had speed as a primary objective. Hardware accelerated graphics allow websites to run smoother and faster in your browser. Elements such as graphics, text and video are now rendered by your GPU instead of the CPU. We will see the effects of this during the benchmark tests later.


Refined, Cleaner User Interface

Microsoft has really toned down the browser’s interface. When compared to Firefox or IE8, you can see just how much fat has been trimmed from the overall application. The address bar no longer extends across the top, the independent search bar has disappeared, and most noticeable of all is the missing status bar from the bottom of the screen.

Subtly, the navigational buttons now change colour to match a websites theme or favicon: a nice surprise when you first notice.


Pinned Sites, Jump Lists and Other Windows 7 Integrations

Anyone using Windows 7 will know how much more useful the Windows task bar is compared to the previous versions. Thankfully, IE9 now works with the task bar to add extra usability to your favourite websites.

Jump Lists

By grabbing a tabbed web page, you can tear it from the browser and pin it to your task bar. Not only can you open those sites like any other application, but now you can also interact with your pinned websites by right clicking and accessing what’s called a “Jump List”. For example, twitter.com’s jump list offers the following tasks: new tweet, direct messages, mentions, favorites, and search, right from your Windows 7 task bar. This is a huge time saver!

Windows 7 Task bar Controls

The Thumbnail Preview Controls allow you to navigate a menu or pause a video from your task bar. If you have ever used Windows media player from your task bar then you can imagine what this is like. I’m sure websites like YouTube and Facebook will be implementing this very soon.


New Tab Page

Popular Sites Grid View

It’s not unusual to see a page where your bookmarked or favorite websites are displayed for easy navigation. Safari offers a great example of this, but IE9 has taken it one step further. Whenever you open a new tab, you are shown your most popular webpages with their favicons and page titles next to each other. The added benefit here is the activity meter, which displays your browsing habits alongside your popular web pages. If you are a fan of this feature in other browsers then this is a welcomed addition to IE9.


One Box

As I mentioned above, the address bar is now compacted and the search bar is missing altogether. Microsoft has ingeniously combined the address bar, and search bar into one box. You can now navigate to a website, query a search engine, and browse your history or favourites all from the same box. You even have the option of turning on search suggestions, which are returned in real time as you type in your query.

At first I was concerned about privacy: how does the browser know that what you’re typing is not to be shared with search engines? Well, IE9 put you in control of your information and allows you to control what is and isn’t sent to search engines. It’s almost like they thought of everything!


Notification Bar

Download Notification Bar

In keeping with its cleaner interface, IE9 has changed the way notices and alerts are presented. Previously, notifications may have pushed web page content further down the browser or alerted you with a pop-up box, which obstructs your view of content. Now, all notifications are shown in the Notification Bar at the very bottom of the browser. With a clean and informative design, you can confirm a download or update an add-on without disrupting what you were doing.


Download Manager, and SmartScreen Filter

Download Manager

All downloads will now be managed by IE9′s download manager. If you are familiar with Firefox, you will recognize many of the same features; these include a default download folder, a separate ‘Download’ pop-up box (which displays the name, file size and location for each download), and the ability to delete, view or clear all downloads.

However, that is where the similarities end. IE9 now comes with integrated malware protection called SmartScreen.

SmartScreen Alert

SmartScreen is “a groundbreaking browser feature” developed specifically to protect you from malicious downloads.

By using real-time data, each download is assigned a reputation according to how many times that download has been reported as malicious. The more severe warnings a file acquires, the higher SmartScreen judges the download to be a risk. According to Microsoft: “Internet Explorer 9 is the only browser that uses download reputation to help users make safety decisions.” I can’t wait to see this in action, but I can’t help wondering if this could be abused by malicious users incorrectly reporting files.


Hang Recovery

Applications crash; it’s a simple fact. No matter how hard developers try, there will always come a time when your browser comes across an endless JavaScript loop or web page with far too much data to handle. For me, the most irritating time for this to happen is when you have multiple tabs open… not any more.

IE9 cleverly renders that irritation obsolete. In situations where other browsers normally hang, IE9 confines the problem to one tab, allowing you to close the tab and continue browsing without disrupting your work. No more checking your history and wondering which one of your tabs crashed your browser; well done, IE9.


Compatibility View

Like many of the features covered so far, this one is also unique to IE9.

Compatibility View works by analyzing popular websites and testing their compatibility with IE9. If a website does not meet certain criteria, a new button appears alongside the refresh and stop buttons. If you choose to click the button, “legacy document mode” is activated.

Legacy Document Mode really means displaying websites in the same way that Internet Explorer 8 does. This way, if there are any elements displaying incorrectly, you can turn on the compatibility view, and hopefully resolve any issues. Also, IE9 remembers which mode/view you prefer, and automatically selects this next time you visit the page.

After trying this myself, I have yet to see any difference between views.

I should also note that a websites compatibility is predetermined by the Internet Explorer team. I can’t help but wonder what criteria are websites being judged upon for either compatibility?


Add-On Performance Advisor

Addon Manager

This feature first appeared in Internet Explorer 8, and is simply a natural progression for its capabilities.
Many browsers now offer add-on applications; these can range from search engine optimisation tools to e-mail checkers and more. The performance advisor simply notifies you if an add-on performs poorly and will give you the opportunity to disable it.

I have primarily used Firefox for several years, and I am quite an advocate of its add-ons. I really wish this feature was available, as I am often disabling plug-ins for suspected performance issues.


Markup and Standards Support

Internet Explorer 9 was built with modern standards in mind. With developers and clients already trying out their websites in HTML5, SVG, and CSS3, IE9 appears to be focused on extensive support for modern standards. I was surprised to hear that they have invested a large amount of time and work with standards organizations such as W3C. To ensure that they stay ahead of the game, they have contributed over 2000 test results to the governing standards bodies to ““help same markup become a reality”.”

To enable developers to easily work with IE9 and interoperable markup, the IE9 team concentrated on five key areas: HTML5, Document-Object Model Optimization, CSS3, Scalable Vector Graphics, and Chakra, the new JavaScript engine.


HTML5

HTML5 Pinball Demo

If you have yet to see HTML5 in action, I recommend you visit the IE Testing Center. There are some fantastic canvas and benchmarking tools to play around with. Personally, I love the new video and audio elements, which allow for fast and easy media content on nearly all popular modern browsers.

The support for HTML5 in the IE family first began with Internet Explorer 8. IE8 does not support most of the newer HTML5 features, and when compared to other modern browsers, really flags behind. This is why IE9 chose a different approach, one which utilities hardware acceleration through Windows and your graphics processing unit. Combined with added support for new elements and better HTML parsing, IE9 is already a step ahead of the competition where HTML5 is concerned.


CSS3

Once again IE8 laid the ground work for IE9 in terms of compliance for cascading style sheets by centering on CSS2.1. If you are a developer you will know how hard it can be to force IE8 to play nicely with CSS3; unfortunately, there are only a few fixes and workarounds, and even these still present problems. Thankfully, IE9 was built with CSS3 in mind and will be the first version to include many CSS3 modules.

One of the latest trends in web design is the use of @font-face and similar typography enhancements in web pages. IE9 now introduces support for the Web Open Font Format (WOFF), which can work with TrueType and OpenType formats to transform the look of your font-family’s in CSS3. After working with Firefox and @font-kits for the last few months, I am excited to see this in action with IE9.

IE9 now supports the following modules from CSS3:

  • Backgrounds and Borders Module
  • Colour Module
  • Fonts Module
  • Media Queries Module
  • Namespaces Module
  • Selectors Module
  • Values and Units Module

Scalable Vector Graphics (SVG)

Recently I started working with Adobe Illustrator; after 10 years of working in web design and development (and primarily working with Adobe Photoshop) I felt I could finally devote some time to working with Illustrator and discovering what it has to offer, and in particular, exporting my work to SVG files. This was my first introduction to scalable vector graphics, and I am now starting to see them more and more.

It seems that, like me, Internet Explorer has never dealt with SVG either. It is only with IE9 that we first see interoperable SVG element support. Not only are they complying with standards, but they are also using hardware acceleration, by using our PC’s GPU to improve performance when rendering.

If you haven’t done so, I would recommend visiting the IE testing center and checking out some of the SVG demos; they have come a long way from growing simple 2-D shapes.


Chakra and Improved DOM

The Internet Explorer team have nicknamed their new JavaScript engine Chakra.

There appears to be a never-ending interpretation of what a ‘Chakra’ is, especially when it comes to medicine and religion interpretation; and if your background is in web design and development like me, trying to understand an overly complicated Wikipedia page on the subject is far outside the scope of this article.

On the other hand, IE9′s Chakra is an entirely new way of looking at JavaScript engines. In previous versions of Internet Explorer, JavaScript was tagged on to the side; it was never built into the core. Chakra changes things. JavaScript is now part of IE9′s engine, works with multiple CPU cores, and takes advantage of your computer’s hardware. This allows for faster interpretation, compiling, and code execution.

The new Document-Object Model has also had some spring cleaning. With various improvements, IE9 has increased efficiency and speed when rendering content. For example, previous versions of Internet Explorer have had problems handling white space in the DOM. IE9 has resolve these issues, handling this problem in a more appropriate manner.


Browser Benchmarks & Comparisons

With all this talk of hardware acceleration, modern standards support and improved interoperability, you could be forgiven for thinking that IE9 is the new Holy Grail of modern browsers. It certainly makes some bold claims and to be honest, as a hardened Firefox fan, I want to see IE9 put its money where its mouth is.

As I write this, it is just over 24 hours since the release of the IE9 beta. Anyone monitoring Twitter or following forum topics will already find brief comparisons and benchmarks between several browsers and IE9. I have already seen plenty of pros and cons, valid arguments and sworn allegiances to other browsers when people are asked: ‘So, are you migrating to IE9 then?’.

I decided to see things for myself, so I set up a basic benchmarking environment by installing five of the most popular browsers today and testing them against the claims of IE9. Throughout the rest of this article, you will see what tests and benchmarking tools are used, and ultimately how well IE9 fares against the competition.


Test System

I used a laptop and desktop PC to perform the tests but included only one set of results with article. I found that the results from testing hardware acceleration had very little difference between a moderately priced ‘home office’ laptop and my desktop PC. This was also true for testing between 64-bit and 32-bit browser versions.

Here are the system specs for my desktop PC:

  • Windows 7 64-bit
  • Intel i7 920 D0 CPU @ Stock 2.67 GHz
  • Corsair 6GB DDR3 Memory
  • ATI Radeon HD 5800 Graphics Card
  • ASUS Rampage II Motherboard

Browsers

IE9 Version

I decided upon the following browsers through personal experience and after consulting with other web designers and developers and the ’2010 Internet Browser Software Review Product Comparison’ list from toptenreviews.com

  • Firefox v 3.6.10
  • Opera v 10.62
  • Safari v 5.0.1
  • Chrome v 6.0.472.59
  • IE9 Beta v 9.0.7930.16406

I wanted to include a list of browsers which are popular and available across several operating systems. I think it’s important to say that when the benchmarks were conducted, each browser was freshly installed with the latest version, and no add-ons were installed.

Each of the tests were also performed with the browser maximized and after a fresh reboot. If you take a look at the IE Test Drive website you will see dozens of tests and great looking examples. Everyone will have their favorites and I understand you may feel other tests may be more suited to a benchmark browser comparison. Please forgive me if I have missed a more appropriate test to display here.


Benchmark Test Results

WebKit SunSpider JavaScript Benchmark

SunSpider Benchmark Results

Version: 0.9.1

http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html

SunSpider emulates real-world examples of JavaScript. By asking the browser to perform common JavaScript functions, like cryptology, we can gauge how quickly a browser handles. The quicker the JavaScript is executed, the better the engine.


Acid3 Test

Acid3 Benchmark Results

http://acid3.acidtests.org/

The Acid3 test is actually a set of one hundred tests, grouped into six areas. The test is designed to gauge how well a browser handles various web standards elements. Each of the six areas are represented as colored boxes and a successful percentage score out of one hundred is shown below. The full test results can be quite detailed, if analyzed correctly.

Today I have included the percentage score for each browser. I recommend you visit the Wikipedia page for Acid3 if you wish to read more about it.


CSS3 Selectors Test

CSS3 Selectors Benchmark Results

http://tools.css3.info/selectors-test/test.html

The CSS3 Selectors Test runs through forty-one CSS3 selectors and has a total of five-hundred-seventy-four tests. Once the test is completed you will be able to view any buggy or unsupported selectors for your browser. To keep things simple, I have included a score out of five-hundred-seventy-four for each browser.


The HTML5 Test

HTML5 Benchmark Results

Version: 1.0

http://www.html5test.com/

The score for this test is determined by the browser’s support for new and upcoming features of HTML5. Points are awarded as each feature is passed, and bonus points are awarded for special features like supporting audio and video content. I have listed each browser’s score out of a possible three hundred points.


FishIE Tank

FishIE Benchmark Results

http://ie.microsoft.com/testdrive/Performance/FishIE%20tank/Default.html

This is a great visual test, clearly it has been designed to show off the advancements in IE9. Using the new canvas features of HTML5, we are shown a fish tank, FPS counter and the option to change the amount of fish on the screen at any time. This test certainly depends upon hardware acceleration, the higher end PC will always perform better than these kind of tests. The graph above shows the results for 50, 100, and 250 fish when the browser was maximized to full screen.


Psychedelic Browsing

Psychedelic Benchmark Results

http://ie.microsoft.com/testdrive/Performance/PsychedelicBrowsing/Default.html

I first tried this test in Firefox . . . and very little happened. It was only when I tried this in IE9, that I fully understood the purpose of the demo: to once again show off IE9′s hardware acceleration. Just like the FishIE Tank test, the results were recorded in frames per second. The higher the frame count, the better the performance.


IE Beatz

IEBeatz Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/IEBeatz/Default.xhtm

I chose this test, because it is interactive, uses ‘GPU-powered HTML5 graphics’, Canvas, SVG and requires 27 audio elements. I almost removed this from these benchmark tests on the grounds that only two browsers loaded the audio elements. But I kept it in as I feel it highlights real-world problems when it comes to interoperability and modern web standards. The results were recorded after leaving the demo to run for five minutes.


Canvas Zoom

Canvas Zoom Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/DeepZoom/Default.html

All I can say is they must have used one expensive camera to take a picture! If you have yet to see this panoramic canvas benchmark in action, I suggest you take a look now, because it truly is spectacular.

At first I wondered how I could accurately gather test results. Like the other tests I maximized the browsers. I then clicked each of the images along the bottom and used the first one to zoom in and out multiple times. I recorded the average frame rate for each browser in the graph below using the same method. Not exactly scientific, but I feel it gives an accurate depiction of a real-world example.


Benchmark Conclusion

Looking at the bar graphs as a whole, it’s clear to see two sides to IE9:

  1. A dedication to hardware accelerated graphics, which clearly pays off when working with HTML5′s canvas. You only need to look at the psychedelic test results to get an idea of how well IE9 plays with your GPU.
  2. An improvement over IE8′s efforts to work with modern standards, but it still flags behind when compared to the other browsers.

Here’s where things start to get interesting. Microsoft has been promoting IE9′s modern standards support all the way along the development trail. In fact, their Beauty of the Web and Test Drive websites have examples, demos, and games all over the place. But with the score of 96 in the HTML5 compatibility test (the lowest score out of all five browsers) I start to wonder how swayed their demos and examples really are.

Of course, some leeway can be given for companies trying to promote their own products, but filling dedicated websites with examples like psychedelic browsing and Canvas Zoom, (both of which cause extremely poor performance in all other browsers) clearly gives the wrong idea on just how HTML5 ready IE9 really is.

At this stage, I’m glad I chose independent benchmarking tools, like the HTML5 compatibility test website. Without moving away from Microsoft’s Test Drive demos, you could be fooled into thinking that the latest version of Internet Explorer actually ticked every box for HTML5 and other modern standards.

Unfortunately, the confusion doesn’t stop here. Throughout the release of five ‘Platform Preview’ versions of Internet Explorer 9, Microsoft have been collecting their own test data. These results can be seen at the IE Test Center.

Looking at the ‘Cross-Browser Test Results’ table, and the HTML5 section, I count only three fails when looking at an older version of IE9. The platform preview version shown in this article already has a greater pass rate than any other browser listed.

In this case, we have conflicting test results. I’m certainly not accusing either side of padding the stats, because you can perform your own tests with IE9 and HTML5 website. I just think you need to be careful when comparing results like this; after all, the HTML5 Compatibility website and the IE Test Center tested for different HTML5 elements.


Pros and Cons

Pros

  • Clean and interactive interface.
  • ‘One box’ – address bar, search engine query, and favorites/history search in one. This is also now resizable.
  • Tabs are now moved up a level and sit alongside the address bar.
  • No task/info bar at the bottom of the browser, instead notifications are now shown in an unobtrusive box that appears when necessary.
  • Excellent use of hardware acceleration to improve, graphics, text, and images across webpages.
  • Improved standards support, such as HTML5, CSS3, and SVG.
  • “Tear off” tabs can be pinned to Windows 7 task bar for extra functionality.
  • Opening a new tab will show your most popular sites, sorted by activity. You also given the options to reopen previously closed tabs and reopen your last session. Both great features for recovering a crashed/closed browser.

Cons

  • Removed Internet Explorer 8 without warning.
  • Some websites just refuse to load, even with semantically correct markup. In my experience, this seems to be specific to the odd website taking advantage of HTML5.
  • Smaller screens, may have problems with tabs sitting alongside the address bar.
  • A reboot is required as part of the installation process, this is a minor grievance and may be resolved with a standard Windows update prior to final release.
  • IE9 scored the lowest out of the five browsers on http://www.html5test.com. Considering how Microsoft continuously advertise IE9′s support for HTML5, you would of expected to perform better.
  • Tabs are now moved up a level and sit alongside the address bar. I like the way this looks and feels, but I get the feeling that it may just get in the way further down the line.

Summary

It appears Microsoft has clear goals when it comes to IE9. They want to embrace modern standards and contribute to governing bodies like W3C to aid interoperability. IE9 is a massive leap forward from IE8′s attempts at HTML5, CSS3 and SVG. And it also feels like this is the browser they wanted to release with Windows 7. Looking at some of the new interface changes, like Jump Lists, reinforces this.

The benchmarks have shown problems still exist between IE9 and HTML5, but the advancements in hardware acceleration really shine through. Bugs do exist, some websites fail to load and it may take some time to get used to the new layout, but we need to remember this is still in beta stages, so maybe we could forgive it for the odd problem throughout development. So despite it’s cons, I’m happy testing out my latest web designs in IE9 and I am really excited about the final product.

I hope you have enjoyed this introduction to IE9 Beta and try it out, even if it is only to play PacMan in the IE9 Test Center!

June 11 2010

16:32

Quick Tip: Did Internet Explorer get the Box Model Right?


The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.

As we mostly work with extremely sensitive floated layouts, where even the addition of a 1px border can break the design, I wonder: did Internet Explorer get it right?


Box Sizing

“The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.”

This means that, if you should decide that you want to mimic Internet Explorer’s original interpretation of the box model, you can. The default value for box-sizing is “content-box.” This simply means that the width and height of an element do not include the borders and padding (or margins).

By changing this value to “border-box,” the width and height values then include the borders and padding.

#box {
 width: 200px;
 height: 200px;
 background: red;

 padding: 10px;
 border: 10px solid black;

 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

Because we’ve declared box-sizing with a value of “border-box,” the final width of the #box element, styled above, will be 200px.

Especially for floated layouts, this can save you a lot of headaches! But with that said, I’m still undecided. What are your thoughts on Internet Explorer’s interpretation of the box model?

March 16 2010

17:34

IE9 May Actually Be a Fantastic Browser

Today, as part of MIX 2010, some exciting updates were released on the progress of Internet Explorer 9. The IE team is implementing some incredible features, such as HTML5, CSS3, SVG support, and a new lightning fast JavaScript engine, Chakra! Further, they’re currently scoring a 55 on the Acid3 test – a figure that’s surely to increase substantially before the official release. What about the idea of Microsoft contributing to an open source project, jQuery, with their proposed templating engine? Within moments of these announcements, the Twitter-verse spilled “tears of joy.”

Want to dive in and check out the developer preview? That’s available too, starting today!




Take IE9 for a Test Drive.

Finally, we announced the availability of the first IE Platform Preview for developers, and our commitment to update it approximately every eight weeks. We want the developer community to have an earlier hands-on experience with the progress we’re making on the IE platform. The Platform Preview, and the feedback loop it is part of, marks a major change from previous IE releases.
IE Blog

Demos

Check out some of the demos below in each browser to learn the unique code required for each.


New JavaScript Engine: Chakra

JavaScript Graph

“You’ll notice that IE9 is faster at this benchmark than IE8 and several other browsers. It’s interesting to note that the difference between today’s IE9 preview and the browsers to its right in this graph. It takes about 70 seconds to identify a 300ms difference between browsers.”
IE Blog

Miscellaneous Tweets about IE9 from MIX 2010

“Video tag and SVG support in IE 9 as well – and it’s crazy fast. Very impressed.”
John Resig

“Microsoft to Expand its Collaboration with the jQuery Community”: http://bit.ly/cxybri
@jquery

“Today makes me very happy to have come to work at Microsoft. Very excited right now to see the reactions of the community.”
Rey Bango

“They’re asking for help in getting ppl to move IE6 to IE8. They want users on modern browsers.”
Rey Bango

“Open source, open standards, open Microsoft. Today I woke up to a different world than I thought I was living in.”
Molly E. Holzschlag

“So what we have here is HTML5, CSS3, SVG 1.1 in IE9. If I weren’t seeing it with my own eyes, I wouldn’t freakin’ believe it.”
Molly E. Holzschlag

Check back for more details as they become available!


February 11 2010

21:59

The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Smashing-magazine-advertisement in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)
 in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)  in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)  in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

In recent years Internet Explorer 6 has become the browser web designers love to hate. Security issues, JavaScript errors and inexplicable CSS rendering quirks have made it the brunt of many jokes. With IE6 in its twilight and big companies like Google dropping support, it seems like a good time to take a fond look back at our old foe. In this post we’re looking at what Internet Explorer 6 used to be and why its image changed over the years. You can also see the comic in a larger version.

Do we need to review our projects in Internet Explorer 6? Can we stop supporting IE6? If not, how do we handle those users who are still using IE6? And if yes, how can we prompt IE6 users to upgrade? Or how do we convince those who don’t allow their employees to get rid of the legacy browser to upgrade? What do you think? We are looking forward to your opinions in the comments to this post!

Ie6 One in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Ie6 Two in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Ie6 Three in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

Ie6 Four in The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)


© Brad Colbow for Smashing Magazine, 2010. | Permalink | 223 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ie, ie6, internet explorer

December 01 2009

19:05

How To Support Internet Explorer and Still Be Cutting Edge

Smashing-magazine-advertisement in How To Support Internet Explorer and Still Be Cutting Edge
 in How To Support Internet Explorer and Still Be Cutting Edge  in How To Support Internet Explorer and Still Be Cutting Edge  in How To Support Internet Explorer and Still Be Cutting Edge

Spacer in How To Support Internet Explorer and Still Be Cutting Edge

How To Support Internet Explorer and Still Be Cutting Edge (via @smashingmag) -

Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers.

But how do we actually do that? How do we create websites that are up to date with the latest coding techniques but that are also usable for people experiencing the Web on Internet Explorer?

In this article, we’ll see what measures we can take to provide a good experience for IE users but keep moving on. We will mainly focus on the CSS part but will also provide some handy tips on dealing with overall markup.

Also consider our previous articles:

The Content Is What Matters

Jeffrey Zeldman once said, “content precedes design. Design in the absence of content is not design; it’s decoration.” In fact, the most important thing on your website is the content. This is what everyone should be able to get, no matter which browser they’re using.

Using CSS3 doesn’t mean we should forget about older browsers and lock visitors out of our websites. We should check our websites on browsers as old as maybe IE5 or 5.5 and make sure the content is accessible for every user.

This doesn’t mean we should quit the fight to eradicate IE6 either. We can still follow the example of websites such as Twitter and YouTube and add visible but not dead-end warnings to upgrade.

02youtube in How To Support Internet Explorer and Still Be Cutting Edge

01twitter in How To Support Internet Explorer and Still Be Cutting Edge
YouTube and Twitter warning messages for IE6 users

And remember: each profession has the duty to educate those who are not familiar with their trade. We must explain how stuff works to our clients without being patronizing. It’s not their job to know this after all.

Basics First: The Three Layers (HTML, CSS and JavaScript)

When we create a new website, we do it in steps. First, the HTML. We will mark up our content in the most semantic way possible: titles should be marked up as headings, lists as lists, etc. The bottom line is that our content should be perfectly readable and its hierarchy understandable with only this part of the coding done. The content has to make sense, and we must never forget that this layer is the foundation on which we will develop all the rest.

Secondly, we add the style, the CSS. In this step, we add the visual elements to our design; we give the website its personality. We also make sure that the content is accessible without the third layer.

And finally, the third layer, the JavaScript, the behavior. Here we add the interactive elements to our website. We make the experience richer using things such as tabs, sliders, lightboxes, etc.

With this path in mind, our content will always be accessible in any browser. We make sure that older browsers get only the basic content and disregard more complex layers that could hamper their users’ access to it.

Adding Basic Style For Old Browsers

So our semantic markup is done, and we know that some browsers cannot render CSS properly or at all, such as browsers before Netscape 4.0 or Internet Explorer 4.0. For those browsers, displaying the bare content—the naked version—is the safest choice.

Some people say that, today, there is no need to do this. But if you’d like to make sure that these people on these browsers don’t run into any problems, just link to a basic version of your CSS with the link tag and then to the more advanced file with the @import declaration:

<link rel="stylesheet" type="text/css" href="basic.css" media="screen" />
<style type="text/css">
	@import "advanced.css";
</style>

You can also skip the link tag altogether and leave them with a text-only version of the website:

<style type="text/css">
	@import "style.css";
</style>

Embracing The Differences

Now let’s deal with the black sheep of commonly used browsers: Internet Explorer 6.

You’ve got two options:

  1. If only a negligible percentage of your audience is browsing the Web with it and you don’t want to throw your client’s money down the drain, you could create a basic style sheet for IE6.
  2. Acknowledge that your design will not look the same in IE6, and make decisions on what to leave out: which IE6 quirks will you fix and which will you leave be.

If you choose to feed IE6 a basic style sheet, the best course is to use the Universal IE6 CSS. Your website will have virtually no design, but this style sheet makes sure that the body has a readable width, that heading sizes are reasonable and that the content has some nice white space surrounding it.

In your HTML, you will have to add some conditional comments to link to the style sheet and to hide the other sheets from IE6:


	<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />



In the first conditional comment, we link our main style sheet to all browsers that are not IE6 (hence the “!”). And in the second comment, we link directly to the Universal IE6 style sheet on Google’s repository (and save some bandwidth at that!).

19makepsfaster-1 in How To Support Internet Explorer and Still Be Cutting Edge

19makepsfaster-2 in How To Support Internet Explorer and Still Be Cutting Edge
The Make Photoshop Faster website uses the Universal style sheet for IE6

If you prefer the second route, you must be prepared to embrace the differences between browser renderings. Know that some details of your design will not be visible or render as nicely in IE6, or even IE7 and 8. And don’t be upset about it.

Resets

As you know, all browsers have different default styles for the various HTML elements. This is why using a reset style sheet is wise, so that we can start with a clean slate.

Plenty of style sheets are around on the Internet for anyone’s benefit. The one that is usually considered the standard and most often implemented is Eric Meyer’s reset, or some variation of it.

04ericmeyer in How To Support Internet Explorer and Still Be Cutting Edge

With the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your projects.

05html5doctor in How To Support Internet Explorer and Still Be Cutting Edge

You can use a CSS reset either by embedding it at the top of your own CSS file, or, if you like to keep things tidy, by importing it from your style sheet:

@import url(reset.css);

CSS Differences That Could Break Your Layout

If you decide to use the Universal IE6 CSS, you’ve just saved yourself many a headache. But don’t let the shiny logos of IE7 and 8 fool you: if you intend to use the latest CSS techniques, you still have to do a lot to cater to them.

IE6 and PNG support

We all know that PNG images with alpha-channel transparency (i.e. the good-looking ones) don’t play nice on IE6. We’ve all seen that annoying light-blue background on our carefully crafted logos.

You can choose from among a few workarounds to this problem so that IE6 can display PNGs. Each is fairly quick to implement and does make a difference in the overall design.

Here are a few of the best scripts and techniques for dealing with this issue:

That said, we should mention that more and more Web designers nowadays opt not to fix the PNG issue on IE6:

06 31three in How To Support Internet Explorer and Still Be Cutting Edge
The newly revamped 31three website doesn’t apply any fix for PNGs in IE6.

Advanced Selectors

These selectors are almost the definition of smooth CSS development by themselves, because they hold the true power of CSS and can make our lives as developers so much easier (and our budgets so much lower!).

The decision of whether to make them work on Internet Explorer or not depends largely on what you are using them for.

For example, if you are using them to add extra detail to your designs, such as small icons to represent different file types, it won’t make a lot of difference if the icons don’t display on some browsers. Visitors to your website won’t know what they are missing, and the links will still be perfectly usable.

These selectors are also widely used to enhance typographic detail, and lack of support for them won’t be a big issue for your designs.

07hicksdesign in How To Support Internet Explorer and Still Be Cutting Edge
Hicksdesign uses advanced selectors for numbered bullets in its navigation menu, and they simply aren’t visible for IE6 users

Which browsers don’t support this? Internet Explorer 6 will not see styles applied with virtually any advanced selector. It only really understands simple descendant combinators and classes and ID selectors. It even struggles with multiple classes applied to the same element! It’s not to be trusted.

IE7 ignores the :lang selector and pseudo-elements, such as :first-line, :first-letter, :before and :after. But it does understand all attribute selectors.

Also, none of the Internet Explorer releases to date supports the :target pseudo-class, UI element states pseudo-classes (:enabled, :disabled, etc.), structural pseudo-classes (like :nth-child, :nth-of-type or :first-child) or the negation pseudo-element.

Box-Sizing

Box-sizing allows you to tell the browser how you want it to calculate the width and height of an element.

For example, if you set the box-sizing property to border-box, then the paddings and borders will be subtracted from the specified width and height of that element, instead of added to them (as stated in the W3C’s specifications for the standard box model).

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

If you believe that your website renders in IE in quirks mode (and therefore renders with the non-standard box model), you may want to use this property in your style sheets to make all browsers uniform.

Make sure to add the standard property and the vendor-specific ones:

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Which browsers don’t support this? If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. You can force IE6 to render in quirks mode. There are a few ways of doing this; one way is by adding an HTML comment before the doctype declaration of your HTML pages.

Media Queries

Media queries aren’t fully supported by most browsers, and Internet Explorer doesn’t support them at all.

However, because they are mostly used to call variations of style sheets for handheld devices, such as the iPhone, this fact is almost irrelevant in that case.

If you use media queries mainly to cater to the iPhone, the fact that they are not supported by other browsers makes no difference anyway, and their use is highly encouraged.

If you are using them to create a more flexible website design that adapts to changes in, say, window size, then know that only Safari, Firefox and Opera support them (partially).

Which browsers don’t support this? Internet Explorer and, in some instances, Safari and Firefox.

CSS Differences That Are Mainly Decorative

These are the issues that are best left alone for non-supporting browsers, because the lack of support won’t be a problem for users who want to access your content (i.e. your pages won’t break).

This has to do mainly with some of the new CSS3 properties, such as border-radius, text-shadow and border-image.

Border-radius

This is the first CSS3 property that designers learned to live without on Internet Explorer, because of its clearly decorative nature. With border-radius, you are better off not trying to replicate it on IE at all. Just let it be.

08gowalla-1 in How To Support Internet Explorer and Still Be Cutting Edge

08gowalla-2 in How To Support Internet Explorer and Still Be Cutting Edge
Gowalla uses border-radius on its website, but Internet Explorer users don’t see it.

Which browsers don’t support this? All Internet Explorer browsers. Opera, too.

Font-face

Font-face can be used with IE, but you may need to use Microsoft’s Web Embedding Fonts tool to convert your fonts to EOT.

09microsoft-tool in How To Support Internet Explorer and Still Be Cutting Edge

If you are including both font formats in your website, your CSS will probably follow this structure:

@font-face {
	  font-family: "Delicious";
	  src: url("Delicious-Roman.eot");
	  src: local("Delicious"), url("Delicious-Roman.otf") format("opentype");
}

Usually, a browser not being able to render the first font in a font stack shouldn’t break the website or hamper in any way the user’s access to the content. So, the recommendation here is to carefully ponder which fonts you want the visitor to see if their browser doesn’t support font-face and has to rely on the fonts you have declared in the style sheet.

10elliot-1 in How To Support Internet Explorer and Still Be Cutting Edge

10elliot-2 in How To Support Internet Explorer and Still Be Cutting Edge
A browser that doesn’t support font-face simplys show the next available font in the font stack

Which browsers don’t support this? If you use the EOT version for IE, even IE users will see the correct fonts.

Multiple Columns

Rather than create multiple floating DIVs to organize your text into columns, you can create columns automatically by using the multiple column properties in CSS3. But this means that some browsers won’t see them.

Multiple columns are better used for text, not layout. If you use them on your website, the worst thing that will happen is that visitors see a wider line of text.

If you’re dealing only with short text, than why not go ahead and use it and finish the job in two minutes? But if it would seriously impair the readability of your content, then your best option is to stick to the regular DIVs to create columns.

11yaili-1 in How To Support Internet Explorer and Still Be Cutting Edge

11yaili-2 in How To Support Internet Explorer and Still Be Cutting Edge
Here, the introductory text is displayed using CSS multiple columns. IE users will see normal single-column text.

Which browsers don’t support this? Internet Explorer and Opera.

RGBa and Opacity

RGBa colors are bliss. Rather than use hard-to-update PNG files for backgrounds, you can create the same transparency effect with CSS. But IE doesn’t get it. IE6 doesn’t even understand the PNGs to begin with.

It’s safe to assume that these transparencies won’t usually be applied to elements that cover important content; in which case, the content shouldn’t be behind another element in the first place.

So, when using RGBa colors, make sure to include a normal color before the RBGa one, so that browsers that don’t understand it will still have a fallback color:

div {
	background-color:  #FFFFFF;
	background-color: rgba(255,255,255,.5);
}

Opacity can be applied to IE using the opacity filter, but IE filters work only on elements that have layout:

div {
	filter: alpha(opacity = 50);
}

Also, remember that opacity works differently than RGBa colors: all of the elements enclosed in this DIV will be rendered transparent.

12 24ways-1 in How To Support Internet Explorer and Still Be Cutting Edge

12 24ways-2 in How To Support Internet Explorer and Still Be Cutting Edge
24ways uses RGBa colors and alpha transparency heavily, even though Internet Explorer doesn’t render the transparency.

Which browsers don’t support this? Every browser sees opacity, provided that filters are applied. IE doesn’t see RGBa colors.

Text-shadow

This is an easy call: ignore it. Assuming that the text is still readable, trying to recreate text-shadow any other way than with CSS is a Herculean task. So, unless missing text-shadow would seriously reduce the clarity of a large amount of text, or a small amount (in which case you could use image replacement), you’re better off without it.

13brokersdirect-1 in How To Support Internet Explorer and Still Be Cutting Edge

13brokersdirect-2 in How To Support Internet Explorer and Still Be Cutting Edge
The white text-shadow on Brokers Direct’s website is not visible on Internet Explorer.

Which browsers don’t support this? Internet Explorer.

Border-image

The border-image property gives us an easy way to add beautiful borders to our elements that would otherwise be a nightmare to implement (and that in most instances we would probably choose not to implement).

Because the property is almost always decorative, the best option would be to include a fallback for browsers that don’t support it using the normal border property, and adding the enhanced CSS after it for other browsers.

14spoongraphics-1 in How To Support Internet Explorer and Still Be Cutting Edge

14spoongraphics-2 in How To Support Internet Explorer and Still Be Cutting Edge
SpoonGraphics uses border-image, but it is not visible in Internet Explorer.

Which browsers don’t support this? Answering the opposite question is easier: for now, only Safari and Firefox support this feature.

Multiple Backgrounds

This feature depends on the design of your website, but in a lot of cases, the lack of a second or even third background will not affect the readability of the page.

Multiple backgrounds in CSS saves us a lot of the development headaches that were caused by having to use different HTML hooks and nested elements to achieve the same effect. So, if you opt to use multiple backgrounds, you are already choosing which browsers to display the results to.

If all users seeing all of the backgrounds is important to you, then do it the old way and apply different backgrounds to different elements.

If not, your best bet is to give a fallback to browsers that don’t support it: pick the background that you feel is most important or that best fits the overall design and add that property before the multiple backgrounds one. Browsers that don’t support it will ignore the second property.

Which browsers don’t support this? Internet Explorer, Opera and Firefox up until version 3.5 (version 3.6 is currently in beta, but it supports multiple backgrounds!).

Tools

Modernizr

15modernizr in How To Support Internet Explorer and Still Be Cutting Edge

Modernizr is a little JavaScript that is quite useful if you are using advanced CSS properties. It adds some classes to the html tag in your pages, to see whether a browser supports certain CSS features, such as:

  • @font-face
  • rgba()
  • hsla()
  • border-image
  • border-radius
  • box-shadow
  • Multiple backgrounds
  • opacity
  • CSS animations
  • CSS columns
  • CSS gradients
  • CSS reflections
  • CSS 2-D transforms
  • CSS 3-D transforms
  • CSS transitions

Take border-image. When a page loads in a browser that supports the property, it output borderimage. If the browser doesn’t support it, it outputs no-borderimage.

Modernizr doesn’t enable these features in browsers that don’t support them, but rather gives you important information (in the form of classes) that you can use in your style sheets to apply distinct selectors and properties to elements.

IE-7.js

IE-7.js makes IE5+ behave like IE8, supporting more advanced selectors and fixing some rendering bugs. Here’s an excerpt from the creator’s website:

  • Added support for advanced selectors: >, + and ~; attribute selectors; :hover, :active, :focus for all elements; :first-child, :last-child, :only-child, :nth-child, :nth-last-child; :checked, :disabled, :enabled; :empty, :not; :before, :after, :content; :lang.
  • It uses the standard box model in standards and quirks mode.
  • Supports min- and max-width and -height.
  • Supports PNG alpha transparency (but doesn’t solve the PNG problem for repeated or positioned backgrounds).

The disadvantage of this technique is that JavaScript has to be enabled for it to work, which is unfortunate. So, you will have to be careful to give users who have disabled JavaScript an acceptable version of your website, especially if some behaviors will not work or, worse, if the lack of JavaScript will break your layout.

Examples

As they say it, this is easier said than done. So, we’ll show that these ideas can actually be put into practice with some nice examples. These are websites we’ve come across that render differently in different browsers. In some cases, the differences are quite noticeable, but the developers have chosen to embrace those differences.

Twitter

16twitter-1 in How To Support Internet Explorer and Still Be Cutting Edge
Twitter in Firefox

16twitter-2 in How To Support Internet Explorer and Still Be Cutting Edge
Twitter in IE6

WordPress

17wordpress-1 in How To Support Internet Explorer and Still Be Cutting Edge
WordPress in Firefox

17wordpress-2 in How To Support Internet Explorer and Still Be Cutting Edge
WordPress in IE6

WWF

18wwf-1 in How To Support Internet Explorer and Still Be Cutting Edge
WWF in Firefox

18wwf-2 in How To Support Internet Explorer and Still Be Cutting Edge
WWF in IE6

Conclusion

Remember that the purpose of this post is not to teach you how to hack IE or deal with its quirks or even how to achieve effects by resorting to JavaScript. Rather, it is to explain how we can design and build websites knowing that differences will arise between browsers.

You won’t see people rioting over the lack of rounded corners on Twitter or WordPress; they aren’t even upset by it, because those differences don’t fundamentally break the websites. People can still use the websites and have a good experience. In most cases, they won’t even notice it!

All we have to do now is explain this politely but seriously to our clients, so that we can all contribute to the ever-evolving Web.

Further Reading And References

Do your designs have a support for older versions of Internet Explorer (<= 7.0)?


Do your designs have a support for older versions of Internet Explorer (<=7)?(poll)

Related posts

You may be interested in the following related posts:

(al)


© Inayaili de Leon for Smashing Magazine, 2009. | Permalink | 68 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Coding, hacks, internet explorer, techniques

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...