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
robinbehroozi
15,912 PointsMaking my CSS work in all browsers
Hi. This is both a general and specific question. I'm wondering how to get my CSS to work in all the browsers. I'm hoping there's a resource I can use.
I was writing some CSS using multi columns and when I tested it in Safari, it worked the way I wanted. However, when I switched over to Firefox, it didn't work.
Here, when the screen width is more than 500px, there are two columns. When the screen width is more than 800px, there are 3 columns. Also, when the screen width is less than 500px, there is one column. In Safari, it works fine but in Firefox, it doesn't. There are no columns.
Every bit of help would be appreciated. Thanks.
/** @media screen and (min-width:500px){ .wrap{ -webkit-column-count:2; }
}
@media screen and (min-width:800px){ .wrap{ -webkit-column-count:3; }
} **/
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Robin,
You're using the webkit vendor prefixes there.
See this table for what the support is: http://caniuse.com/multicolumn
It looks like you will need to use both the -moz and -webkit prefixes as well as the unprefixed versoin for IE10 and 11, opera mini, and IE mobile
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
You want to put the unprefixed version last but the order doesn't really matter for the prefixed ones.
See if that works out for you. Test in IE10 or 11 if you can.
robinbehroozi
15,912 PointsHi Jason. Thanks for your answers. I'm going to check out http://www.caniuse.com in a sec.
This is going to sound silly, but I'm not sure what the -webkit-column-count:2 means…more specifically, what does webkit mean? I think that -moz is for Firefox, and the un-prefixed version is for the browsers that you mentioned that support it. But the -webkit prefix kinda confuses me. Is it for a specific browser?
Thanks again.
Jason Anello
Courses Plus Student 94,610 PointsWebkit is the name of the layout rendering engine that is/was used in both Safari and Chrome. Chrome branched off of it to develop on their own and called it Blink.
The -webkit prefix used to be for mainly chrome and safari but now opera is using it on some properties to. Opera used to have the -o prefix and IE had -ms. Firefox is -moz as you mentioned.
The unprefixed property is the standard. The prefixes came about because browsers wanted to use these properties before they became finalized at the w3c.
The tables from the caniuse site will tell you which prefixes, if any, are needed for each browser.
robinbehroozi
15,912 Points…by the way Jason, I put in the code you suggested and it works in Firefox. I'm gonna try to download IE and see if it works there too. Thanks.
robinbehroozi
15,912 Points…I see that -webkit is the prefix for multiple browsers…ok, that's cool.
James Barnett
39,199 PointsIt's the prefix for browsers based on webkit. Which these days the major browsers based on webkit are Safari, Chrome & Opera (wince version 14). Before version 14 of Opera, opera used the presto engine, the -o prefix works for the presto engine.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsTo answer your more general question, http://www.caniuse.com is a good resource for finding out what browser support exists for both css and html and a few other things.