ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIonAutomatic Prefixing Tools: Client-Side
In order to gain support in older browser versions, CSS3 Transforms, Transitions, and Animations must be
written as separate declarations with the correct browser vendor prefixes, as discussed in Chapter 1. While
maintaining five different lines of code for a single transition is certainly achievable, maintaining anything more
complex can be a nightmare. While tools such as Prefixr (http://prefixr.com) can add prefixes to existing code,
they’re not realistic options for code that is open to change: any alterations to the original CSS means you will
need to go through the same process again to add prefixes. There are several possible solutions to this issue, one
server-side, the other client-side, each with its own advantages and disadvantages.
-prefix-free
Greek developer Lea Verou (http://lea.verou.me) has written a popular, lightweight, and effective script that,
dropped into a page, will customize any non-prefixed CSS code as needed for the browser that is viewing the
page (http://leaverou.github.com/prefixfree/).
Figure 10-1. A profile tool, such as the Timeline Developer Tool in Chrome or the Style Profiler in Opera Dragonfly,
can help to highlight areas in which your CSS is particularly inefficient or slow