Browser Compatibility

From: af (CAER)27 Jun 2012 22:23
To: ANT_THOMAS 7 of 10
You might also want to look into Mustache or some other client-side templating thing. I like Mustache cos it's really simple, but others like Handlebars are good too if you want a bit more power.

Depends how you're gonna make the site really - for instance, the WoW Pet Database site I did makes heavy use of client-side templating because it's all on the one page (if you add the class 'logged_in' to the body element you can see some more stuff like the Edit/New box etc. although you won't be able to apply any changes).
EDITED: 27 Jun 2012 22:24 by CAER
From: Peter (BOUGHTONP)27 Jun 2012 22:56
To: ANT_THOMAS 8 of 10
quote:
...in one browser and something else in another? Is that even the right way to do it?

No, not least because you don't know what's going to happen with the next release of that browser, and you don't want to constantly be faffing around with the rate Google and Mozilla are incrementing their versions these days.


quote:
Anyone know of a reasonable guide to get this right?

Make sure the very first line begins with "<!doctype html>" - that is, no blank lines, no spaces, nothing before those fifteen characters, and no other alternative set of characters (some other versions also work, but not all, and there's no benefit to being more verbose than necessary).

That doesn't actually solve anything, it just makes sure you're working from a constant base (i.e. the browsers are [attempting to] obey the standards, rather than doing their own things).

Understanding how margin and padding are applied/combined helps, and that when you're setting "width" you're controlling the width of the content of that element (not of the element itself).
EDITED: 28 Jun 2012 10:59 by BOUGHTONP
From: af (CAER)28 Jun 2012 10:07
To: Peter (BOUGHTONP) 9 of 10
Isn't it <!doctype html> ?

quote:
Understanding how margin and padding are applied/combined helps, and that when you're setting "width" you're controlling the width of the content of that element (not of the element itself).


code:
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


Often makes life easier. Obviously can be applied more specifically if needed. This thing is an example of where border-box can really simplify the HTML.
EDITED: 28 Jun 2012 10:10 by CAER
From: Peter (BOUGHTONP)28 Jun 2012 11:05
To: af (CAER) 10 of 10
Oh, didn't realise that was actually supported now.

(dance)