30+ Tips, Tools and Resources for Taking the Pain out of Cross-B We’re all familiar with the often long, headache-inducing process of testing and correcting our code to get it working cross-browser. Wouldn’t it be nice if we didn’t have to go through so much pain to achieve a good-looking result? Actually, you don’t! With the right knowledge, tools, and smarts, you can tackle a CSS design and get it working quickly and painlessly. With this in mind, we’re going to look at some of the excellent tools, articles and resources that will help you work smarter and cut the pain out of writing cross-browser CSS. Part 1 – Figuring out What’s Wrong
10 Best @font-face Fonts As soon as I learned about the @font-face CSS declaration , my life as a designer changed permanently. A whole world of possibilities are opened up by this feature – no more relying on Arial, Verdana, Georgia and all the other “web safe” fonts. Not that there is anything inherently wrong with those fonts, but after seeing them day after day on the web, I know I long for a bit of variety. However, just because a font is @font-face compatible doesn’t mean it’s necessarily good for the purpose you want to use it. The obvious examples are there – don’t use display fonts as your body text, for example – but some fonts just aren’t great for the web (or great at all… or good… or passable). So I’ve come to save the day with my opinions.
CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below.
Published by Chris Coyier This article was originally published on March 2, 2010. It is now updated to include the latest browser support and syntaxes. July 20, 2011: Updating again for syntaxes... Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. Speed Up with CSS3 Gradients