Font-Size Testing

I have noticed that a lot of CSS Frameworks specify odd percentage amounts for various tags. For example, in my base.css, I set the H tags to these values (I believe I got them from either Tripoli or YUI):

h1 {
	font-size: 138.5%;
}

h2 {
	font-size: 123.1%;
}

h3 {
	font-size: 108%;
}

Many times, the only explanation give is that after much testing, we determined that these were the optimal values for all browsers. I have always wanted to know a little more than that, so I created a test page that generates elements at a variety of font-sizes after applying reset.css. Using this tool, I have been checking different fonts on different browsers at a variety of sizes. I have not come to any conclusions yet, but you may find it valuable.

Font Size Test

It is a little slow, as I use JavaScript instead of a server-side language to insert the HTML elements, but it does the trick. I have been looking at the page in several browsers (FF2, IE 6 & 7, Opera 9, and Safari 2), then changing the zoom and/or relative font-size to see how well different percentages scale. Let me know if you discovery anything interesting ^_^.

Using CSS Frameworks to Remove X-Browser Variations

There is a lot of hype on the web right now around CSS Frameworks; a lot like there used to be around JavaScript Frameworks, before they became so popular. It is important to understand what they are and why they will (or will not) be helpful to you.

What is a CSS Framework

“[A CSS Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules ...

YUI JavaScript and CSS Compressor

I finally had some time/need to explore a new JavaScript compressor and had been hearing good things about the YUI compressor, so I took a look at it. The YUI compressor not only compresses (slightly better than JSMin) but claims to do some safe obfuscation. Altogether it claims to save an additional 18% over JSMin (5-10% over rhino), which is about what I experienced in my testing today. That is a substantial savings ...

Two Helpful IE Hacks

For a change of pace, below is a short article about CSS.

* (star) or Holly Hack

In most browsers the CSS root tag is html, so you might write:
html body { font-size: 12px; }
In, IE (version 6 and lower) Holly (Bergevin, i think), found that the DOM actually starts with *, so you might write:
* html body { font-size: 12px; }
Because only IE 6 and lower understands the ...

Specificity

Specificity is measurement of the weight associated with a CSS rule. This is one of the features that makes cascading stylesheets so powerful. If you find yourself attaching classes and not seeing the styles applied, then it is probably a specificity issue. In short, styles applied to id attributes weigh more than those applied to class attributes, which weigh more than those applied to tags. Specificity becomes complicated when considering CSS rules with multiple id, ...

Frameworks For Designers

A List Apart Magazine recently posted an article on Frameworks. This mostly talks about CSS Frameworks, but does a great job describing Frameworks as a concept.

frameworksfordesigners

IE6 Opacity Issue

Today, I experimented with the YUI Animation widget and experienced difficulty getting the opacity style to apply correctly in IE 6. It was fine in IE 7, FireFox, and Opera, but IE 6 ignored the opacity style changes. A quick web search revealed that in IE 6 opaque elements need a height and width, otherwise the opacity style will be ignored.

IE6 Opacity Filter Caveat