IE7 NO MORe

Because future matters, we designers need to rely on modern browsers.

Internet Explorer 7 was released by Microsoft in October 2006, five years after the Long Sleep of IE6 .

Although it fixed a number of bugs of its predecessor and improved web standards compliance, it still does not support CSS2 (specification since 1998), neither Acid2 test.

IE8, released in 2009, changes the game and offers new layout and CSS solutions for webdesigners. Now, a real challenge begins : making websites without hacks or tricks for defective browsers.
And now, IE7 becomes a real obstacle for the Web.

We can't live in the Past anymore, we need to forget about Internet Explorer 7.

The playground

• CSS2.1 Table-row vertical box model

  

  This is a flexible height column. Based CSS2 display: table-row
  OK on Firefox 3+, Safari 3+, Chrome 4+, Opera 10+, IE8+

• Movable flexible boxes with CSS2 table-cell

  

  Using display: table, display: table-cell :target, border-radius. OK on Firefox 3+, Safari 3+, Chrome 4+, Opera 10+, IE8+

• Tab Navigation menus without images

  

  Using border-radius, rotate and gradients. OK on Firefox 3.5+, Chrome 5+. Not OK on IE6/8, not OK on Safari 4. No rotation nor gradients on Opera 10.5

• Animated dropdown (clic) menu in HTML5 / CSS3

  

  Using :target, inline-block, opacity, transitions, gradients, border-radius. Works on Firefox 3+, Safari 3+, Chrome 4+, Opera 10+. Not OK on IE6/8.

• Animated dropdown (hover) menu in HTML5 / CSS3

  

  Using :hover, inline-block, opacity, transitions, gradients, border-radius. OK on Firefox 3+, Safari 3+, Chrome 4+, Opera 10+, IE7+. Actually no animation nor gradients on FF3.6, Opera and IE

• Fluid navigation tab menu with CSS3 flexible box model

  

  Using CSS3 flexible box model, border-radius and transitions. No JavaScript
  OK on Firefox 3.5+, Safari 4+, Chrome 5+. Not OK on IE6/8, Not OK on Opera 10.5

• Slideshow image gallery in CSS3

  

  Using :target, inline-block, opacity, overflow, transitions, border-radius. OK on Firefox 3+, Safari 3+, Chrome 4+, Opera 10+. Not OK on IE6/8.

• Scrolling image gallery in CSS3

  

  Using :target, inline-block, overflow, transitions, border-radius. OK on Firefox 3+, Safari 3+, Chrome 4+, Opera 10+. Not OK on IE6/8.. Actually no animation nor gradients on FF, Opera

• A todolist with HTML LocalStorage

  

  Using HTML5 localStorage, HTML5 contenteditable, a bit of jQuery to handle strings
  Works well on Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+. OK since IE8

• Playing with CSS3

  

  A "pot pourri" of various effects and CSS3 properties. Works on IE7+ with decoration fallback.

• Icon and images with Data URI

  

  Data URI provides a way to include data in-line in web pages without HTTP request. OK on Firefox, Safari, Chrome, Opera. OK since IE8

• Rearrange visited links with flexible box model

  

  OK on Firefox 3.6+, Safari 4+, Chrome 4+ Not OK on IE6/8 nor Opera..

• Word wrapping with CSS3

  

  Wrapping long words or URLs with CSS3 word-wrap property. OK on Firefox 3.5+, Safari 4+, Chrome 4+. OK on IE6/8

• Using CSS3 :lang selector

  

  Target modern browsers with :lang OK on most modern browsers including IE8.