IE6 only CSS syntax hack

Posted in development by Kris Gray on July 2nd, 2008

Update: These hacks are talked about further at this CSS hacks site, and why you should probably not use them.

I've talked about how you can use the asterisk to indicate a rule is for IE only but while doing some investigation for another issue I discovered another easy hack that could eliminate the need for things like conditional comments at all.

I was doing some investigation on transparent PNGs and had the following code

PLAIN TEXT
CSS:
  1. .bg {
  2. float: left;
  3. margin: 100px;
  4. width: 700px;
  5. height: 400px;
  6. border: 2px solid teal;
  7. background: url(alpha2.png) no-repeat;
  8. }

Live Example

This works in every browser but IE6 since it doesn't support PNG alpha channels without using the DirectX Filter property. So I'll need to turn off the background, and specify a filter property, preferably only applying to IE6. The code I ended up with was...

PLAIN TEXT
CSS:
  1. .bg {
  2. float: left;
  3. margin: 100px;
  4. width: 700px;
  5. height: 400px;
  6. border: 2px solid teal;
  7. background: url(alpha2.png) no-repeat;
  8. *-background: none;
  9. *-border: 10px solid black;
  10. *-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="alpha2.png",sizingMethod="crop");
  11. }

Live Example

The obvious extra syntax above is *- which is the hack to bypass the all the other browsers but IE 6. I'm jus ta lowely web developer not an IE/FF CSS parser expert so I'm not exactly sure why IE6 recognizes this and IE7.

Also, the asterisk isn't even necessary for this to work.

PLAIN TEXT
CSS:
  1. -background: none;

This works just as well, but I thought it prudent to add the asterisk to adhere to the hack used by the Yahoo guys, and prevent any conflicts with the browser specific properties popping up such as -moz-border-radius: 10px;.

No comments

Elegance with the Font CSS property

Posted in development by Kris Gray on July 2nd, 2008

Minor I know, but on my most recent project I decided I'd finally find out how to use this darn thing. I've always just gone with the following code.

PLAIN TEXT
CSS:
  1. P  {
  2.  
  3. font-weight: bold;
  4.  
  5. font-size: 12px;
  6.  
  7. line-height: 18px;
  8.  
  9. }

At Method the designs are typically based on a single base font, with slightly varying fonts for headers and such, so that font is defined high in the inheritance tree to avoid duplication and to enable a single place to change if necessary. Which is why its not included in the above code.

To achieve the same thing with the font property you'll use the following line.

PLAIN TEXT
CSS:
  1. P {
  2.  
  3. font: bold 12px/18px inherit;
  4.  
  5. }

We have 4 parts here, and here are each of the values for those parts.

  1. bold/normal - obviously just font-weight, but you'll need this part.
  2. 12px - just font-size, you should know what to do with this.
  3. /18px - the line-height, optional, you could omit this part if you don't care about the line height.
  4. inherit - the font family, as we specify it higher in the tree, we don't want to specify it over and over, so we'll just have CSS figure it out for us.

Update: I made a silly mistake in specifying the font as auto instead of inherit. Its since been changed, but inherit uses the previously set font, auto uses what the browser default is.

1 comment

« Previous Page