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

CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points
Posted by Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

If we want to use the Multi-Column Layout of Flex Box Module, how would we code it for all browsers that it's avail on?

So I know for Chrome you have to use -webkit- for Flex Box, for example and to use it in IE 10, you have to use -ms-

Does this mean you have to type each rule completely and separately for the different browsers, or can you combine them in on line, then add the rules for all the browsers at once?

3 Answers

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Ha ha, you'd think it would — but this is what I referred to to find out what prefix to use for IE. :) I just don't know how to write it all in code if I am trying to code for multiple browsers. Does that make sense? So I know what the prefixes are, but how do you actually use them in css most efficiently? Do you have to add separate styles for each browser and then start all over in the next snippet of code with the next browser (and the next, and the next, and so forth) to accomplish the same thing? Or can you line them all up in one line similar to some sort of shorthand, such as

.main { -ms-; -webkit-; (etc. etc.etc.) }

Hope that makes sense.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Gina,

I think you might be looking for something like SASS. Treehouse has three or four SASS courses.

Jeff

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Not sure what SASS is, but this was from the CSS course — he was having us code multi-layout columns and flex boxes, which I guess are kinda new CSS rules that aren't universally accepted yet, so you have to type out a prefix (like -webkit- for Chrome browsers for example, and -ms- for IE) to make them work on different browsers.

Maybe it's just too confusing of a question, but he talks about it in the video from which I asked this question — maybe I'll find the answer later in the course! :)

Thanks all.

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Looks like this is how to do it:

(example) 

.wrap:hover {
-webkit-transform:  scale(1.5) rotate(360deg) translateX(50%); 
-moz-transform:   scale(1.5) rotate(360deg) translateX(50%); 
-ms-transform:   scale(1.5) rotate(360deg) translateX(50%); 
-o-transform:   scale(1.5) rotate(360deg) translateX(50%); 
transform: scale(1.5) rotate(360deg) translateX(50%); 
}

So I guess you do have to write it all out!