Skip to main content

CSS Hacks = Lying

There are many similarities between using CSS hacks and lying.

First of all, what is a CSS hack? A CSS hack is a means by which you can get different browsers and browser versions to see and render your stylesheets differently so you can give them different directions (ironically though it's normally done to achieve pixel perfect cross platform web pages). They are also mostly done for Internet Explorer (which for some reason refused to implement standards based CSS until recently).

CSS hacks mostly exploit bugs in a particular browser such as the Star HTML hack. This hack was used to get code to run in IE6 and lower in a different manner than other browsers.

IE also introduced conditional comments which allow you to add an extra stylesheet to "fix" any CSS issues. This is not technically a hack, but it does require you to write and maintain extra CSS.

There are also more subtle types of hacks to make up for some things that are missing in IE like the IE min-height hack (which adds min-height style functionality to IE).

So why is using a CSS hack like lying?

Well, when you tell a lie not only are you telling an untruth, but you are essentially telling one person a different story than someone else. This is not admirable behaviour, but you can probably get away with it, once or twice. However as you have no control (mostly) which clients can see your site this is akin to lying to someone whilst there are other people in the same room. After telling the lie you then have to sneak over to all the other people and tell them a story and hope the first person doesn't cotton on.

Often with lying (as with CSS hacks) telling one lie requires you to tell another one (and to keep track of all the lies you tell). You then end up with a snowball effect wherein you lose track of what is true and what is not and you end up with more code than you ever needed.

Why use CSS hacks in the first place?

Because not only do these little CSS browser differences open hacks, they often are the cause for rendering differences between the browsers. There is a temptation to therefore use other hacks to fix these differences.

So there is often a judgement call to be made as to how far you can push a hack, and pile hack upon hack. At some stage compromises need to be made in the design.

So basically, I am not saying one should never lie, in web development (like in life) there are times when you need to use hacks and there are times when you need to lie. Just be careful not to do it too often (and document it carefully).

One more thing, if you are going to be using a lot of JavaScript to move your page elements around, you need to be doubly careful about using CSS hacks as there are some browser differences that don't reveal themselves when a page is static (but do so when a page is dynamic).

Comments

Very informative post, posts like this really informs people. Thanks for sharing and looking forward for your next post.

-richard
seo perth said…
It sounds useful though. CSS hacking allows you to optimize for a particular browser based.

Popular posts from this blog

Master of my domain

Hi All, I just got myself a new domain ( http://www.skuunk.com ). The reason is that Blogspot.com is offering cheap domain via GoDaddy.com and I thought after having this nickname for nigh on 10 years it was time to buy the domain before someone else did (also I read somewhere that using blogspot.com in your domain is the equivalent of an aol.com or hotmail.com email address...shudder...). Of course I forgot that I would have to re-register my blog everywhere (which is taking ages) not to mention set up all my stats stuff again. *sigh*. It's a blogger's life... In any case, don't forget to bookmark the new address and to vote me up on Technorati !

Elixir - destructuring, function overloading and pattern matching

Why am I covering 3 Elixir topics at once? Well, perhaps it is to show you how the three are used together. Individually, any of these 3 are interesting, but combined, they provide you with a means of essentially getting rid of conditionals and spaghetti logic. Consider the following function. def greet_beatle(person) do case person.first_name do "John" -> "Hello John." "Paul" -> "Good day Paul." "George" -> "Georgie boy, how you doing?" "Ringo" -> "What a drummer!" _-> "You are not a Beatle, #{person.first_name}" end end Yeah, it basically works, but there is a big old case statement in there. If you wanted to do something more as well depending on the person, you could easily end up with some spaghetti logic. Let's see how we can simplify this a little. def greet_beatle(%{first_name: first_name}) do case first_name d

Speeding up RSpec

So today I have been looking into getting our enormous battery of tests to run faster. I have yet to find anything that works for Cucumber, but I did find an interesting way to speed up RSpec which is detailed here. https://makandracards.com/makandra/950-speed-up-rspec-by-deferring-garbage-collection Basically, it seems that by not collecting garbage too frequently, you can make your tests run much faster (at the expense of memory management of course). We observed a 30% reduction in the time it takes to run an RSpec test suite. I did try to implement this on Cucumber, however because we need to store much more in memory to set up and tear down our objects, it meant that I kept running out of memory when I wasn't using the default Garbage Collection and the tests took even longer (so, buyer beware). I suppose if you had a small set of features though you might see some benefit.