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

Making 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

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

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

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

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

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

…I see that -webkit is the prefix for multiple browsers…ok, that's cool.

James Barnett
James Barnett
39,199 Points

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