Today Microsoft officially released the Release Preview of IE 10 for Windows 7. There are a few things every developer should know about the new browser because it will get a huge market share as soon as Microsoft decides to release the final version.

I've read the IE 10 developer guide so you don't have to! So what's new?

1. No more Conditional comments

Nearly every web developer and designer has used conditional comments at least once. In the past there was always this one IE bug you needed to fix. Here the conditional comments did came in handy. You could just include an extra stylesheet or script file if the user was running a IE version and no other browser was effected. You know, something like this:

<!--[if lt IE 9]> <script type="text/javascript" src="ie9hack.js"></script> <![endif]-->

In the future this will no longer be possible as Internet Explorer 10 does not interpret these conditional comments. While Microsoft argues you should always detect features not browsers it did take away a feature without actual need.

2. New User Agent Strings

The user agent string identifies the browser to the server hosting a website. The Internet Explorer 10 adds some new information to it's user agent string:

Standard IE 10 user agent string: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

Running IE 10 on a touch device: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch)

Running IE 10 on an ARM powered device: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; ARM;)

Running IE 10 on a touch an ARM powered device: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; ARM; Touch)

3. Flash Whitelist

If you are running Windows 8 you actually have two different Internet Explorer 10 versions installed. There is the desktop version which comes with an integrated flash player and does display flash as previous IE versions do. And then there is the "metro ui" version which also has an integrated flash player, but this IE version will only display flash content if your website is listed on a Microsoft Flash white list.

If you website is not listed on this white list you can add this X-UA-Compatible meta tag to your page:

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />

Now if a user opens your website using the "metro ui" Internet Explorer and this meta tag is present IE will ask the user to switch to desktop mode.



I would like to add that white Microsoft talks about IE on the desktop the user most likely not know and not care about the difference between the IE 10 versions.

You can find more information about the flash white list and how to add your site here.

4. Differences between Win 7 and 8

As of today you can run IE 10 on Windows 7 and Windows 8. Apparently some features are not present if you are running Windows 7.

This DOM Events will not fire on Windows 7

• MSPointerCancel
• MSPointerDown
• MSPointerHover
• MSPointerMove
• MSPointerOut
• MSPointerOver
• MSPointerUp
• MSGestureChange
• MSGestureEnd
• MSGestureHold
• MSGestureStart
• MSGestureTap
• MSManipulationStateChanged

CSS properties not supported on Windows 7

• -ms-overflow-style
• -ms-scroll-chaining
• -ms-scroll-limit
• -ms-scroll-limit-x-max
• -ms-scroll-limit-x-min
• -ms-scroll-limit-y-max
• -ms-scroll-limit-y-min
• -ms-scroll-rails
• -ms-scroll-translation
• -ms-content-zoom-chaining
• msContentZoomFactor
• -ms-content-zooming
• -ms-content-zoom-limit
• -ms-content-zoom-limit-max
• -ms-content-zoom-limit-min
• -ms-touch-action
• -ms-scroll-snap-points-x
• -ms-scroll-snap-points-y
• -ms-scroll-snap-type
• -ms-scroll-snap-x
• -ms-scroll-snap-y
• -ms-content-zoom-snap
• -ms-content-zoom-snap-points
• -ms-content-zoom-snap-type

DOM properties not supported on Windows 7

• msMaxTouchPoints
• msPointerEnabled
• aria-haspopup

Aside from the user interface and the user agent string all differences involve the touch APIs. So if you plan to use the new touch events you should get a touch device running Windows 8.

5. New HTML 5 features

Internet Explorer 10 implements a great number of HTML 5 features which were not available on Internet Explorer 9. If you don't want to support IE 9 you can say goodbye to many polyfills and fallback solutions. The most important features are:

• Application Cache API
  Enables you to create offline web applications.
• Drag and drop
  On IE 10 you can use the draggable attribute on any HTML element.
• File API
  Load, save and manipulate files directly on the client.
• Web Forms
  Use the new input types email, number, range, tel, url and the progress element.
• History
  Enables you to manipulate the browser history.
• Video
  Advanced video playback support (IE 9 has basic support).
• Web Workers
  Run JavaScript code in the background.
• Web Sockets
  Web Sockets provides a two-way communication using HTTP.

Impressive list huh? You can find more information here.

6. New CSS features

Again IE 10 adds new CSS features (mostly prefixed with -ms). You can find a complete list here.

• CSS Advanced Layout
  Including regions, multi-column layout, flexbox, grid layout and device adaption.
• 3D Transforms
  Rotate, scale and translate element in 2D and 3D.
• Animations
  Animate elements using nothing but CSS 3.
• Fonts
  Greatly improved support for OpenType fonts.
• Gradients
  You can create color gradients without the need for images.
• Shadows
  You can add drop shadows to texts and boxes.

Conclusion

Also IE 10 brings many new features to the table nearly all other browsers support more HTML 5 and CSS 3 features. We will see if Microsoft will continue to improve or if we need to wait another year for the next update.

If you are one of the unlucky few who need to keep support for Internet Explorer 9 you should definitely check out the Cross Browser Handbook.