Four CSS3 features that will make your designer happy
HTML5 is rightfully getting a lot of buzz these days, but there is another web language that is getting primed for its next upgrade.
CSS, the system of files that styles web pages has been in version 2.1 since 1999. Since then, web designers have been forced to get creative in order to introduce new design techniques. For example, a now common technique to create a simple box with rounded corners depends on lots of code and four background images. CSS3 bakes these old techniques into the language, simplifying the design process and freeing designers to waste less time hacking CSS and more time creating beautiful websites.
Here are four new features of CSS3 that should make the life of your designer a bit easier:
Typography has been a frustration of web designers for years. Previous to CSS3, a designer could only use a font if it was already on a user’s machine. Because of the wide variety of operating systems the web was essentially limited to five fonts (Arial, Times New Roman, Comic Sans Serif, Georgia and Verdana). This led designers to resort to tactics such as sIFD, a workaround that uses Flash to replace fonts.
Thankfully, CSS3 allows designers to “import” fonts so designers can use any font they want, massively increasing the typographic possibilities and freeing users from font monotony while decreasing the need for Flash.
Can I use it? Yep, only Firefox 3 for Windows can't handle Font-face.
Rounded corners took the web by storm at the dawn of Web 2.0. However, under the hood, designers often had to utilize a complicated method of background image replacement to give the illusion of a rounded corner. Some people even relied on code generators to make life easier.
CSS3 has removed the need for complicated workarounds by baking rounded corners right into CSS3.
Can I use it? Yes, with help. IE 6 through 8 can't handle the border-radius property and you may need some help with Firefox and Safari.
Any designer who is tasked with print and online designs will breathe a sigh of relief with CSS3’s new CMYK support.
Previously color on the web could only be described using RGB or a special hexcode. For example, red in RGB is 256,0,0. In hexcode it’s #ff0000. When print designers wanted to translate print colors to the web, it required a bit of “translation” between color systems.
The good news is that CSS3 eliminates the need to such translation. The bad news is that not even the most current browsers support the new feature.
Can I use it? Not yet. No browser supports this feature.
Web designers often utilize two design effects, shadows and opacity, to help add depth to a page. Previously, designers had to rely on background images and .png support, respectively. Now, however, both features are included in CSS3.
(example via css3.info)
Can I use it? Shadows won't work in IE or Opera, though the feature should degrade for users will older browsers. Opacity works on every browser save IE.
The W3C has been hard at work upgrading the CSS specification and there are many more features worth exploring. See a complete chart of HTML5 and CSS3 adoption here.