SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru worchyld's Avatar
    Join Date
    Jul 2003
    Newcastle upon Tyne
    0 Post(s)
    0 Thread(s)

    High-pass filters, what are they and why should I care?

    For many months I've been writing CSS with very few hacks, I've never seen any major problems except the famous 3pixel jog in IE, and the use of the * hack to make rules work in IE only.

    Strangely, I've never seen the box hack problem except in really old browsers, but I was under the impression that using "@import" would stop old browsers from reading the css file and just present a plain vanilla html page (degrading).

    But, I've been reading up on high-pass filters, mid-pass filters and just don't understand what they are and why they should be used. I don't have old browsers on my machine, I don't have a mac with ie5.x, nor do I have a legacy machine or Konqueror -- all I have is the latest version of IE and Firefox, and opera on the side just for testing.

    The thing that confuses me is that I thought CSS was meant to be friendly to major browsers, and its not meant to be browser-specific, so, don't using hacks (and thus making css files for specific browsers) make the whole point of using stylesheets pointless?

    The Web Standards Project says "to hell with bad browsers", does this mean you should:

    a) Forget about css hacks like box model, high-pass, low-pass, littering widths with backslashes \ and inherit-width's and only use limited css hacks, because well all browsers are upgrading and leave the people with bad browsers behind.

    b) Always use the high-pass filter when including .css files (which restricts the css file to the most modern browsers) and say "to hell" with the older browsers. Shouldn't I be giving them a message to upgrade their browser?

    c) Use minimal hacks only when necessary, not just because you can, but to solve a specific problem. IE: * hacks, box model but no littering of wi\dths and fake css files all over the place?

    d) Use every CSS hack in the book just so it can work on browser X?

    e) Use every CSS hack in the book, and test in as many browsers as possible?

    Which way to turn?


  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    0 Post(s)
    0 Thread(s)
    CSS is meant to be an unambiguous standard that every browser's rendering engine should comply with. This is the real world, however, and things aren't quite as good as that.

    Implementing CSS2 is a major task. Every browser gets it wrong somewhere, and some browsers get a lot of it wrong. There's nothing we can do about that, except not using the bad browsers and maybe encourage our friends to choose a better browser, too. For the foreseeable future, there'll be millions of people using non-compliant browsers, though.

    Hacks are (mostly) evil by nature, at least those that are not targeting dead browsers. But sometimes you have to choose: hacks or 'designed for browser X'.

    I develop according to standards, checking in a good browser along the way. Then I verify that it works in other good browsers. Finally, I take a deep breath and test it in Internet Explorer, and try to work out the grossest inconsistencies. I either use the Tan hack (star html) or a separate style sheet linked from within a conditional comment.

    For hopelessly antiquated browsers with a small-enough market share, I'll serve unstyled content. They're not worth the effort, and that effort would probably ruin it for the good browsers anyway. The important thing, after all, is that the content is accessible. (YMMV if you run a site about graphic design etc.)
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    I would love to use just valid css and ignore the differences that browsers make but as Tommy said we live in the real world and nothing is ever perfect.

    Most of my clients complain if the design is 1 pixel out in the browser of their choice and all they are concerned with is that it looks right. While I can educate them to some degree and explain the reasons for it, in the end they more often than not say -yes but its 1 pixel out so fix it

    However you should have a strategy for dealing with browsers and the hacks that you are going to use and this becomes part of the design process and something you can't really ignore if you are going to do any real work in the corporate world (i.e. get paid for it).

    First decide what browsers you want to support and acknowledge this with your client before you write a line of code. I've seen so many posts where designers have designed sites and then posted to say "I designed this site for a client but he says it doesn't display in his ie5 mac - can you fix it".

    The first mistake was not identifying what browers to support. (If a client wants ie5mac support then I will do it but charge at least three times as much as so much time is involved.)

    Secondly, if you are using hacks then make sure that the hacks themselves are in fact valid css and target the behaviour only in dead browsers as mentioned by Tommy already. Then you know that the hack is 100% safe.

    Conditional comments are a good way to separate versions of ie but the star selector hack is also now quite safe as it avoids ie7.

    I will use minimal hacks when I know that the behaviour is incorrect and it is not my fault that the display is not right. However a lot of users will use hacks when there is no need because they don't understand css well enough. A prime example is where designers have put in loads of negative margins on elements to line them up not knowing that the cause of the mis-alignment is the default margins and padding applied to elements in varying degrees by different browers.

    Know your css first
    Select your audience (which browers to target)
    If its not your fault then use a hack if absolutely necessary.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts