The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.
Replace images with code
CSS3 will allow for common design elements such as rounded corners, shadows, gradients, and transparency to be rendered by the browser. This will reduce the number of additional files that need to be loaded and make site maintenance easier by keeping more design information in one place. Fewer files will allow for faster site speeds, improving the user experience and consequently conversion rates. Decreased load times will also help with search rankings as speed becomes a more important factor to search engines. Fewer images also means that more content can be kept in html, making it more accessible to search engines.
See the example below for new code that can replace what is currently being done with images.
More examples and related articles:
- The Opera logo created in CSS3
- 5 CSS3 Design Enhancements that You can use Today
- Practical Uses of CSS3
- A toolkit for testing new features
- Google and site speed
CSS3 can take the same designs that are currently being done with extensive or roundabout methods in CSS2 and create them with fewer lines and more efficient code. This will help make your files smaller for better site speed and will reduce your code-to-content ratio to make your site easier for search engines to crawl. For example, the background-image property will be enhanced to allow you to add more than one image to the same element. You can also make use of template elements to display content in a table format without needing html table tags or CSS2 faux column tricks. In addition, new selectors take advantage of design patterns for reducing code.
Read about some of these feature in more detail:
Use dynamic styles
Examples and information