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
<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.
- Top 10 Best free Web Browsers
- 11 Simple Ways to Improve Your Contact Form
- 2018 Web Design Trends
- Using arrow functions in ECMAScript 6
- 5 Tests That Will Ensure Your Website Stands Out
- Web Design Services
- Magento Developer
- WordPress Designer
- Top 7 Ways To Market Your Business Online Using Video [InfoGraphic]
- Did you just launch a new website? The ultimate guide on what to do next.
- Designing a simple navigation bar with Bootstrap 4
- Backup WordPress: How to backup up your WordPress website (2018 Update)
- Should you move your website to WordPress? [Infographic]
- WordPress FAQ
- Graphic Design in 2019: The top 14 trends we expect to see this new year
- Refactoring CSS Code (2018 Update)
- A look at Google Chrome’s New Security Update for 2017
- Magento Website Development: The Top 9 tips to improve sales
- Introducing Gutenberg, the new WordPress editor
- Sunlight Media is a Top LA Web Designer, Says Research Firm Clutch
- 10 Reasons Why To Choose Magento for Your E-commerce Website
- How to get rid of the “You have mail” Unix message
- WP Engine’s Staging Area has Revolutionized Our WordPress Development Process
- How to set up a Local Server Environment using MAMP
- Using Surge for deploying static sites (2018 Update)
- Our custom design process
- College Scholarships: Offering bi-yearly $500 scholarships
- An introduction to the htaccess file:The Ultimate Guide (2018 Update)
- Magento FAQ
- Some common use cases of Sass
- Fulfill Your Business’ Design Needs with Powered Template