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">	</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.
精彩评论