Using A CSS Reset For Better Cross-Browser Compatibility

Cross-Browser Compatibility

One of the most difficult aspects of web design and development is cross-browser compatibility. It’s one thing to create a great looking layout, but getting that new design to display exactly the same, regardless of the browser, is another story entirely. Every browser makes certain stylistic decisions as to how content should be displayed, and getting a site to look right in every browser once took an enormous amount of testing and tweaking. To aid in this tedious process, designers and developers are now turning to what is referred to as a CSS Reset.

Why Use A CSS Reset?

Every web browser, whether it be Google Chrome, Firefox, or Internet Explorer, contains its own built-in default stylesheet. This means that the creators of browsers have determined styles that should be applied to all webpages as a default. These default settings come in the form of adding margin, padding, and line height styles, default font faces to use, and many other decisions that are intended to make a standard HTML page appear as best as possible.

The problem with this is that the default styles in each browser are not consistent. While the margin settings in your stylesheet may look great in one browser, they could look totally different in another. This issue is particuly acute when designing for Internet Explorer in mind, where disparities in default settings are more apparent.

Available CSS Resets

One of the first and most popular CSS Resets produced is Eric Meyer’s CSS Reset, originally appearing in 2008. This is also one of the shortest and simple of resets available, at only 43 lines of code.

Arguably the most used and standard of resets though, is normalize.css. Described as an “alternative to CSS resets”, normalize.css aims to preserve useful browser defaults instead of changing them, normalize styles for HTML elements, and correct various browser inconsistencies. normalize.css is used in many popular projects and CSS frameworks, such as Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, and many others.

There are tons of other options and variants of resets available, although the two mentioned above are a great place to start. Go with Eric Meyer’s reset if you want simple and to the point, go with normalize.css if you want something a bit more extensive, covering almost all of the potential cross-browser issues.

How To Use A CSS Reset

Using a CSS reset is very simple. In the case of normalize.css, for example, simply download the CSS file from the official site, and then link to it in the <head> of your .html file:

 

<link rel="stylesheet" href="assets/styles/normalize.css">

 

Just make sure that the reset stylesheet is placed before your main stylesheet with your custom styles, otherwise this defeats the purpose of doing a reset:

<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">

 

Alternatively, you could also only use the reset rules that you need, and either place those in a separate stylesheet, or include in your main .css file. For example, if you know your site won’t contain any <table> elements, you can remove any styles applied to tables. This will cut down on the file size as well as HTTP requests if only using a single file.

Resources

 

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC