5 Rarely-Used CSS Properties

The volume of CSS properties makes it easy to forget those that are not used every day. Here is a list of 5 useful but rarely-used CSS properties that work in all modern browsers… 1. Capitalization with text-transform This property changes how an HTML element’s text content is capitalized. It can be very useful when your design department makes last-minute capitalization changes and it is easier than recoding your HTML. The main values are:

• capitalize: Makes The First Character In Each Word Uppercase
• lowercase: changes all characters to lowercase
• uppercase: CHANGES ALL CHARACTERS TO UPPERCASE
• none: no capitalization change

Most browsers behave well, although IE can set “none” if font-variant is set to “small-caps”. 2. Text letter-spacing and word-spacing Keeping your page text as HTML makes maintenance easier and is better for SEO. Simple text effects can be implemented without graphics using letter-spacing to reduce or increase character spacing by fixed amount (px, em, ex, %, etc) e.g.

h2 { letter-spacing: 0.1em; }

Widely-Spaced H2 Title (0.1em)

Tightly-Spaced H2 Title (-0.1em)

word-spacing is similar except that it affects the spacing between words rather than characters. 3. Indenting with text-indent text-indent defines the left indentation of the first line in a block of text (or the right indentation if direction is set to “rtl”), e.g.

p { text-indent: 10px; }

This property often appears redundant because similar effects can be achieved with padding. However, text-indent does not effect the element’s width, so it can be useful in situations such as IE-compatible menus where the whole block is clickable, e.g.

ul#menu li a
{
	display: block;
	width: 100%; /* IE hasLayout applied */
	text-indent: 10px;
}

4. Fixing table widths with table-layout Tables are still required for tabular data, but styling column widths can be difficult when the browser’s default setting for table-layout is “auto”. The automatic algorithm may override your specified table width if a cell’s text requires more room. Setting table-layout to “fixed” forces the browser to adhere to the table width you specify. Full details of the algorithms can be found on the SitePoint CSS reference table formatting page. 5. Alternative uses for white-space white-space determines how the browser renders white space in your HTML. Cross-browser support is patchy, but the following properties work consistently:

• normal: whitespace collapses into a single character and line breaks occur where required
• nowrap: whitespace collapses into a single character, but line breaks are suppressed
• pre: whitespace will not collapse and lines are only broken at new lines in the HTML

white-space is essential when presenting code snippets, but there are other situations when it can be useful. For example, we have a table with table-layout set to “fixed”:

However, we would prefer all row heights to be consistent and long text to be cropped (perhaps because we are implementing a JS tooltip to show the skills in full). Setting a CSS height on tr or td elements does not work, but we can use white-space instead, e.g.

td
{
	white-space: nowrap; /* suppress line breaks */
	overflow: hidden;    /* crop the text */
}

See also:

• The 5 Most Under-Used HTML Tags
• 10 Fixes That Solve IE6 Problems
• Opera MAMA project (web page structure search engine)

Have I missed your favourite rarely-used CSS?

Frequently Asked Questions (FAQs) about Rarely Used CSS Properties