-3

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?

PS 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

Updated

MaryBaker
  • 667
  • 1
  • 5
  • 8
  • The best way to test peformance across different broswers is...to test on different browsers. You probably want compatibility on Chrome, IE 11, and Safari. Mobile devices is another story altogether. – Tim Biegeleisen Jul 03 '16 at 00:41
  • @Tim Biegeleisen So, these are the most used browsers ( Chrome, IE 11, and Safari ) and I need to have them all and test my code on all of them ? – MaryBaker Jul 03 '16 at 00:44
  • using a complete styling framework like [bootstrap](http://getbootstrap.com/) can be helpful. Ready made templates can be viewed, such templates usually look the same on various browsers, and best of all the site built using bootstrap are mobile first. – Imran Ali Jul 03 '16 at 00:45
  • I'm trying to craft my skills and build sites from scratch Imran. I know of bootstrap I used it many before and to be fair for me felt like I never did a thing rather than changing some colors and maybe the border radius of div that's it. Share with me tour experience about that, I'm just describing what I experienced and maybe it is wrong. Thank you – MaryBaker Jul 03 '16 at 00:51
  • @MaryBaker you can still modify bootstrap into your own design.take what you need or maybe you should follow bootstrap grid system to make your site responsive.you should also have a reset.css to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. – j.Doe Jul 03 '16 at 00:55
  • @j.Doe Thank you J.Doe – MaryBaker Jul 03 '16 at 01:00
  • Cross-browser compatibility is generally quite easy these days so long as you don't rely on any non-standard features. If you layout breaks significantly, most-likely it was not well constructed to begin with. Some user agents have slightly different default styles, for a consistent starting point, consider using [normalize.css](https://necolas.github.io/normalize.css/). There really is no substitute for testing in every browser you support. – Alexander O'Mara Jul 03 '16 at 01:19

4 Answers4

1

you will have to learn as you go, start with the simple things & make sure you have a good foundation. There are a lot advanced CSS3 animations, transitions & transformations as CSS3 is becoming more & more powerful. Check at "Can I Use" to see which browsers support your CSS. Responsive design is based on media queries (checking screen size) & using percent rather then px for example so the design can change depending on the device. Also MDN is a great tools for reference which also notes browser compatibility.

Nick_O
  • 429
  • 5
  • 18
1

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 pleeease.io

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?

Community
  • 1
  • 1
Paul Ghiran
  • 1,233
  • 1
  • 16
  • 29
1

a good practice is to set padding margin to 0 and using box-sizing on first lines of your stylesheet to reset browser layout like this 

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }

this will help you control your site layout a bit better

0

The second part of your question:
Write this code to make your website compatible in the head part
Modify the "1.0" part accordingly.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Arnav Borborah
  • 11,357
  • 8
  • 43
  • 88
Yash Jain
  • 1
  • 5
  • 20
  • Would you elaborate on the part " Modify the "1.0" part accordingly", I know this meta tag for different devices but how does modifying the initial scale work, and on what bases the "1.0" change? – MaryBaker Jul 03 '16 at 01:09