Add CSS Text Shadows for Cleaner TextIt's no secret: applying text shadows on the Web has never been easier. Well, at least if you're using Safari, Opera 9.5, or Firefox 3.1a. By adding just a single piece of code to your stylesheet, you can get crisper text. Here's the CSS you'll need:
text-shadow: 0 0 0 #000;
The text-shadow CSS fix in action shows the before (left) and after (right) in Safari 3.x when applying the single piece of CSS. See the improved rendering?But what about users of older browsers? For some, there is hope. With Firefox 2, there is a small CSS hack that allows the fonts to be rendered in relatively the same manor. Here's the CSS:
opacity: : .99;
Better Image Scaling in Internet ExplorerImage scaling via CSS and inline HTML is no big deal, but it has never worked well in Internet Explorer—go figure, right? Well, the creative minds behind Flickr have found two ways to help out IE6 and IE7 improve image scaling. It turns out that the same method of scaling images—something called bicubic resampling—is present in all modern browsers, but it's disabled in IE7. See the difference?
Before and after using enabling the resampling. (Image credit Joel Spolsky)You can enable it in IE7 with a bit of CSS:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');
Developing solid interactive experiences cross-browser has *always* been an issue. As long as browsers continue to interpret HTML and CSS in different ways, we'll have these issues to deal with. With browsers no longer under development, like IE5 and IE6, we can take some of the problems out of the picture. These issues might seem superficial, but **it's the details that make for grand experiences online**. Take the extra time to use these simple cross-browser techniques to make your website look and behave it's best. Enjoy!