I’ve been doing a lot of front end development recently. This means a lot of responsive sites, which in turn means progressive enhancement, graceful degradation and performance optimisation for mobile devices.
There are however, some other considerations to do with rendering that aren’t necessarily immediately obvious. For example:
- Writing efficient CSS for faster rendering – things like not using tag qualified id selectors, see https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS for more details
- The -9999px hack – see http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ for details
- Using a translate3d transform for transitions (rather than left or margin) to force hardware accelerated transitions, meaning smoother animations. Usually used for things like carousels.
The translate3d does have a problem though: it breaks position: fixed in webkit and causes it to render as position absolute. So, if you were creating an off-canvas menu for example and transitioning the whole site, you wouldn’t be able to use anything with position: fixed inside that. I ran into this problem when I had a fixed nav.
See this issue on animate.css for a bit more info: https://github.com/daneden/animate.css/issues/26