Question

I found this method:

.fontSmooth { text-shadow: 0 0 1px rgba(51,51,51,0.5); }

and it works perfectly! but in some places it is said that it’s a bad solution (with no further explanation), why is that?

Answer 1

It’ll probably work, though there are two main issues.

First off, as coreyward originally pointed out (though he apparently deleted the post after one downvote), the text-shadow property is part of an ever-changing HTML5 spec. It’s relatively new on the scene, and its syntax and implementation are liable to be extremely different across browsers and may change even further over the next few years.

The more short-term issue here, though, is that blurring a text shadow takes serious work on the part of the browser. It’s fine for maybe headers and the like, but if you’re planning to apply this to your whole page, please bear in mind that it will run much slower in older computers, and even scrolling up and down will be laggy. So, be careful in deciding to what extent such smoothing is appropriate.

I’d also like to point out that, if the user hasn’t enabled anti-aliasing system-wide, it’s quite possible that the user doesn’t want it. It’s just kinda silly to use CSS tricks to override a platform-level setting.