Stylizer 5 Internals

Initialization vs. CSS Reset

The Initialization feature in Stylizer is loosely related to what is known as CSS reset in the industry. The feature is called Initialization instead because the two have a different goals. The goal of CSS reset is to totally eradicate all forms of default styling from the browser. Many designers question the practicality of this, as they are then required to go back and re-add much of what was removed. The goal of Initialization is to make the CSS development process more intuitive and predictable. The CSS generated by Initialization will be reviewed here.

How to use Initialization

To add Initialization to a style sheet, simply right-click on the style sheet and choose Add Initialization. Then, a new expandable row is added to the style sheet. Inside, there are 6 options. The first 4 options define the default text settings. The next two are more complicated.

Star Position Relative

Setting most of the elements on the page to position: relative fixes a variety of problems in non-modern browsers, and makes the left, right, top and bottom CSS properties more useful. All margins and paddings are zeroed out, and the font size of 1em is set on all elements. This will cause the font size of all elements to default to the font size defined on the body element.

Here is the first rule generated:

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
    position: relative;
}

While positioning every element as relative has its benefits, there are a few kinds of elements that shouldn't use relative positioning, as handled by the next generated rule:

HTML, BODY, THEAD, TBODY, TFOOT, TR, TH, TD {
    position: static;
}

Note that the position: relative declaration isn't generated when the -everything-relative setting in Stylizer is off. The next rule contains the first 4 Initialization settings. These settings are applied to the page's Body element, which will then be inherited down through the entire page.

BODY {
    font-size: 11pt;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    line-height: 1.5;
    letter-spacing: -1px;
}

Unfortunately not all elements on the page will inherit the settings above without additional CSS. For example, heading elements and the TH element render with a bold font by default. Simply setting these elements to font-weight: normal would break the inheritance model. Ideally, the element should acquire it's font weight from it's containing element. This is a trivial task in CSS, however, inheritance doesn't work as it should in Internet Explorer 6 and 7. Fortunately, Skybound has devised a work around. Examine the code below:

H1, H2, H3, H4, H5, H6, TH {
    font-weight: inherit;
    =font-weight: expression(
    this.__FW ? this.__FW : 
    (new Function("t",
    "return (t.__FW=t.parentNode.currentStyle.fontWeight)"))(this)
);
}

All headings and the TH element have been set to inherit their font weight from their containing element. Then, in Internet Explorer 6 and 7 only (via the equal hack), a Single Execution CSS Expression is used to collect the value from the parent element, cache it, and assign it to the font weight. Subsequent executions of the expression will return the cached value, for optimal performance.

The next rule does the same thing with the 4 elements that are browsers italicize by default:

ADDRESS, CITE, DFN, VAR {
    font-style: inherit;
    =font-style: expression(
    this.__FS ? this.__FS : 
    (new Function("t", "return (t.__FS=t.parentNode.currentStyle.fontStyle)"))(this)
    );
}

Finally, the next rule does the same thing with the 10 rules that render with a different font by default:

CAPTION, CODE, KBD, PRE, SAMP, TT, INPUT, TEXTAREA, SELECT, BUTTON {
    font-family: inherit;
    =font-family: expression(
    this.__FF ? this.__FF : 
    (new Function("t", "return (t.__FF=t.parentNode.currentStyle.fontFamily)"))(this));
}

The next rule avoids an issue with older versions of Firefox, where hidden input fields are displayed rendered as a box on the screen.

INPUT[type=hidden] {
    display: none !important;
}

Table heading elements center their content by default. The next rule causes these elements to inherit their content alignment setting from the containing element.

TH {
    text-align: inherit;
}

Fieldset elements as well as images placed inside anchors are rendered with unattractive and undesirable borders by default. The next rule eliminates that problem:

FIELDSET, A IMG {
    border: 0;
}

Things you need to know

• Only include Initialization once per web site, not on every style sheet.
• Initialization should be added at the beginning of the development process. In general, it should not be added to an already existing site, as it would likely create more problems than it would solve.
• Setting -everything-relative to on may cause some third party widgets and interface libraries to render improperly. A quick fix for this problem would be to wrap the widget in a container (if possible), and create a rule in the style that looks like this: .container * { position: static; }