Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Coding 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
William Whitworth
6,117 Points

It 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.

You'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
William Whitworth
6,117 Points

Awesome! 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.

Oh, 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.