Is CSS text-transform "expensive" [closed]

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?

Answer 1

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.