CSS Triggers

by callum85 • 12 years ago

32 9 12 years ago

StephenGL2• 12 years ago

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

gotofritz• 12 years ago

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

wbobeirne• 12 years ago

There are tooltips, at least in the form of alt tags.

StephenGL2• 12 years ago

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

mcmillion• 12 years ago

Great list. Very useful.

The info box renders halfway off the screen in Safari 7.0.5

robin_reala• 12 years ago

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

onion2k• 12 years ago

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• 12 years ago

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

zevyoura• 12 years ago

If you click on a property name, it actually gives a pretty decent explanation. I agree a link to additional overall context could be useful, but I think you're overstating the gap.

CSS Triggers

Related Stories