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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Telephone Link Protocol

    We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more;  they're an excellent convenience to visitors.  With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The tel...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

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!