CSS Master

Figure 3.24. Firefox timeline output for a transition of the transform property

Identifying Lines to Remove

Unfortunately,thereisnodefinitivelistofwhichpropertiescausereflowsandre-

paints.PaulLewis’CSSTriggerscomesclosest,^3 butit’sChrome-specific.Browsers

dobehavesimilarlyformanyoftheseproperties,however,sothisresourcewillat

leastgiveyouanideaofwhatpropertiesmaybecausingtrouble.

Onceyouknowwhichpropertiescould be problematic, the next step is to test the

hypothesis. Disable that property―either with a comment or by adding a temporary

x- prefix―and rerun the timeline test.

Rememberthatperformanceisrelative,notabsoluteorperfect.Thegoalisimprove-

ment:makeitperformbetterthatitdidbefore.Ifapropertyoreffectisperforming

unacceptablyslow,eliminateitaltogether.

Minification

Developertoolshelpyoufindandfixrenderingissues,butwhataboutefficiency:

areourfilesizesassmallastheycanbe?Forthat,weneedminificationtools.

(^3) http://csstriggers.com/
116 CSS Master