Now that we have web fonts available, we can avoid image replacement and apply virtually any font to a plain HTML with a little help of @font-face rule.

Another problem with HTML text is how lines of text break. If you aim to create a particular rhythm to your copy, you’d probably want to control the length of each line. Naturally, you can use <br /> to push the text into another line.

However, to enable natural flow of text on mobile screens which are narrower than the desktop horizontal text block offset, you simply add @media query to your CSS:

@media (max-width: 480px) {
    .your-particular-selector br { display:  none; }
}

Please note that you should leave an extra space behind each <br />. This way when it’s removed with CSS for mobile devices, you won’t end up with weird results, for instance Lorem ipsumdolor sit amet,consectetur:

Lorem ipsum<br /> dolor sit amet,<br /> consectetur...

img { -ms-interpolation-mode: bicubic; }

Handle with care.

The trouble is — designers and developers don’t settle for current minimum, we are always into something new. So, by the time a giant vendor locks the feature list, a more flexible and agile competition goes miles away.

In the era of rounded corners/borders and transparency made possible purely with CSS, IE team missed to implement both, or at least in the form that wouldn’t require separate style-sheets files to conform to W3C guidelines.

I checked a few dozens of CSS-based web sites, and I’m not even sure anymore if everything works because developers payed special attention to IE 6 and IE 7, or is it because IE 8 is mature enough to render CSS layouts properly.

What works, what isn’t working

PNGs work without hacking. Rounded corners with CSS not. Text shadow — no. Alpha transparency is still possible only with proprietary filter property, for instance filter: alpha(opacity=10);.

Naturally, if you want your CSS to validate — this rule has to be extracted in separate file, preferably with conditional comments.

The old typeface order bug is still present, and easy font embedding with @font-face doesn’t work either, so if you prefer this method, read how to do it in IE.

This is the fourth part of the series, “Environmental friendly CSS”

In the previous episodes we’ve created a creative/technical brief, mocked-up design in Photoshop and decided on proper markup for the category cloud. Finally, we turn our design into web page element with some nifty CSS.

For those of you who better understand from live examples, here’s a little treat for you. If you’re beginner in CSS, read on.

From the outside to the inside

It is common sense to most of us, but nevertheless here’s an advice — don’t get into details too early, because you will have to go forth and back in the code too often.

Let’s pull the markup on stage:

<div id="categories">
	<h4>Most popular joke types and categories</h4>
	<ul>
		<li><a href="#">Political jokes</a></li>
		<li><a href="#">Professional humor</a></li>
		<li><a href="#">Mathematical jokes</a></li>
		<li><a href="#">Ethnic jokes</a></li>
		<li><a href="#">British tell jokes</a></li>
		<li><a href="#">Self-deprecating humor</a></li>
		<li><a href="#">Blonde jokes</a></li>
		<li><a href="#">Redneck jokes</a></li>
	</ul>
</div>

First set-up the main frame: set the dimensions and positioning of the <div id="categories">. The width is fixed, but we let the height stay flexible, so if more content gets in there in the future, the box won’t break.

If you haven’t done so yet, Download .PSD file and open it with Photoshop.

The rounded box has a width of 300px, so here the CSS goes:

#categories { width: 300px; }

The area below links to the bottom of the lowest character shadow is approximatelly 275px high. We add bottom padding, so there is always plenty of room for the comic dialog, no matter how many links is displayed:

#categories {
    width: 300px;
    padding-bottom: 275px;
}

Next, slice the top part of the box, name it box-top.gif and Save it in the same folder where the CSS file resides. It should look something like this:

Now add background to the box:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
}

Detail 1: the heading

We are not going to use the copy in the markup. Instead, there is a dialog bubble which is supposed to do the communication.

You’ve noticed that the bubble (i.e. h4) is off-set to the right. We have also set fixed width to <div id="categories">. With position: absolute we’re going to shift the bubble outside the box. It will not break layout because absolute positioned elements are out of the document flow, which means they don’t affect their surrounding elements.

We already made some room for the dialog with bottom padding. Now we only have to add one more rule to <div id="categories"> so we can position h4 relatively to the container:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

Remember, we left 275 pixels in height, so we use it to dimension the h4. Width is set to 100% by default, since h4 is a block level element, but we need to push it outside the box, so we also need to increase its default with from 300 pixels (100%) to 350 pixels.

Finally, we use bottom and left CSS properties to set coordinates.

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
}

Now, go back to Photoshop and slice the bottom of the box and the dialog. You should get 350 x 275 pixels .GIF. Name it — you guessed it — box-bottom.gif and Save it in the same folder where the CSS file resides:

Add background to CSS:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
}

And shift the remaining text to the left, by text-indent:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

So far, so good: only the category links have been left to be done.

Detail 2: list of categories

At the beginning of the list styling, remove bullets and the default display behavior:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories li {
    list-style: none;
    display: inline;
}

Then we tell text to go into center, add some padding to ul element and remove possibly inherited margins:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories ul {
    text-align: center;
    padding: 1em 1.5em;
    margin: 0;
}

#categories li {
    list-style: none;
    display: inline;
}

And FINALLY add Comic Sans font to links:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories ul {
    text-align: center;
    padding: 1em 1.5em;
    margin: 0;
}

#categories li {
    list-style: none;
    display: inline;
}

#categories li a {
    font-family: 'Comic Sans MS', sans-serif;
    text-decoration: none;
    color: #fff;
}

Links are now perhaps too crowded, so we tweak them with some right and left padding. Also don’t forget :hover and :focus states:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories ul {
    text-align: center;
    padding: 1em 1.5em;
    margin: 0;
}

#categories li {
    list-style: none;
    display: inline;
}

#categories li a {
    font-family: 'Comic Sans MS', sans-serif;
    text-decoration: none;
    color: #fff;
    padding: 0 .2em;
        /* equals to 2px if calculated font-size is 10px */
}

#categories li a:hover,
#categories li a:focus {
    text-decoration: underline;
}

Excellent! Here is the final working example. Go ahead, resize the text in your browser, or add more items — it won’t break. Everything is done except…

Different font sizes?

We miss one more thing — the different font sizes. But, it’s not done in CSS file, but with some inline HTML attributes. Basically, it all comes down to two approaches:

• a set of distinctive class names or
• inline styles.

Either way, you’ll have to do it server side or with JavaScript (both methods coming-up early in 2009.).

What have we learned?

With lean markup, but smart CSS, almost any design can be sliced to a high quality web interface. Not only that — we also managed to make it bullet-proof, so the various scenarios (text resize and different amounts of content) don’t break the layout.

This is the third part of the series, “Environmental friendly CSS”

In the previous episodes we’ve created a creative/technical brief and then mocked-up design in Photoshop. The next step in a process is creating solid XHTML markup. Let’s open it up with a question:

How to markup category cloud?

There are two simple approaches that usually comes to mind at first: a paragraph and an unordered list.

If we use paragraph with links, we wouldn’t probably miss it in terms of the default presentation across the range of User Agents. The thing is — if one is marking-up a ‘cloud’, it’s natural that all the links are inline, one after another.

— Let me think about it! Yea, I will just set text-alignment: center to that paragraph and I’m done. Great!

<div id="category-cloud">
	<h4>Most popular joke types and categories</h4>
	<p>
		<a href="#">Political jokes</a>
		<a href="#">Professional humor</a>
		<a href="#">Mathematical jokes</a>
		<a href="#">Ethnic jokes</a>
		<a href="#">British tell jokes</a>
		<a href="#">Self-deprecating humor</a>
		<a href="#">Blonde jokes</a>
		<a href="#">Redneck jokes</a>
	</p>
</div>

Not great! The above code is wrong. The ‘cloud’ is a visual cue, not the structural element. The category cloud is — in its essence — a list of categories, so the more suitable XHTML element would be unordered list.

It’s not a cloud, it’s a list

Cloud as typography or XHTML element doesn’t exist. Tag or category cloud is a visual representation of the list of categories. So let’s try semantically correct markup — an unordered list.

<div id="categories">
	<h4>Most popular joke types and categories</h4>
	<ul>
		<li><a href="#">Political jokes</a></li>
		<li><a href="#">Professional humor</a></li>
		<li><a href="#">Mathematical jokes</a></li>
		<li><a href="#">Ethnic jokes</a></li>
		<li><a href="#">British tell jokes</a></li>
		<li><a href="#">Self-deprecating humor</a></li>
		<li><a href="#">Blonde jokes</a></li>
		<li><a href="#">Redneck jokes</a></li>
	</ul>
</div>

Some novice CSS developers in the past argued that they were having troubles with list-items in tag clouds. In the last article (coming up next week) we will explain it throughout. But, it’s very important to learn how to shift from visual/CSS mindset to semantic/contextual XHTML mindset.

A little practice will get you there

When deciding on the XHTML structure for any given element, try to ignore the design at first. You will easily modify markup later if you find no other way to accomplish layout only with CSS.

Instead, dive-in under the surface and check the bare-naked content and context to decide what markup should do the job.

If creating XHTML snippets is a second nature to you, please share how do you fight your thoughts about how it’s going to look when choosing appropriate markup?

Buckle up, ‘cause we are introducing Environmental friendly CSS, a four article series, that aims to shift any novice and CSS expert alike — into ecologically aware client-side developer. The series is based on a real-world web site, developed as we speak.

The first article is expected this Thursday morning CET, and the others over the next three weeks. Here is the series overview:

1. Prepare your content and interface copy

   Think about the context, the content, the real users, accessibility and search engines.

2. Visually design information elements and user interface

   Go wild in your graphic editor to lead the eyes around the layout.

3. Mark it up!

   Create sound and solid markup, with accessibility in mind — without looking into the visual mockup.

4. Create bullet-proof, eco-friendly CSS

   Use CSS skills to recycle accessibility-related markup into visually attractive hints.

For all the fans out there: we are going to disclosure Director’s Special at the end of the series.

If labels are properly set, user agents attach a behavior: when a label is clicked with a mouse — in most browsers — the related field gains focus. The behavior is quite useful, since it gives you possibilities to increase hit area for a field.

Gaining field focus works much like tabbing with a keyboard, but there are exceptions. When a form button (for example Submit) gains focus via keyboard navigation, naturally it is selected and ready to be stroked by Enter. But, if there’s a label assigned to it, hitting the label will also submit the form automatically.

There is many possibilities. One of them is hiding form button with CSS and style label more freely, since it is a plain inline element. Design/CSS-wise, think of it like a span but with an extra behavior built in.

<label for="send"
	style="background-image: url(send-button.gif);">
	<input type="submit" id="send" value="Send"
		style="position: absolute; left: -9999px;" />
</label>

You can nest fields inside labels and increase hit area, which many people do by default with checkboxes and radio buttons.

<label for="sure">
	<input type="checkbox" value="1" id="sure" name="sure" />
	Are you sure?
</label>

Another interesting application is adding multiple labels for the same field — for instance, one right next to checkbox, and another one in a supporting paragraph where you can contextually anchor keywords directly to that checkbox.

<p>If you are absolutely sure, then
	<label for="sure">confirm it</label> in the form.</p>

<label for="sure">
	<input type="checkbox" value="1" id="sure" name="sure" />
	Are you sure?
</label>

Last, but not least, labels provide valuable connection between two elements, which gives you opportunity for a unique interface designs.

CSS level: beginner/intermediate

Background-position CSS property allows us to position background image starting from top left corner of a HTML element.

We are able to position either with some numeric values such as 100% and10px, or with keywords such as left and bottom. Either way, you always have to offset it from the top left corner.

If the design dictates positioning background image to bottom right corner, obviously we would use background-position: 100% 100%;

But sometimes we need an offset from the bottom right. And if you also have expanding box, it doesn’t come by default in CSS.

We are all aware that fixed height layouts are matter of history, but bare with me for a moment — with fixed width/height layouts background positioning is fairly easy. You always know where the background image will end, thus you can make it a little bit smaller in size than the element itself.

For example: if a paragraph is 300px wide, we can set the background-image in a way to leave a 10px wide empty area on the right.

First, let’s see the rule:

p {
    width: 260px;
    height: 260px;
    padding: 20px;
    background: url(image.gif) no-repeat 0 0;
}

Figure 1. Background image is cropped to 290 x 290px

In this example, if we crop the background image to be 290 x 290px, you can easily achieve an effect of background image being 10px shorter and 10px thiner than the paragraph.

I agree, it’s no brainer. But keep reading.

Flexible is new fixed

With liquid or flexible layouts, dimensions of HTML elements are variable (different screen resolutions, window resizing, etc.). Say we have:

p {
    width: 100%;
    height: 100%;
    background: url(image.gif) no-repeat 100% 100%;
}

I’ve seen developers reach for another element to achieve the offset. And really, if you’re in a hurry, add a child element, offset it with a margin, and then paste the background to that inner element.

Naturally, there is a better way.

Open the background image with Photoshop, and choose Image → Canvas Size (or Command/Ctrl + Alt/Option + C)

Figure 2. Resizing canvas

Enter the values as shown on the Figure 2. (tip: if you check Relative, you can use mathematical operands). When you’re done, hit OK.

You should have some empty space on the right and bottom.

Figure 3. Empty space after Canvas Resize

Save image as a GIF with transparency on and voilá – it’s always shifted 10px from the bottom and 10px from the right (resize your browser window or increase font size when you are checking the example).

At first, you might wonder where you should use this technique, but once you get your fingers on flexible layouts, you might find this useful.

Global line height is usually set to html or body element. In this quick lesson, we’ll use a line height of 1.5.

* { margin: 0; padding: 0; }
html { font: 62.5%/1.5 "Lucida Grande", Verdana, sans-serif; }

You’ll also notice that we reset margins and paddings globally with the universal selector.

Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to element’s line height ensures correct vertical rhythm.

ul, ol, dl, p { margin-bottom: 1.5em; font-size: 1.2em; }

Most often—for various reasons—you don’t want to set font size of a block-level element that by default must have block-level children, like for instance unordered list must have. You would instead specify font size for list items, definition terms and definition descriptions:

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl, p { margin-bottom: 1.5em; }

Now we only have to redefine bottom margin of lists to 1.8em. It is calculated by simply multiplying element’s line-height by child element’s font size (1.5 × 1.2em = 1.8em)

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl { margin-bottom: 1.8em; }
p { margin-bottom: 1.5em; }

Use the same principle when dealing with other elements: headings, tables etc., and within a minutes a sound vertical spacing will be accomplished. Still hungry? Head on to Compose to a Vertical Rhythm.

Addenum

This article is also available in Russian. Big thanks goes to Errant.

The following markup:

<div class="wrapper">
    <div class="inner">
    ... some content goes here...
    </div>
</div>

and the corresponding CSS rules:

.wrapper { float: left; }
.inner { float: left; margin-bottom: 30px; }

should make .wrapper 30 pixels higher than .inner, right?

In IE 7 this is not a case. Instead, to achieve the same effect, one should set bottom padding at the parent element:

.wrapper { float: left; padding-bottom: 30px; }
.inner { float: left; }

Yes, they fixed float doubled margin bug, but brought us another one of the same sort. See demo page.

For those in a hurry, go straight to Fancy checkboxes demo page. Also simple jQuery version available.

The structure

Each radio button and/or checkbox input element should be surrounded with <label> tags. Here’s the example:

<label class="label_check" for="sample-check">
    <input name="sample-check" id="sample-check" value="1" type="checkbox" />
    Sample Label
</label>

<label class="label_radio" for="sample-radio">
    <input name="sample-radio" id="sample-radio" value="1" type="radio" />
    Sample Label
</label>

The presentation

We are going to remove inputs far away to the left and instead place a background image to each label. Radios and checkboxes will be toggled, because clicking/spacepressing the corresponding label toggles them on or off.

See the CSS sample:

.has-js .label_check,
.has-js .label_radio { padding-left: 34px; }
.has-js .label_radio { background: url(radio-off.png) no-repeat; }
.has-js .label_check { background: url(check-off.png) no-repeat; }
.has-js label.c_on { background: url(check-on.png) no-repeat; }
.has-js label.r_on { background: url(radio-on.png) no-repeat; }
.has-js .label_check input,
.has-js .label_radio input { position: absolute; left: -9999px; }

The behavior

And finally, some JavaScript trickery to handle all the className switching. In Safari, labels are not clickable, hence a few extra Safari speciffic lines.

var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {

    var body = gebtn(d,'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';

    if (!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            l.onclick = check_it;
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.click();
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.click();
    };
};

Also, be sure to check the previous post about how to preload all those interface graphics.

Demo

Fancy checkboxes demo page

Most of the time, pixy’s workaround with a single image, which is positioned accordingly will do, but sometimes for whatever reason, we need completely separate images. Preloading background images with CSS is so cheap trick, that I sometimes laugh at myself how could I forget about it.

a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }

Update

The code example was rather generic, now it’s altered for those who are in a hurry : ) and have no time to read through valuable discussion in the comments.

Conditional Comments

The alpha and the omega of IE hacking are IE’s conditional comments. They are IE-only feature and they’re not supported by any other browser. For other browsers they are just an ordinary comments and therefor, they are safe to use.

The typical usage is as follows:

<!--[if IE]>
    do something
<![endif]-->

Untill now I used to write something like above, which applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, but since the latest announcements, I started applying the following condition:

<!--[if lte IE 6]>
    do something
<![endif]-->

which means: “if this is Internet Explorer less than or equal to version 6, do something”. My thoughts are—if they keep conditional comments feature in IE7, then the browser will ignore this, since it’s version designation number is 7. On the other hand, if they abandon that feature, the browser will assume that this is just another HTML comment.

When I work on a layout I usually place all hacks for some selector immediately after its’ default rule. This way, changes can be done quickly and without searching for the corresponding hack in other places.

After I’m done with layout, I like to go through all of the CSS files once again and optimize everything from short-hand properties to assigning the same rule for multiple selectors. At that point all hacks are removed to separate file(s), so the main CSS is clean and tidy. This separate file is then called in the header section of a file within conditional comments.

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie_hacks.css" />
<![endif]-->

While still in main CSS file, hacked selectors start with * html. This is known as the ‘star-HTML’ hack. Standard compliant browsers ignore this selector, because there’s actually no elements above html in a document tree. Luckily, IE doesn’t know that and we’re safe to use this flaw when applying IE specific hacks. Once we move hacks to a separate file and call it in a document with conditional comments, it’s safe to remove the * html part.

Further on in the text, assume that we are dealing with separate file with IE hacks only.

Backslash hack for IE 5.x broken box model

A combination of width and padding on the same element is very well known to produce broken layouts in IE 5.x. Box model hack is widely used and can be stripped down to a few lines.

someselector {
    padding: 10px;
    width: 200px;
    w\idth: 180px;
    height: 200px;
    heigh\t: 180px;
}

This will give as an element which is 200px wide, 200px high and with 10px paddings in both IE 5.x and IE 6.

If floated and with margin, display: inline

Everything that is floated and has any margin larger than zero, should have additional rule display: inline;. Simple as that. More about the ‘Holly hacks’ read at P.I.E..

Overflow problems

Italic font style in any IE version will enlarge parent element horizontally. It’s usually just a few pixels, but it could be nasty and ugly few pixels. Simple solution is in the following rule:

someselector {
    overflow-x: hidden;
}

I tend to apply that rule to every major column in a layout, especially in the period right after site launch. For the first week or two, when the large amounts of content are added and removed day and night by the site’s editors, it’s better to prevent content slips out of it’s boxes. A small digression—editors are sometimes inexperienced, but it’s not their job to know every HTML element and that’s why adequate support in their few first attempts is essential. There’s no worst for the guy who manage the content on his company’s brand new, ultra-modern and expensive web site, than the massive layout breakage when the site is still fresh and under the eyes of CEO. It’s our responsibility to keep his confidence intact.

Font size in tables in IE 5.x

Font rules set in html or body element are ignored in tables in case of IE 5.x. Again, simple addition will take care of it.

body {
    font-size: 62.5%;
}
table {
    font-size: 1em;
}

Later in a process, you can change rules according to a particular table’s needs.

To conclude…

CSS hacks are necessary evil, but with defensive approach, we can make sure they safely co-exist with default CSS rules, even in future browsers. What are your thoughts?

Related Reading

• Position Is Everything
• Tantek’s Box Model Hack
• Avoiding Tantek’s “Box Model Hack”
• Strategies for Long-Term CSS Hack Management
• CSS hacks | Stylegala

input, textarea {
    background: url(drop_shadow_image.gif) no-repeat 0 0;
}

You might want to add class name for type="text" fields, so they are differentiated from checkboxes, radios or submit buttons (they are all input elements):

<input type="text" class="input_text" id="..." name="..." />

and change CSS:

.input_text, textarea {
    background: url(drop_shadow_image.gif) no-repeat 0 0;
}

IE/Win has a problem with proper positioning of a background image in textarea element when you scroll inside it or maybe all others miss-behave. Anyway, we add:

.input_text, textarea {
    background: url(drop_shadow_image.gif) no-repeat 0 0;
}
/* not for IE/Mac \*/
* html textarea {
    background-attachment: fixed;
}
/**/

Wanted more? Nope, that’s all… : )

If you have read my post about adding target=”_blank” to external links, you are half way there. The script is basically the same, but the conditions are changed. Instead of applying target attribute to all external links, the script applies this attribute to all URLs that have a string ‘.pdf’ in it or as you will see later, to any custom file extension (i know some of you will disagree with opening links in new window, but that’s not today’s topic).

The script also adds class="pdfLink" to all links that match the condition. Same could be applied to .DOC files or .ZIP files.

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}

Now that we have classes pdfLink, docLink and zipLink, we can use CSS to style those links, for example add a corresponding icons. See following example:

.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

I suggest you use small and unobtrusive, but noticeable icons, otherwise they will take too much attention. Here is full working example. The script is not bullet-proof to URL junk produced by CMS, for example ?download=2387423&sid=8568347563. Links should point to files with the right extensions.

One page, two stylesheets

Okay, you probably have a page with some content and you probably have styled it with some CSS. If you already have print stylesheet for your page, just skip ahead to the next part.

To make stylesheet for printing, decide what parts of your layout are not likely to be printed (like various banners, navigation etc.). The simplest way to hide them is to define them as display: none;. If you are not familiar with stylesheets for print read more about it. Anyway, keep it simple—black text on the white background, with a font-size: 12pt; is a good start. When you’re done with it, continue reading.

The query

Now that we have all client-side ingredients in place, we can put it all together. First, we have to add a link somewhere around the article, for example:

<h1>Title of the article</h1>
<p>Lorem ipsum...</p>
<a href="?q=printme">printer friendly version</a>

It literally means we are requesting this same page, but with a query q=printme. To make our page recognizes what we are asking it, we have to add somewhere in the <head> section some logic, something like:

“If i’m asked to ‘printme’—i’ll load my printing stylesheet, and if i’m not asked anything—i’ll load my default CSS file.”

Depending of your preferences there are two scripts—PHP and ASP. Backup your HTML file and replace the part where you called your CSS file with one of the following examples.

PHP print script

<?php if ($_GET['q'] == "printme") { ?>
<link rel="stylesheet" type="text/css" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="default.css" />
<?php } ?>

ASP print script

<% If Request.QueryString("q") = "printme" Then %>
<link rel="stylesheet" type="text/css" href="print.css" />
<% Else %>
<link rel="stylesheet" type="text/css" href="default.css" />
<% End if %>

Happy printing

Your visitors will love this, as they can decide whether they want to print your page for its’ graphics or just the plain text (see printer friendly version of this entry). As a benefit, Google will index two versions of the same article which should also help boosting your page rank.

Suggestions and re-workings are welcome as usual. Have a fun and please contact me when you make yours. I’d really like to see how you solved it!

Update

Almost one year later, Roger Johansson pulls out the subject for reconsideration – Print-friendly CSS and usability.