Motive [Home].Glossary.

Guides

The Motive Web Design Glossary

hack/filter

A hack is also referred to as a filter, as a hack can be used to selectively deliver (or filter) the content, presentation, or code that a browser receives.

A hack is a method of exploiting the way a web browser processes (parses) CSS instructions (rules), to control the styles a webpage receives (and in turn, the design of the page). ‘Control’ includes the ability to hide or change rules based on the browser type and/or version.

Using CSS-parsing variations to selectively deliver styles is referred to as a ‘hack’, as the behaviour(s) that enable this method are non-standard, undocumented, and vary from browser-to-browser. Aside from Internet Explorer’s conditional comments, browsers were not built to enable control of styling based on browser type or version.

Hacks are often used by a web designer/developer when a target browser’s implementation of the CSS specification is either:

Variation in CSS implementation can result in variation of the expected webpage design. Some variations may have minimal, primarily aesthetic impact, but others may ‘break’ the webpage; content may be misaligned or even hidden.

As an example, Internet Explorer 5-5.5 misinterprets the CSS1 box model: calculating padding and borders to be inside the width of an element, This results in a variation in column-widths between IE5 and IE6 that can result in overly- wide or narrow columns (depending on the browser used when designing the page). The Box Model Hack is one method of delivering different styles to each version of the IE browser version to compensate for this variation.

Hacks are essentially ‘useful software bugs’, and as such they are initially ‘found’ through trial-and-error or educated guesswork, and then require systematic testing to confirm how the hack can be triggered and the browsers that it effects.

Alternatives to hacks are to use server-side processing or (client-side) JavaScript to detect the browser type and version and then supply the appropriate styles.

Hacking strategies

“Only hack the dead.”
Ben Curtis

As a suggested rule of thumb, hacks should only be used when they exploit a browser bug in a superceded browser and would not affect a browser that correctly interprets the CSS specification. Or, to quote Ben Curtis, Only hack the dead. [1]

Internet Explorer CSS hacks

Internet Explorer (IE) deserves special mention when it comes to CSS hacks and filters. If creating a standards-compliant website using CSS to control content layout and styling, then IE is the browser most likely to cause problems—if not for the number of issues, then due to the sheer number of people using this browser (approx. 80% market-share).

The following references include methods for delivering styles only to IE (in order of recommendation) .

  1. Conditional comments: a feature proprietary to IE that uses HTML notes (comments) to show or hide code.
  2. CSS-only filters: rules conform to the CSS specification, but a browser’s interpretation of the rule is incorrect or incomplete, for example the star-HTML selector hack.
  3. Non-validating CSS: rules that do not conform to the CSS specification but have no impact on content display: the non-validating rule is only recognised by a limited number of browsers and is simply ignored by the others.

Related terms: CSS/stylesheet, client/server, validation, web browser, web standards

 

Motive Web Design Glossary Trivia