Performance and CSS3 - beyond the hype
The situation has changed a lot with regards to CSS3. Browsers have made huge progress on this area. There is a place in between no features but fast and the other one full featured but slow. The middle ground is possible. Drop shadows can be given up for making IE faster, exactly like rounded corners. Nobody opens a Web site in 5 different browsers except the dev community. You can give up some features.
Figuring out the user best interest is tricky but can be a part of your strategy of development. For example Sales Forces has decided to give a different design depending on the browser.
“Can you please find the selector that slowed down my site?” doesn’t solve a lot of things. With a lot of selectors, browsers are pretty good until a plateau. Reduce selectors: Object oriented Css.
CSS can really improve the performances of your web sites. There are micro-improvements.
Selectors
- Selectors are matched from right to left. For example if you have a * on the right you match everything.
- Selectors look like a regex with attributes selectors are slow.
- Kiss principle div.classname is slower than .classname.
- Opera’s selector test framework is very cool and helpful for understanding.
- CSS Stress test
- Transparency can induce a lot of complicated calculation. It will be expensive.
- Combining effects have side effects. It is important to test them.
What is the favorite feature of CSS3?
Images
Images are a huge part of how much a web page performs. Some images can really be removed. Major image reduction is possible using gradients and unicode characters. Shadows can be used for giving bubble effetcs.
RGBA
- zurb’s awesome buttons can be used on any background colors.
- Rgba syntax is very easy. (red, green, blue, opacity)
border-radius
border-radius has issues with different borders width or stackness. Be careful.
gradient
they can achieve many things.
CSS Lint
CSS Lint is a tool for checking the quality of CSS.