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
Chris Mursheno
Courses Plus Student 3,017 PointsCoding troubles with "Transitions-2" Code challenge
Greetings everyone. I am coding according to what I thought I had seen in the CSS- Transitions section for 'Transitions 2' Code Challenge. The question for the code challenge is:
Using the prefix for webkit-based browsers create a transition for the border-radius property of '.box'. Give the transition a duration of 2 seconds, a delay of 1 second & a timing function which maintains a linear timing. Below is what I typed in my CSS:
```.box { transition-property: border-radius; transition-duration: 2s; transition-delay: 1s; transition-timing-function: linear; }
Now it asks about webkit instructions/coding insuring that older browsers will be able to read it. Could it be that because I haven't included those pieces of coding(-webkit-transition, -moz-transition, etc.) it's not working? I also didn't type out the shorthand version because the example had 2 elements where this challenge only contained 1, not that it should matter, but I chose in this case to type out each individual line of code. Can anyone see what's missing or not typed correctly and give me a hint?
4 Answers
William Whitworth
6,117 PointsIt seems that you're missing the -webkit-transition-property:; and so forth. That should work, unless it specifically wants the shorthand in which case it would be...
-webkit-transition: <property> <duration> <timing-function> <delay>;
Just some additional info, -webkit- is needed for "transition" compatibility in: Safari 6.0 and under iOS 6.1 and under and most Android browsers.
Hope that helps.
Chris Mursheno
Courses Plus Student 3,017 PointsYou're the best!!! It worked. It's always a little article of punctuation or the order of certain words which make the difference. I was under the impression that there were other '-webkit-' listings for Mozilla and IE or whatever. That was a little confusing. Because I almost had the exact short-hand response. But many thanks for that.
William Whitworth
6,117 PointsAwesome! There are other listings, but they aren't "-webkit-" listings, they are browser prefixes. -webkit- is used for both Safari and Chrome, while -moz- is used for Mozilla Firefox, and -o- is used for Opera.
Anyways, if you are ever in question about whether or not you need to use any of these prefixes for any of your projects. Check out www.caniuse.com, it'll give you a detailed list of browser support.
Chris Mursheno
Courses Plus Student 3,017 PointsOh, I see now...I was thinking which browser should I use that seems the most "universal" like Chrome seems to be here ,but there is no such thing evidently. Each browser has its pros & cons it appears. But "caniuse.com" is the ticket in terms of knowing what is allowed with whichever way the designer chooses.