IE7 NO MORe

just another CSS playground

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 CSS3 playground

Some exemples of the recent browsers possibilities.
Most of these casestudies require Firefox 3.5+, Chrome 10+, Opera 11+ and IE 9+.

CSS3 Positioning

  1. Playing with Media Queries

    mediaqueries

  2. Flexible Box Model

    Flexible Box Model

  3. CSS3 multiple columns layout

    columns

CSS3 Navigation

  1. Navigation buttons

    border-radius gradients

  2. CSS3 transitions on navigation

    transition

  3. Dropdown Menu (clic)

    :target opacity transitions gradients border-radius

  4. Slideshow image gallery

    :target opacity transitions border-radius

  5. Scrolling image gallery

    :target transitions border-radius

  6. Fluid navigation with flexible box model

    Flexible Box Model transitions

CSS3 Text

  1. Word wrapping

    word-wrap

  2. Fixing whitespace with CSS3 rem unit

    rem

CSS3 Miscellaneous

  1. Breadcrumb without images

    border-radius radial-gradient siblings selector

  2. Vignetting images with CSS3 radial gradient

    background-image

  3. CSS3 border-image testcases

    border-image

  4. background-image cover

    background-size

  5. HTML5 / CSS3 forms styling

    input :required :valid :invalid

  6. Badge with :before :after and CSS3 rotation

    :before :after transform

  7. Only-child testcase

    :only-child

  8. Dynamic siblings selector

    general siblings :target

  9. A checking cart using siblings selector

    general siblings :target

HTML5 playground

  1. A todolist with HTML LocalStorage

    localStorage contenteditable jQuery

  2. Personnal calendar width HTML5 localstorage

    localStorage contenteditable jQuery

Because CSS2 can do it !

All these casestudies should work pretty well since Internet Explorer 8.

CSS2 Table Layout

  1. Table layout

    table table-cell

  2. Vertical centering

    table table-cell vertical-align

  3. A footer at bottom with CSS2.1 Table-row

    table table-row

  4. CSS2.1 Table-row vertical box model

    table table-row

  5. Ordering blocks with Table Layout

    table-row table-header-group table-footer-group

  6. Movable flexible boxes with CSS2 table-cell

    table table-cell :target

  7. Positioning elements with caption-side

    table caption-side

  8. Navigation with table model

    table-cell border-radius transition

  9. Who said that mobile web killed table layout ?

    table-cell media queries

CSS2 Navigation

  1. Animated dropdown (hover) menu

    :hover inline-block

  2. Icon and images with Data URI

    Data URI

  3. Navigation with table model

    table-cell border-radius transition

CSS2 Miscellaneous

  1. Using special characters

    font

  2. Icon and images with Data URI

    Data URI

  3. Table data styling

    HTML table table-layout table-caption

  4. Clearing Floats with generated content

    :after clear

  5. Tooltip with CSS2 :after

    :after

  6. Breadcrumb with generated content

    :before sibling selector

  7. Preventing overflows with max-width

    max-width

  8. Styling all item except first

    sibling selector

  9. Using sibling to style the last item

    sibling selector

Return top