JavaScript
Article
By Craig Buckler

5 Rarely-Used CSS Properties

By Craig Buckler
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

rarely-used CSS propertiesThe 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; }
--ADVERTISEMENT--

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”:

Fixed-width table with differing row heights

Fixed-width table with differing row heights

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 */
}
Table rows with consistent heights and cropped text

Table rows with consistent heights and cropped text

See also:

Have I missed your favourite rarely-used CSS?

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?