Targeting Browsers (Namely the Different Versions of IE) with Only CSS

Cyclonic — Sun, 30 Aug 2009 19:07:28 +0000

Internet Explorer 6 has been in use for a whopping eight years, during which time the internet has grown both in size and in usability. So here we are, with 25% of people still using IE6 which hardly even begins to support modern CSS techniques.

For a long time, designers have found different ways to target IE6 and its slightly improved (but still seriously lacking) predecessor, IE7, and feed them different CSS to fix any bugs that the browsers have with normal, up-to-date styling. A popular trick is to use IE’s conditional comments to give IE6 and/or IE7 a different stylesheet. This works fine, except that it means that you need to make two stylesheets for your designs. There is a way that is less widely known that exploits the star-html hack combined with CSS 2.1 selectors to differentiate between IE6 and IE7. It looks like this:


element {
/* Standards-Compliant Properties Here
}

* html element {
/* IE6 Properties Here
}

*+html element {
/* IE7 Properties Here
}

Basically, IE6 and IE7 both think that there is an element above the html element, which is nonexistent in other browsers. So the * html selector is used to target IE6 and 7. To single out IE7, a CSS 2.1 selector (*+html) which is unsupported by IE6 can be used.

The CSS-only technique is a lot less of a pain than using a separate ie6.css file for all of your hacks. Anyway, that’s just a helpful hint I just figured out.

Web Design From Scratch’s Anti-Spam Method

Cyclonic — Mon, 27 Jul 2009 04:30:03 +0000

I just wrote a post about how to make sure that someone using your contact form is human, which utilized a validation image. While this is effective, it requires the user to spend an annoying 10 seconds deciphering the text and typing it in. Web Design From Scratch has a very clever solution.

The trick is to use javascript to make sure that the user is interacting with the form, by waiting for the user to focus or click on the form itself. Once it sees that the form has been interacted with in a human-like way, it sets a flag in a hidden input field. If the person browsing is not using javascript, then a

Cyclonic Studios » Web

Targeting Browsers (Namely the Different Versions of IE) with Only CSS

Web Design From Scratch’s Anti-Spam Method