Internet Explorer 10 is out
A comprehensive list of the new css things any web dev should know about
Windows 8 has been released about a week ago now, and it is time to ask ourselves how Internet Explorer 10 (its default browser) will treat our websites.
I will describe here all of the new features in Internet Explorer 10. This article is meant to be concise and focus on the most important features of IE10. If you want the Full Monty, you can get it at the source of all things IE, msdn.
We will focus in this first article on web design - mostly CSS but not only. I will do a follow up with HTML5 and JavaScript later on.
Important to know first
Standards mode
First of all, all your websites should be in standards mode to benefit from the following novelties. Note that all your websites should always be in standards mode, just because it's the mode defined by the standards.So, you should not add any X-UA-Compatible header or meta tag and you should define a doctype. Microsoft advises to start your HTML documents with the following: <!DOCTYPE html>.
You can read more right here and right there.
User-Agent
First of all, the User-Agent string will be: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0) which is pretty standard when it comes to IE. However, this time around they added a special keyword Touch at the end to identify those devices with touch capabilities. So the User-Agent string on touch devices becomes: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch).
It may prove to be useful since touch interfaces are inherently different than mouse or touchpad-based ones on some key user interactions. Yet, detecting features from a User-Agent string is always a hit and miss operation.
Device adaptation
For some reason, Microsoft though the viewport meta tag wasn't sufficient to figure out what the web developer wants with the viewport. So they decided that in narrow environments, they would just ignore it. How .. how ... No, let's not go there. The explanations are all there on msdn.Fortunately, they decided to add another way of doing it. @-ms-viewport. Click the link above (or go to the web developer 101) to see how it's used.
Scrollbars? Where are the scrollbars?
Internet Explorer 10 does not reserve space for the scrollbars anymore. They show up over the web page and are pseudo transparent (only the thumb is opaque). The scrollbar vanishes whenever the mouse stops moving. Unfortunately, when you browse the web, the mouse is rarely still.On touch devices (either touch based or touchpad based) it should work well. Scrolling with the mouse wheel displays a tiny thumb very much like the one on an iOS device.
But if you use a mouse, well, hard luck for you. All websites that don't allow enough margins on the right hand side (you know, like mine) will appear truncated.
New CSS features
Here are the new css features supported by IE10:Advanced Layout
- The CSS exclusions. A way to make text flow around boxes that can be right in the middle of an area, not just floating on the left or right.
- Support: The latest IE but not much more at this point.
- CSS properties: -ms-wrap-flow -ms-wrap-through -ms-wrap-margin.
- Details on CSS exclusions in ie 10 here
- Multi-column layout. At last a way to make multi-column in internet explorer. While this seems nice in theory, use it wisely in the field. tall columns are a pain to read on a short screen.
- Support: The latest IE, Safari, Chrome and Firefox (for the most part). caniuse.com.
- CSS Properties: column (with column-width column-count) column-gap column-rule (with column-rule-color column-rule-style, column-rule-width) break-before break-after break-inside column-span column-fill
- Details on CSS multi column layout in ie 10 here
- Regions. You thought CSS columns were cool? Well, here's news: columns are much more cool! Be careful not to lose your readers though. Flowing content can be a bit messy.
- Support: The latest IE but not much more at this point. caniuse.com.
- CSS Properties: -ms-flow-into -ms-flow-from
- Details on CSS regions in ie 10 here
- Flexible box. These are the "inline-block on steroids", or how to make boxed elements flow nicely.
- Support: The latest IE, Safari, Chrome and Firefox. caniuse.com.
- CSS Properties: display: -ms-flexbox -ms-flex-direction - notably useful for rtl language support. -ms-flex-align -ms-flex-pack -ms-flex-wrap -ms-flex -ms-flex-order
- Details on CSS flexbox layout in ie 10 here.
- Grid layout. The future replacement for the table html element? Promising for sure.
- Support: The latest IE, not much more. caniuse.com.
- CSS Properties: -ms-grid-columns -ms-grid-rows -ms-grid-column-align -ms-grid-row-align -ms-grid-column-span -ms-grid-row-span
- Details on CSS grid layout in ie 10 here.
Visual effects
- 3D Transforms. They allow web developers to be able to transform their elements, making it possible to make nice effects without having to load images.
- Support: The latest IE, Firefox, Safari and Chrome. caniuse.com.
- CSS Functions: perspective matrix3d scale3d translate3d translateZ scaleZ rotate3d rotateX rotateY rotateZ
- CSS Properties: transform transform-origin transform-style perspective perspective-origin backface-visibility
- Details on CSS 3D Transforms in ie 10 here.
- Transitions. Allow devs to smooth the changes in the dom. For example, fading something out instead of just hiding it, or animating an object when the mouse is over it. Already widely in use because it degrades very smoothly.
- Support: The latest IE, long supported by Firefox, Safari and Chrome.
- CSS Properties: transition-property transition-duration transition-timing-function transition-delay transition
- Details on CSS Transitions in ie 10 here.
- Animations. Make animations much more integrated to the browser, without JavaScript modifying the DOM every split second.
- Support: The latest IE, Firefox, Safari and Chrome.
- CSS Properties: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-play-state animation-delay animation-fill-mode animation @keyframes animation-name animation-name animation-name animation-name animation-name
- Details on CSS Animations in ie 10 here.
- Gradients. They allow various type of gradients, useful when creating buttons and other stuff.
- Support: The latest IE, old on Firefox, Safari and Chrome. caniuse.com and caniuse.com
- CSS Functions: linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient()
- Details on CSS Gradients in ie 10 here.
- New Fonts features. Allow more control over the typographic features of your font. Of course, this only applies if the font designer implemented it.
- Support: The latest IE, Firefox, Chrome and Safari for the most part. caniuse.com
- CSS Properties: font-feature-settings
- CSS Font tags: kern smcp liga dlig ss01, ss02... swsh tnum lnum onum
- Details on the new CSS Fonts features in ie 10 here. Also a link to a nice demo.
- New text features. Mostly related to text shadows and hyphenation.
- Support: The latest IE, Firefox, Safari and Chrome (but for the hyphenation feats). caniuse.com and caniuse.com
- CSS Properties: text-shadow -ms-hyphens -ms-hyphenate-limit-zone -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines
- Details on the new CSS text features in ie 10 here.
Wrap up
Well, here we are. Internet Explorer 10 has now surpassed its fellow competitors on some areas. But the sky is still not pink with bunnies jumping around. Some CSS features such as "resize" or "border images" are still lacking. And I only addressed CSS features here, not the rest - namely HTML, JavaScript as well as other aspects of the web browser.Still, I feel for the first time that IE is back in the game. And it feels good.
Now, before diving in these features, there is something else that should be mentioned: The release cycle. Internet Explorer 10 is just out of the box, but traditionally, IE's adoption is much slower than its competitors. For starters, it only runs on Windows. And it doesn't even run on all Windows! Chrome and Firefox both run on Windows XP and newer, Linux and Mac OS, effectively targeting close to 100% of the desktop market. Internet Explorer 9 won't run on Windows XP. Internet Explorer 10 only runs on Windows 8 so far, and soon Windows 7 as well. Vista is already obsolete. There is also the fact that Chrome and Firefox do update themselves on a weekly basis. If they ever decide to support all of these features, they could very well deliver it to more people within days than IE10 will achieve in its first year.
So while IE 10 is a great browser when it comes to CSS support, we'll still have to deal with IE 8 and 9 for quite a while. Hopefully most of these features degrade gracefully and can be used for the benefit of our users that use browsers "in the know".
