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

Gina Bégin
PRO
Gina Bégin
Pro 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
Pro 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.

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
Pro 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
PRO
Gina Bégin
Pro 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!