Sandbox

A script to make image replacement techniques work when CSS is on and images are off.

The CSS text-decoration property can be used to make text blink, just like our old friend the blink tag. Fortunately this implies that the opposite is true: CSS can be used to suppress the blink tag.

A function to show an ‘image loading…’ message and subsequent fade-in of a photo. Inspired by the Flash-like effect on Couloir.

Using the DOM to automatically underline the letter of a link text which matches its accesskey.

There is a CSS bug in Safari 1.2 where clear:none does not over-ride clear:left.

DOM scripting is much more than getElementById. Elements can be isolated and manipulated without having an id at all. To demonstrate this I’ve put together a simple script which redefines the styles of a class.

Typographers aid ‘justification’ of text by using a hyphen to split long words across two line. HTML specifies that ‘soft’ hyphens can be used to indicate where are word could be divided in this manner, yet few modern browsers seem to support it.

Probably the biggest problem with liquid layouts is how to contain and display fixed width elements such as images and flash movies. Inherently with a liquid layout one never knows how wide a container will be. This can lead to situations where an image is wider than its container and breaks the layout.

These are attempts to show wide images in a variable width column, using CSS techniques to shrink or crop the image.

Probably the biggest problem with liquid layouts is how to contain and display fixed width elements such as images and flash movies. Inherently with a liquid layout one never knows how wide a container will be. This can lead to situations where an image is wider than its container and breaks the layout.

These are attempts to show three images side by side in a variable width column, using CSS techniques adjust the layout.

How browsers render different styles of borders (dotted, dashed, etc) at different widths.