开发者

Tab width CSS property

Do the WebKit and Microsoft browsers support any method of specifying tab width like Firefox and Opera do using their -moz-tab-size and -o-tab-size properties?

For example, I want the tabs in my <textarea> to have a width of 4 spaces:

textarea {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    /* How would I do this in Chrome, Safari, and IE? */
}

[Update:]

I created a tab-size polyfill (Demo):

<script> // tab-size polyfill
var codeElements = document.getElementsByTagName('code'), // Applies to all code elements. Adjust to your needs.
codeElementCount = codeElements.length,
e = d.createElement('i');

if(e.style.tabSize !== '' && e.style.mozTabSize !== '' && e.style.oTabSize !== '') {
    for(var i = 0; i < codeElementCount; i++) {
        codeElements[i].innerHTML = codeElements[i].innerHTML.replace(/\t/g,'<span class="tab">&#9;</span>');
    }
}
</script>

<style>
.tab {
    width: 2.5em; /* adjust to your needs */
    display: inline-block;
    overflow: hidden;
}
</style>

Note: This wont work on <textarea>s, but only on element's that can contain o开发者_开发技巧ther elements. If the browser does support tab-size it'll use that instead.


tab-size is currently only implemented by Firefox and Opera using your given vendor prefixes.

For WebKit, there's a bug report requesting that the property be implemented. I believe work has already started on it, as can be seen in the comments on that report.

For IE, well, I can't find anything about an -ms-tab-size or tab-size implementation in IE9 or IE10. I suppose the IE team has been none the wiser.


Seems like there's a similar question on this subject, but it doesn't really quite answer that quite right. It does, however reference that apparently tab stops do exist in CSS, though I can't imagine the browser support is all that great on it.

Searching on google for it brings up little to no information on the subject, further leading me to believe that it isn't very well-implemented, or used. Hope that helps.

EDIT

The W3C link does mention tab-stops, but it was only a working draft - a proposal, and was not implemented.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜