Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Leonardo Costa
8,069 PointsWhat is the fastest / lightest way to show different states for elements: sprite images or CSS transitions?
Or maybe approaching both methods is the way to go? For me, it speeds up development process when I can resolve stuff like this only in code.
2 Answers
Brian MacDonald
4,951 PointsHello Leonardo,
If I am correct by state changes you mean things such as a :hover. :visited and :active state?
Both can be very beneficial and useful depending what your overall goal is!
I have used sprite images countless times, they can represent changes by color, size, shape - whatever you need. And you can align them all on a single sprite sheet allowing less time finding images when they are all in a single place.
Transitions are powerful, there are countless ways you can use them to display a state change, even have a separate one for each hover, visited and active areas. The only thing you have to be aware of with transitions is making sure you have cross browser support, device support and some method of taking care of older browser support if you plan on covering them off.
All in all - both are great! Use them together to make an even better product if you can!
Leonardo Costa
8,069 PointsThanks a lot, Brian!
That was exactly what I meant.
I was indeed thinking of using both.