@media 2006: The Wonderful World of Bugs by Andy Budd

June 16 , 2006

Speaker

Andy Budd

Hacks

How many people feel they use too many hacks?
and how many people feel that they use too few?

We’re contending with too many bugs.
How hacks evolve and appropriate usage and hacks.
The term hack ....
hacks have been given a bad name...literally
There is a better way of doing it but because of timelines
And often there is no way around the problem
It has a negative connotation

Filter is fairly value agnostic so it doesn’t have the same connotation
Wouldn’t be here today if it wasn’t for CSS hacks
Hacks are either good or bad

Tantek model hack was integral to the development of CSS

We all know browsers are buggy and fix the problem
Sadly, hacks have become synonymous with CSS

It honestly doesn’t have to be this way
Hacks to a minimum
6 easy steps

Bugs

One of the reasons i.e. is a very buggy browser
These other aren’t a major browser
The key thing is browsers are buggy
Bugs come from lots of places


  • syntactic errors
  • specificity clashes
  • overly complicated code: techniques for layout for massive divs
  • The main source is the understanding of CSS. Most people are self-taught so you have a model of how it should work. It’s about 95% there.
  • in complete understanding of the CSS specification
  • Rather than accepting people’s own inexperience they blame the bugs

Andy’s first law of bug fixing

...keep it simple (stupid)

What is keeping your code simple?

We are working the limitations of the browser don’t be afraid to keep your design simple. I know large companies have designers give the photoshop files over to the
developers. To know your tools. Designers need to know what is possible and
what is not possible

Andy’s second law of bug fixing...

...always assume it’s your fault

By assuming you were always wrong.
And until your absolutely sure it isn’t your fault.

Andy’s third law of bug fixing...

...prevention is better than cure. If you’ve got a project is buggy try something else. Don’t waste the whole day.

Now there are all these fancy hacks or these wonderful hacks
Don’t specify border and padding on an element that has width

Andy’s fourth law of bug fixing...

...offense is the best form of defense

display: inline in the code to fix the problem outright.

A lot of the hacks are the ones you see. To add layout to elements in ie
is to give it a position, and height.
Fix the bug before it is one

Andy’s fifth law of bug fixing...

...isolate the problem

comment your typography

start hacking away your css files

start testing alternative layouts

Andy’s sixth law of bug fixing...

....use hacks only as last resort

Using hacks sensibly

  • hacks tat rely on parsing bugs, one browser will understand and one that won’t channel selector or id selector
  • hacks that rely on unsupported or misinterpreted CSS

Good hacks...

  • are valid...
  • Only target older browsers, don’t find hacks for ie 7 its mad and its wrong. IE 6 i is because its older. There really shouldn’t be a need to hack.
  • Are ugly? When you are checking through you can see the hack. What’s more important.

Responsible hacking

  • use hacks sparingly
  • Only add a small number of hacks to your main CSS
  • Better to filter hacks intohseparate stylesheets
  • Use tantek’s high pass filter
  • Always comment your hacks, you won’t remember 6 months time from now. More commenting

About

I'm living in San Francisco, Ca and partnered with the guys at Nclud. Constantly, trying to learn new things, and on the way I get to meet some amazing people with my camera by my side. XOXO!

on Flickr