Learning IE8

Listing and Demonstrating the "New" Features in Internet Explorer 8

Within the next 12 months, many Web developers will be dropping IE7. Many Web developers have also been ignoring some modern browser capabilities because, well, they weren't supported by their baseline browser. This site aims to list and demo the platform features that were introduced in IE8 years ago, so you can make the most of today's new baseline.

About

By

Brian Blakely (follow on Twitter) Add on Google Plus

Sources

Test Suites and Tools

Browser Support

Filter Features By Impact

  • HTML

    WAI-ARIA Attributes

    More Info

    HTML attributes that help make dynamic content accessible. Now that IE8 understands these, developers can control how it talks to JAWS or other screen readers.

    <img> alt No Longer Appears as a Tooltip

    More Info

    I didn't even notice that this was a thing, but cool!

    CSS

    More display Values

    More Info

    IE8 finally brought all the CSS2 values for display. inline-block might actually reduce the amount of float-bloat in your CSS, and the various table values can make vertical centering of arbitrary content a breeze when combined with vertical-align.

    box-sizing

    More Info

    Oh man. This will allow you to size and layout elements the way it was always supposed to be, but somehow perverted along the path – until now. With box-sizing: border-box; you can set the width of your element, and have your border and padding grow inward, instead of expanding outward, as was mandatory in IE7 Standards Mode, requiring (shudder) math. You can also combine px and % on various box model properties to do some interesting things.

    Generated Content

    More Info

    The popular :before and :after pseudo-elements are parts of this spec. It is intended to make superfluous, decorative HTML elements a thing of the past, and IE8 implements a good portion of it. Not only that, but it will take out a lot of the handwork involved in numbering elements when an <ol> is not appropriate. This is an insanely helpful feature.

    One thing to note: IE's proprietary filter effects don't work on generated content.

    :focus Pseudo-Class

    More Info

    Undoubtedly, forms are the biggest pain in the butt when it comes to styling. Anything a browser can throw at us to make this simpler is welcome. :focus allows you to style a form element or link when it has user focus. That is, when the user has tabbed-to or clicked it.

    outline

    More Info

    An outline is kind of like a border that doesn't take up layout. It kind of floats ethereally around your element. While box-sizing makes this behavior less useful, it still has a ton of good uses, which I'm sure you'll tease out.

    inherit

    More Info

    This was really janky before IE8. I think it only worked on color or something, but now you can use it as a value for just about any CSS property. It's really useful for setting up theming with a very small amount of code.

    More Table Control

    More Info

    A few new properties to get your motors putting:

    More Printing Control

    More Info

    IE8 has 3 new properties for printing. These only affect printed content, and presumably one day all paged content, such as that in Opera's paged media spec.

    These properties are:

    More white-space Values

    More Info

    Two new values:

    @import media types

    More Info

    @import is useful for linking to stylesheets from within another stylesheet (though you should combine them, when possible, to reduce the number of HTTP requests). Now you can specify the type of media to use for these imported files, such as print.

    :lang

    More Info

    Style elements based on the language you've set for that element or page via the lang attribute. We could already do this with attribute selectors in IE7, but pseudo-classes are neat.

    Universal z-index

    More Info

    In IE7 and below, elements basically had to be siblings to layer over one another. If you had a deeply-nested element that needed to layer over the whole page (like, say, a modal box), you may have been out of luck – and out of hair a couple hours of rewriting later. In IE8, that is no longer an issue. All those years of training and precaution, now irrelevant! I am so happy. :.)

    More list-type-style Values

    More Info

    Some new styles on your lists. I like the "leading zeroes" one quite a bit.

    Greater @page Support

    More Info

    Change the margins and other traits of specific pages in the printed version of your app with the :first, :left, :right pseudo-classes.

    for Attribute Selector

    More Info

    IE7 possessed a bug, in which attribute selectors didn't work with [for]. It's great that this is fixed in IE8, as it offers us the ability to style individual <label> elements without tawdry, superfluous class attributes.

    JavaScript

    online / offline events & navigator.onLine

    More Info

    Unfortunately, the online and offline events are useless in IE and Firefox, as they only fire when the user explicitly selects File > Work Offline. It seems to me that this isn't what developers want or expect, and I've notified Mozilla to as much (as per usual, there's push-back, so please comment and lend your support). In any case, it's too late for IE8 (and 9 and 10).

    However, there is a bright side, and it's called WebKit:

    1. These events work as expected in WebKit. That means that you can use them pretty reliably on mobile, where they are the most useful.
    2. navigator.onLine works as expected, again, in WebKit. That is, it returns true if the user can access your data, and false if they can't. Which is neat. Think about checking this value immediately when the user interacts with your app in a way that requires data, instead of waiting for an XHR (Ajax call) to fail first. If it returns false, save all important data using localStorage (see below), maybe create a deeplink on the hash (again, see below – the hashchange event) so the user can return later. Finally, throw up a friendly message asking them to try again when they have network access. Of course, because other browsers barf on this feature as well, you should also do that when the XHR fails, although it won't be as responsive. Until our beloved WebKit monoculture reigns supreme, with an iron fist! And a titanium leg! And lasers!

    Native JSON

    More Info

    While I would wager that you were using a library for JSON, you might be pleased to know that working with it is infinitely faster and more secure in IE8. Also, with the new APIs, working with JSON is so much more approachable than the janky eval-based way of doing things.

    querySelector / querySelectorAll

    More Info

    You've probably worked with jQuery before. You know how you might do something like $('div.foo') to get all <div>s with foo as one of their classes. querySelectorAll works almost identically – you can query elements based on a CSS selector. It gives you a raw node list, just like document.getElementsByTagName, and works with every CSS selector that I've ever tried. querySelector does nearly the same thing, except it only delivers the first element that matches the selector, which is probably faster.

    One notable difference between querySelector/All and methods that begin with getElementsBy is that the latter returns a "live node list," meaning that the results stored in, for example, var foo will change automatically as the actual DOM changes. querySelector/All is like taking a static snapshot of the current DOM that matches your selector.

    hashchange event

    More Info

    Fires whenever the hash (#) on the URL changes, be it by clicking a linking, setting location.hash, or the user changing it in the address bar themselves. Right after the complete History API, this is the holy grail of one-page applications, as it allows you to modify your app in real-time, responding to clicks on hash links, without refreshing the entire page. Combine that technique with WAI-ARIA (below) for a highly accessible experience.

    localStorage / sessionStorage

    More Info

    Referred to collectively as "DOM Storage" or "webStorage," you can think of these guys as kind of like Cookies. They allow you to store text data on the user's hard drive. The data you save is accessible to any page on the same origin. They're global objects under window, and they have three really simple methods:

    So what is the difference between sessionStorage and localStorage? sessionStorage data will be erased when the user closes the browser tab or window that they are working in. By the same hand, it isn't available to other windows or tabs. localStorage data, though, is fairly permanent. It'll be around until you delete it, or the user does in their user agent's settings.

    Finally, keep in mind that there is a storage limit of a couple MBs per origin.

    XDomainRequest

    More Info

    This is Microsoft's version of CORS used only in IE8 and 9 (IE10 supports the standard implementation). It is an object that will allow you to perform cross-domain HTTP requests, in a similar fashion to XMLHttpRequest. However, like standard CORS, it requires some minor work on the frontend and backend. It has some restrictions that will be helpful to know if you run into a bug (see the "more info" link).

    postMessage

    More Info

    Like XDomainRequest, this will allow two disparate origins to exchange data, but only if one is in the child of another by being either in an <iframe> or pop-up window. The pages involved in the communication will both need some JavaScript to make this work, maintaining security.

    hasAttribute

    More Info

    Does the element have the specified attribute? You can find out with the ease and swagger of a dolphin when you use this method on any element, feeding it a string that corresponds to the attribute name.

    DOM Element Interfaces

    More Info

    Constructors for HTML elements. These are really useful, because they allow you to add properties and methods to all elements of a certain type with prototype. However, use caution – it's can be dangerous to extend these interfaces, as you may unintentionally conflict with 3rd-party libraries or the browser itself. Always plan ahead!

    Object.defineProperty

    More Info

    This method allows you to not only give an object a new property (which we could already do), but define how that property should behave when its value changes or is retrieved (among other things). It's very cool stuff, but in IE8 you can only do it to DOM objects, whereas all JavaScript objects are supported in better browsers. You can, of course, continue to merely set and get properties on pretty much anything in all browsers using other techniques.

    JS Honorable Mentions

    There are a number of fundamental features that just always work now, and that's what makes them special.

    Files

    Data URIs

    More Info

    By converting data into a URI, we can embed it directly into our code. In IE8, it's somewhat limited, as we can only do this with images and CSS data, but nothing else (for well-meaning security reasons). Newer/better browsers are more flexible.

    This is so great for teeny tiny images, where our data size is so small that the HTTP requests would actually damage our load times more than the filesizes themselves. Combine this technique with image sprites for maximum power.

    Another notable use case is when you want to amalgamate all your assets into one HTML files, perhaps, when passing off a landing page to a third party, and you're afraid they will mess it up if there is any complexity involved whatsoever (you can tell that I really work in this industry). Just turn your images into data URIs, smack that into your <style> content or <img>, and away you go!

    6 Concurrent Connections

    IE8 can now download up to 6 things at one time (IE7 only had 2 concurrent connections). If you're optimizing performance on this browser, this fact is likely something to keep in mind.

    Downloads Over 4GB

    I never tried this, and if you are, I might recommend leveraging BitTorrent.

    Shut up and dance