Always Twisted

{ Slightly Bizarre Ramblings Of A Front-End Developer }

IE Fix Yo'self!

A while back I was developing a site and got to thinking about the conditional classes I was using in my HTML to allow me to specific 'fixes' for IE6,7 & 8.

It seemed a little verbose to have 3 lines at the top of my HTML document 'just in case' a visitor was using an older browser.

To the internet!

I went a googling and came across this post from @mathias - In defense of CSS hacks and was convinced that applying hacks to the CSS as and when needed would be much nicer for my development process (and sanity).

Pen it.

So I threw open a new @codepen and created - IE fix yo'self. It's a snippet for my pre-processor of choice (Sass (SCSS syntax)). I've got it set up in Coda 2 now so that I can quickly get that 'template' up and running as soon as possible and allow me to 'hack' if needed IE6 & 7.

It looks like this - 


.an-example {
  
  // put the IE9 and 'other' browser CSS declarations here  

  .lt-ie9 & { 
    
   // put the IE8 and below CSS declarations here
	 /* IE8 and below */ 
    
   // if you need IE7 as well then prefix the CSS with a *
	 /* IE7 and below */  
    
   // if you need IE6 as well then prefix the CSS with a _
	 /* IE6 */ 
      
    }
}

386'ing (not really)

Today I saw a tweet from the HTML5 boilerplate account saying they've opened a discussion about 'dropping' conditional class support for IE which reminded me of this snippet.

I think it's probably a good thing for the boilerplate to drop support for conditional classes. But hope they point developers as to the reasons why and how to 'hack' around it. Using something like the code example above.

Categories

Resources CSS LESS HTML Sass Did you like this post? Hire me.
blog comments powered by Disqus