Best Practices
Think Progressive Environment
CSS 3 should be used to enrich and enhance an already fully functional experience.
Organize and Comment Vendor Specific Syntax
- With proprietary syntaxes leading to bloated code, following a couple of simple
rules will help keep code more organized. - Insert comments noting which browser the line of code is for.
- List the proprietary browser code first.
- List CSS 3 standard code items last in the declaration.
Use Fallbacks for Background Related Enhancements
With the possible values for backgrounds upgraded, it may be wise to provide a fallback value for non-supporting browsers and in the case of multiple backgrounds, list the most important element first.
Use Rotations, Animations & Scaling Sparingly
Subtle, tastefully selected events and animations are usually the best choice. Use new features carefully with an enhanced user experience in mind.
Care with Typography
Take care to ensure that typography related enhancements do not affect the readability of the site. The content should be accessible and readable. Think twice about using shadows, gradients or transforms on typographical elements.
Test Code in All Browsers with Fallbacks Enabled
New CSS 3 features may add more pressure in this area. Test in non-supportive browsers, temporarily removing some of the enhancements, one by one if necessary, to see the experience with fallback options enabled. Keep code organized and commented for ease during the quality assurance process.
