5 Rarely-Used CSS Properties

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; }

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.clearwind.nl peach

    I’d say that 4 and 5 are pretty rare but 1-3 are not uncommon for me.
    I think about 80% of the designs I code use 1 and 2, but I use text-indent in only 1 out of 10 I think. Though I’m leaving out the times I use text-indent for image replacement (text-indent:-999999px – don’t use more digits than that or Safari will ingnore it).

  • madr

    I’d say 1-5 are all common practices. I know I used every one of them as late as yesterday and today (which was pure luck, since one does not tend to master tables that often).

    Anyway, if 1-5 are considered to be rarely used it’s about time people start using it. Great article.

  • http://www.clanspace.com.au Robbo89

    I use the first one fairly often. All caps looks good on certain headings since it makes actual capitals a bit bigger then the lowercase characters that have been converted to caps.

  • http://www.wplancer.com banago

    I always use the first three, but never used the second two.

  • Hendrik

    I use all except table-layout (DIV layouter) quite regularily. Text-transform and word/letter-spacing are becoming more important at the moment with web typography being a key in website design. Playing around with those and line-height give texts a new look apart from the old Arial/Helvetica/Verdana standard.
    Text-indent is often used for switching text with an image representation and keeping the accessibility of a webpage (or if you want to have text look like a scientific publication).
    Lastly, I use the white-space setting to stop texts from wrapping for example in a tree structure which occurs quite often at my current job.
    Yet, I happen to have never used the “azimuth” property ;)

  • http://www.jasonbatten.com NetNerd85

    5 properties this master guru uses a fair amount…

    and didn’t we just have this article?

  • David Candreva

    Hmm.. I use these properties on a daily base.. And text-transform:uppercase; is used on many many ‘web 2.0′ websites these days.

  • http://abitgone.co.uk abitgone

    Would you care to give us your definition of ‘rare’?

  • Chris Wallace

    Yeah, I pretty much use all of these except table-layout on a regular basis. You could have gone with cursor or font-stretch or counter-increment or even counter-reset, maybe clip or caption-side, or unicode-bidi, that would’ve been a good one. But, odds are, those are so rarely used you don’t even know what they do.

  • dev

    Very useful, i often use 3 only

  • http://cydewaze.org cydewaze

    Wow! I’ve actually used all but 4. I expected to find something super-obscure. In fact I just used #1 recently, to capitalize the names of breadcrumbs generated by a CF script.

    Good article. I need to study up on #4.

  • Lars

    I use them all the time except letter spacing, wich is useless and awful :)

  • http://www.optimalworks.net/ Craig Buckler

    Would you care to give us your definition of ‘rare’?

    Rare according to Opera’s MAMA search engine. Color, font-family and font-size are the most-used CSS properties. The least rare in this list is text-transform at #49 – ‘color’ is 6 times more likely to appear in a stylesheet.

    FYI, letter-spacing is at #50, text-indent is #51, table-layout is #88 and white-space is #53. All appear lower than z-index (#36) and cursor (#39), which surprised me. They’re not much more popular than the non-standard IE-only scrollbar styling properties.

  • http://www.jasonbatten.com NetNerd85

    I must admit I probably do use cursor more than the others (for javascript onclick events on non-a tag elements). I should use text-indent more.

  • MauiMan2

    I’ve used the first three quite often.

  • MauiMan2

    Go to this page:

    http://www.lionking.org/~kiara/fanfiction/

    and click on either story link in the table that says it’s in HTML format. These stories had text-transform, font-variant, text-indent and other “obscure” CSS features applied to them in 2002, and all these features worked in Netscape 6 back then. No, I didn’t write the stories, just did the coding.

  • http://www.studio-gecko.com/ XLCowBoy

    The only one I don’t use much is number 4. I use the others often (you do when you’re anal about typography).

  • Anonymous

    Hmm, it’s amazing to see so many comments that say something like “I used such and such everyday.” and “Why are these rare?” Umm, ok, so what is your point?

  • Anonymous

    It’s not surprising though. I’ve seen so many Comp Sci students and professional developers/programmers with this type of attitude. Unfortunately, it’s one of the negative qualities (and in my opinon, most annoying quality) of a stereotypical programmer.

  • MauiMan2

    Hmm, it’s amazing to see so many comments that say something like “I used such and such everyday.” and “Why are these rare?” Umm, ok, so what is your point?

    Here’s the point: The article is saying, “Here are five CSS properties that are rare and little used,” and some of us are saying, “Actually we do use those things.”

  • http://www.clearwind.nl peach

    Chris Wallace Says:
    April 16th, 2009 at 1:31 am
    Yeah, I pretty much use all of these except table-layout on a regular basis. You could have gone with cursor

    I just happen to use cursor very often because I think form buttons should have a hand cursor, especially if they are graphic form buttons.

  • ashwinAnimal

    I started developing web applications with Asp.net 2.0 (for IE6 only) and I just recently discovered how useful “table-layout: fixed;” is for creating forms.

    “text-transform: uppercase;” is very useful for fields (text boxes) with that requirement.

    white-space/overflow is good to know.

    Nice article.

  • Dorsey

    Not that interesting from a technical standpoint, but it gave many people the opportunity to condescend about how they “knew it all the time” and are shocked – shocked! – that there are people out there who aren’t as evolved as they are.

    Great article – you just can’t place a value on how good it makes some people feel to think that they’re smarter than everyone else. We need more articles such as this one on even more arcane subjects. I’d suggest a pure fabrication to catch people who claim to be experts on a non-existent subject.

    Bravo.

  • MauiMan2

    It gave many people the opportunity to condescend about how they “knew it all the time” and are shocked – shocked! – that there are people out there who aren’t as evolved as they are.

    I didn’t see anybody putting it that way. If SitePoint says, “Here’s some properties that are rarely used,” there’s nothing wrong with somebody else saying, “Actually those properties do get used.” Neither me nor anybody else put it in a way that puts anybody else down.

  • http://www.daniel-groves.co.uk dgroves

    Only the last two that I don’t use!

    The rest are in use on my current project – hiddencss.com

  • http://www.optimalworks.net/ Craig Buckler

    I’d like to reiterate that these properties are in the bottom 50 of the CSS usage chart.

    You might use them all of the time. You might have a 10 year-old site that uses them. However, there are many developers with less experience than you and there are many sites that do not use these properties. For every 6 CSS-enabled sites, only one uses text-transform.

    I choose these properties because they are less well-known, work in all browsers (unlike CSS counters) and can be useful every day (unlike azimuth).

  • MauiMan2

    That’s great. Nothing wrong with bringing things to people’s attention. The attitude I perceived from people who said they do use them was less like, “How stupid for you to think these are rare,” and more like, “We have found these properties to truly be useful. Hopefully they become less rare.”

  • Chris Wallace

    I agree that cursor should be used often as well, I’m just saying it’s probably not used to its fullest extent, like replacing the pointer with a custom cursor that serves a very specific purpose.

  • Anonymous

    Maybe some of the disappointed “hey, these aren’t obscure at all” type commenters could mention a css property or two that they consider rarely used?

  • MauiMan2

    You haven’t read the whole thread, have you?

  • http://www.qiboo.com artemis

    It can be very useful when your design department makes last-minute capitalization changes

    I was taught that plain English capitalisation should always be used with changes in case added with CSS so I am surprised that this is so rare. If anyone ever supplied my large quantities of anything else then it was policy at an old job to send it back.

  • http://www.vantagegaming.net/ ben332211

    @MauiMan: Being called Ben is rare, but I’m called Ben! The validity of the statement ‘being called Ben is rare’ is not affected by my, or 100 people saying they are called Ben. Rare doesn’t mean non-existent, ;)

    That said, I concur with your reading of “We have found these properties to truly be useful. Hopefully they become less rare.”.. It’s much more productive to read those posts in that way, since we can’t really know what was intended!

    Thanks for the article, :)

    Best wishes,
    -Ben

  • http://www.sfmta.com/ Charles Belov

    The issue with 1. Capitalization with text-transform “capitalize” is that there is no way to specify that words like “the” and “in” are not supposed to be capitalized in title case. If there is a way to specify this, I’d appreciate hearing about it.

    The issue with 4. Fixing table widths with table-layout is that if someone is using a larger font size, the text may need a wider column. This would impact accessibility for people with low vision.

    While it is true that the site visitor can override these behaviors with most modern browsers, most site visitors do not have the expertise to do so, or may prefer simply to go to a friendlier Web site.

  • http://www.optimalworks.net/ Craig Buckler

    @Charles Belov
    In answer to your questions…

    1. No, capitalize doesn’t handle words like “in” and “the”. The only way around it I can think of is to modify your HTML, e.g. <p><span>this will be capitalized</span> and this won’t</p>, then only apply the style to the span.

    2. Just specify your widths in em or ex. The table will scale accordingly.

  • http://www.sfmta.com/ Charles Belov

    @Craig Buckler:

    1. That kind of takes away from the convenience of using the “capitalize” style. It would be easier to simply capitalize the desired words. Of course, one could write server-side code to automatically wrap words such as “the” and “in” in a span tag if the word is not the first word in the capitalized span, but it is likely to produce the occasional inappropriate non-capitalization and again doesn’t seem worth the effor. I think first-letter capitalization is best handled manually.

    2. The risk of using ems to scale the fixed column width is that this could force horizontal scrolling in cases where it wouldn’t happen if the webmaster would simply let the browser find the optimum column widths.

    Now what I’d really like is for CSS to let me define which columns are “greedy” and which are “generous.”

  • CodeJoust

    I think #4-5 are pretty rare, i didn’t know about white-space, thanks for that. I typically don’t deal with tables though, so I haven’t seen table-layout. I also agree that capitalization (all caps vs no caps) should be done in the CSS, not the HTML, so it can be easily changed back. Letter spacing also is useful, but it’s very useful if you want to make some pretty cool plays on text.
    CodeJoust