CSS browser compatibility and reset

Cascading Style Sheets are the design basis for any modern website. They efficiently direct the visual display of the HTML in the browser. Nowadays it is common understanding that HTML contains content only, while all design resides in other resources, such as css or image files. With CSS you effectively program your design with an expectation of it working in all browsers.

Different interpretation

Even though CSS is standardized like HTML, the different browsers interpret instructions slightly different – just like they support or understand HTML tags slightly different. This is an unfortunate side effect of browser developers being at different stages in the implementation of new standards (and in some cases even their attempts of implementing own custom functionality which deviates from the standards). The end result of this is different display of the same information in different browsers, which often causes big headaches to web developers.

The only solution to different interpretations of the same CSS instructions is to consider the different browsers and implement scenarios based on that, for example using targeting.

The example below only includes the listed stylesheet in Internet Explorer (all versions):

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

The example below only includes the listed stylesheet in Internet Explorer version 7.

<!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

The example below only includes the listed stylesheet in Internet Explorer version lower than 8.

<!--[if lt IE 8]>
   <link rel="stylesheet" type="text/css" href="lower-than-ie8.css" />
<![endif]-->

The example below includes the liste stylesheet in any browser except Internet Explorer versions.

<!--[if !IE]><!-->
   <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

This gives you a good picture of the combinatory options available when designing your browser specific stylesheets to address these issues. There are many more options available to suit your specific needs.

Reset CSS

Different default displays of HTML elements is the second problem with different browsers for the same CSS information. The problem here is that one browser will apply certain font-size, padding, margin or other visual instructions to an element, while another browser may or may not do the same. Essentially a simple <h1> tag may look very different in browsers, if not accompanied by extensive CSS instructions to override any browser-specific defaults.

Many developers try to overcome this issue by using a general reset stylesheet for their CSS. This method applies some general defaults defined by your CSS to all elements, instead of using the browsers default values. This method enables you to start with a “clean slate” when it comes to applying your own styles to HTML elements. It eliminates the differences and normalizes all elements, before you start applying any custom design.

There are many variations of reset stylesheets available. Essentially they are all very similar and achieve the same thing.

Below is an example version of a reset stylesheet (notice how all elements are being reset with zero margin, padding, border font-size etc.):

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;

}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Remember to use a minified version of the stylesheet for better performance. You could even include it from a CDN (Content Delivery Network) if available, or combine it with a minified version of your own stylesheets – to reduce the amount of files and filesize to be included during the pageload.

Servage Magazine