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

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Pure CSS Slide Up and Slide Down

    If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so.  They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant.  One effect that is difficult to nail down with pure CSS is sliding up...

  • By
    PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem.

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!