Ok, so, disclaimer: I have no idea if this is best practice, and I'm sure someone smart will point out problems with it, but I just stumbled across this and thought it was a cool little hack.

The Problem:

I am designing a website with a mobile first approach that has a simple nav menu that displays inline-block on desktop and block on mobile. Simple, right?

  /* Mobile First - nav list displays block */

  nav ul li {
  display:block;
  }

/* Desktop version - nav list displays inline-block */

  @media screen and (min-width:720px) {
    nav ul li {
    display:inline-block;
    }
  }

The problem here is that IE7 (and early versions of other browsers) doesn't support media queries, so on those early browsers my simple desktop layout looks kinda... mobiley... which seems pointless when the design is so simple.

So, knowing that these browsers ignore media queires I came up with this little hack:

  /* Legacy Browser First - nav list displays inline (IE7 can't handle inline-block) */

  nav ul li {
  display:inline;
  }

/* Mobile kicks in at 1px - nav list displays block. Legacy browsers ignore these media queries */

  @media screen and (min-width:1px){
    nav ul li {
    display:block;
    }
  }

/* Desktop version - nav list displays inline-block */

  @media screen and (min-width:720px) {
    nav ul li {
    display:inline-block;
    }
  }

I'm sure if I have a bit of a search I'll find either someone else advocating this, or a good reasons why this isn't cool, but it certainly fixed my problem!

Let me know what you think in the comments.


2,421 5 8