CSS tab-size

By  on  

The ridiculous tabs vs. spaces debate within code can get just as heated as the JavaScript semi-colon debate.  I'm a tab guy myself but to each their own...just don't work on a project with me if you aren't.  Anyways, I was quite surprised to find that you can set the tab space number of <pre> element code with CSS's tab-size property!

The CSS

The tab-size property takes an integer value representing the number of spaces a tab represents:

/* 4 spaces per tab */
pre {
	tab-size: 4;
}

/* No indentation */
pre {
	tab-size: 0;
}

As you can see, you could even remove indentation all together.  Not recommended but possible.

I love this property as it's especially useful for code-heavy blogs, though it doesn't have much use outside of that.

Recent Features

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

Discussion

  1. MaxArt

    Didn’t know about that.
    It’s so basic that I wouldn’t be surprised if that was defined in CSS1.
    But it’s a recent thing it seems, and still vendor prefixed. No sign of support in IE, as Microsoft stubbornly thinks that tabs are as huge as 8 spaces!

  2. Aicke Schulz

    For vendor prefixes and browser support comparison: https://developer.mozilla.org/en/docs/CSS/tab-size

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!