Browser compatibility

We’re all aware of one of the reasons why most developers get headaches when it comes to web design, and that is browser compatibility. It is hard to maintain a web page’s look and feel and have it cross-browser as well.
I will share a CSS method to remove a lot of errors we meet on a daily basis, but for starters I’ll get a bit technical to see why these browser differences keep on happening.

Back in the old days, when Internet Explorer 5.*/6.* and Netscape 4.* were commonly used, browsers had the bad habit of adding unique HTML fancy styles, that would only be recognized by them. Sure, developers enjoyed the extra styles they had in their hands on netscape, but that to the point they had to make their web pages cross-browser, giving them quite some headaches.

Browser engines
Each browser has its own custom engine that reads the html code and displays a page with its own rules. It’s true that nowadays most of the popular browsers have adapted a common standard, more and more closer to World Wide Web Consortium’s Standards (www.w3.org)
However, the most known difference between browsers is element spacing, they all have a different set of rules when they arrange your HTML elements on a page, some have a smaller or larger margin and padding and I am sure you have noticed it yourself, while viewing on different browsers a few simple HTML elements, and still get a slight difference. You can fix this by globally setting the same padding and margin, but I will get to this a bit later.

Fonts
So many good looking fonts out there, but so few we can rely on. Some use fonts which go well on some areas, but do not consider whether they are available by default on most, if not all platforms.
Here’s a list of cross-platform fonts: Arial, Arial Black, Comic Sans MS, Courier, Courier New, Georgia, Helvetica, Impact, Lucida Console, Monaco, Tahoma, Verdana and there are a lot more, you should find some good updated lists of cross-platform fonts on the web, do some researches. Verdana and Arial seem to be the most used fonts, because they’re most ranked on typography, very recommended fonts for safe, better and healthy reading.

Operating Systems
Quite hard to check the browser compatibility of a web page, because it’s not just the browser versions we are to worry about, but also about each browser version on each operating system and the versions on their end. Browsers have to be rebuilt for another operating system, thus, leading to an inevitable different browser engine and browser display.

Resetting browser’s default styles
As explained at the beginning of this article, browsers have a default style for most of the HTML elements and sadly, these styles differ from browser to browser, thus, leading to instable display of our HTML pages. But what if we reset these default styles? Some already reset some of the styles, maybe even unintentionally, but I am talking about a global reset almost on the entire HTML elements, removing their styles, their padding and margin. Sounds great? It is great! Because with this reset, we can adjust our elements from a point which all the browsers will recognize, and that is 0.
There are more reset styles out there already, since developers have begun using this method a lot lately. I have decided to use Eric Meyer’s reset style sheet for this article, since it’s the most commonly used.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

If you notice, most of the styling that’s being done there, is to set all the elements’ margin and padding to 0, removing the spacing issue we meet over the browsers and I can say that we have already removed most of the incompatibility issues. Go ahead and study the styles, I suggest you learn more about it at Eric Meyer’s website www.meyerweb.com
The best way to use the global reset style sheet, is to create a dedicated .css file for it and load it as the first CSS document within your section in your HTML documents. You’ll want to have the other styles following after it, so your written styles will override the resetting style sheet.

Internet explorer exceptions
Unfortunately, Internet Explorer has been found as the Browser with most issues, due to its lack of W3 standard support, but of course, I’m talking about older versions (i.e. Internet Explorer 5.* / 6.* / 7.*). 8.* has shown greater support and seems to be very appreciated by the developers. But we are still dealing with its older versions and there are times when we simply can’t avoid some issues with them, but we can manage those too with the IF IE conditions. Microsoft has implemented the IF IE conditions so developers can find out if users are browsing with Internet Explorer and which version, then we can add extra code where only Internet Explorer can read, thus, fixing its bugs without affecting the other browsers.
Here are some samples of how you can use the IF conditions with Internet Explorer:

<!–[if IE]>
You are using Internet Explorer!
<![endif]–>
<!–[if IE 7]>
You are using Internet Explorer 7
<![endif]–>
<!–[if gt IE 5]>
You are using a version above Internet Explorer 5
<![endif]–>
<!–[if lt IE 6]>
You are using a version below Internet Explorer 6
<![endif]–>
<!–[if lte IE 7]>
You are using Internet Explorer 7 or an older version
<![endif]–>
<!–[if gte IE 6]>
You are using Internet Explorer 6 or a newer version
<![endif]–>

Syntaxes:
GT = Greater Than
GTE = Greater Than or Equal to
LT = Less Than
LTE = Less Than or Equal to

Conclusion
It’s highly important for your web pages to be cross-browser, it is why you have to be extra careful on the fonts you use, how your pages are viewed on most of the browsers and no matter how simple the web page is, the global reset should be there.
There are some good tools out there giving you the possibility to test your pages in more browsers, without having them installed.

No related posts.