MaryBaker MaryBaker - 2 years ago 93
CSS Question

Browser compitability for css

I'm a very newbie to the world of UI developing. Right now I'm using HTML and CSS to develop the layout. I use Google Chrome (because it is a very good browser, and from my point of view it is the best right there) to debug my code, but I just downloaded Firefox to see how my design will look like (I was thinking pretty much nothing will change) only to be staggered when I found that my design looks terrible and all what I went through was not compatible with Firefox.

I need someone with an expertise in that field to tell me how to properly perceive such incompatibility (Some professional techniques ) between browsers and what should I do now for my current design and for the future when developing other sites?

the question might not have some genuine English as of my background, but I assure to you that I'm not demanding rather than asking politely, that's how it sounds in my region. Thank you


Answer Source

Since the browsers are all developed by mainly different people, there's always the possibility of running into compatibility issues.

There's two steps I can think of when it comes to preventing this kind of issues:

  1. Use a CSS reseter. What that means is a stylesheet containing a set of CSS for bringing all items to the same starter value (i.e. chrome has a 30px padding in list items, firefox has 35px but the css resetter tells both of them to have 30px padding - Just an example). For more info about CSS resets, have a look at this question: CSS reset - What exactly does it do?
  2. Prefix your CSS correctly. Browsers implement properties differently, so while -webkit-transition:0.2s; worked in an early version of chrome, firefox had its -moz-transition:0.2s implementation only, until it became a standard that transition:0.2s should be the accepted syntax. There's lots of tools that can help with that, like Autoprefixer, or

Regarding Mobile responsiveness, the key is to avoid using many fixed width elements (i.e. 1024px for the main container) or having media queries and adapting the fixed sizes to certain display sizes using media queries.
The internet's knowledgebase can help you really understand more about this, but if you just want to try it out, you can view some popular media queries on this SO question: Media Queries: How to target desktop, tablet and mobile?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download