

CSS Triggers - callum85
http://csstriggers.com/

======
onion2k
What the site fails to explain is _why_ these things are important. Changing a
property that effects a layout change means the browser will need to redraw
that element and anything that the geometry has pushed around. A full repaint
is _slow_ so if you're doing it often the user's experience will be very
negatively impacted. A composite event should be pretty fast as it happens
largely on the GPU hardware.

For this reason, for example, animating things with a CSS transform is
considerably better for the user than animating a property like left or
margin-left. Animating with CSS can be _much_ better than something like
jQuery's animate().

If you want to know more, google 'layout thrashing'.

~~~
callum85
"fails to explain" is a bit harsh. It's a cheat sheet for people who already
know about layout thrashing.

------
mcmillion
Great list. Very useful.

The info box renders halfway off the screen in Safari 7.0.5

------
StephenGL
Fairly useful reference. Nees a key for the colors. I had no idea what the
dots meant.

~~~
gotofritz
There is a key... although they should use tooltips so that when you scroll
the key out of view you can still tell which dot is which but rolling over
them

~~~
StephenGL
Or just scroll the key with the giant "Select a property" thing.

------
robin_reala
Worth pointing out that this is only tested in Chrome for the time being.

