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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

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!