Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Is CSS text-transform expensive in terms of processing? It appears to me that the browser's being forced to do some work that it wouldn't normally need to (if you didn't transform), but is that a significant amount of processing? Does it impact performance at all?
It might take a bit more processing from the client's browser, but this will be totally insignificant unless you're transforming pages and pages of text (and if you're doing that, you're doing something wrong).
You also have the overhead of having the CSS property written in your stylesheet (heavier file), but once again it's only a few characters and shouldn't make any difference.
I got curious so I ran some basic benchmarks. On Firefox 3 I displayed a page with 200 paragraphs of Lorem Lipsum.
Rendering it will take between 0.150s to 0.175s
When adding text-transform:none I don't see any significant difference.
When adding text-transform:uppercase it now takes between 0.350s and 0.380s
When adding text-transform:capitalize it now takes between 0.320s and 0.350s
When adding text-transform:lowercase it now takes between 0.320s and 0.350s
So apparently we do have some overheads processing this, but once again I'm capitalizing hundreds of lines and it only costs 0.2s. Therefore if I were you I'd use it without thinking about performance too much unless you want to text-transform huge chunks of text.
If you're designing for mobile, every little bit helps. If it's not dynamic, then type it out in uppercase
I don't see any reason why it should be any more 'expensive' than any other CSS style. All it does is convert a string to upper/lower case, which is hardly the most taxing process a computer can be asked to do.
I'd compare it with displaying in italics or bold; both these styles effectively change the font for the entire string, but you wouldn't consider not using them in case it's processor intensive for the browser, would you?
The only time you could even conceivably think of text-transform as having a hard time would be if you're using a non-latin character set, in which case converting to upper/lower case may not make sense. But you can be pretty sure the brower makers have got that covered. (and in any case, if you're in that position, why would you even want to use text-transform?)
