Achieving Consistent Web Design with Normalize.css
Browser compatibility is crucial for web accessibility. Developers must consider the variety of audience devices and browser versions that require support. While CSS resets are one option, most developers prefer Normalize.css for its simplicity and cross-compatibility across all modern web browsers.
In this post, I’ll cover the basics of Normalize.css and how it compares to traditional CSS resets. This isn’t a complex library, and understanding it shouldn’t take more than a couple of hours. The key to using Normalize is learning how to implement it effectively and judiciously.
Browser Resets vs. Normalize.css
For years, I’ve relied on a customized version of Eric Meyer’s CSS resets. These have been sufficient for most of my projects and haven’t caused any major issues. However, Normalize.css changed my perspective on resets because it works differently than a CSS reset. It’s important to understand the differences.
Think of Normalize as a consistent layer applied to all browsers, while a CSS reset is more like a complete overhaul of all browser styles.
Normalize.css styles and formats elements like headings, paragraphs, and blockquotes so they appear consistently (or close enough) across all supported browsers. In contrast, CSS resets completely wipe the slate clean, leaving no default styles for any elements.
With a CSS reset, your headings can look identical to your paragraphs; elements have no padding, margins, or spacing of any kind. After a reset, you must write new code to enhance the style. With Normalize.css, you get a pre-defined style that can be built upon.
So, is one approach better than the other? It’s a hotly debated topic, although some argue that Normalize.css offers better compatibility and smaller file sizes.
“I would argue that normalization is better than resetting. It results in less CSS being transferred, better use of user agent defaults, and a better understanding of how elements are meant to display.”
Whether you prefer Normalize.css or a traditional reset, it’s important to understand both approaches and choose the one that best fits your needs. Very few developers start coding from scratch, so Normalize.css or a CSS reset is almost essential for modern frontend development.
If you’re interested in trying a CSS reset, here are some popular options:
Using Normalize.css in Your Projects
Normalize.css creator Nicolas Gallagher describes it as:
“Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready alternative to the traditional CSS reset.”
Over the years, Normalize.css has become a trusted tool used by developers worldwide. It has even been incorporated into popular frameworks like Bootstrap and Pure CSS.
There are two primary ways to use Normalize.css in a project: customize the source file to create your own version or use it as a base and add additional styles on top.
The first method involves going through the Normalize.css file and removing any styles you don’t need, allowing you to create a custom stylesheet. This is ideal for reducing file size on a per-project basis.
Alternatively, some developers include the entire Normalize.css file and build their custom styles on top of it. The full Normalize.css stylesheet contains over 420 lines of code, equating to approximately 6.8KB uncompressed.
Neither method is inherently better, so it’s worth experimenting to see what works best for each project and your preferred workflow.
To get started, you can download Normalize.css from GitHub or host it from an external CDN. You can also pull the latest version of Normalize.css via NPM with the following command:
npm install --save normalize.css
If you prefer not to download any files, you can create a new CodePen project and add Normalize.css with just a click.
Since Normalize.css is modular, you can remove sections as needed or create your custom build. For example, you might start a project with just the HTML5 display elements while omitting styles for embedded content.
Each rule in Normalize.css is accompanied by a CSS comment explaining its purpose and which issues it resolves. Some are straightforward, like setting display:block on newer HTML5 elements.
Others are more subtle, such as the following SVG code, which hides overflow in Internet Explorer:
svg:not(:root) {
overflow: hidden;
}
I highly recommend skimming the stylesheet to understand how it operates and to determine if Normalize.css is right for your project.
Normalize.css in Modern Web Design
The latest version of Normalize.css v4.0 offers broad browser support, including:
- Chrome (latest two versions)
- Edge (latest two versions)
- Firefox (latest two versions)
- Firefox ESR
- Internet Explorer 8+
- Opera (latest two versions)
- Safari 6+
Normalize.css may support older browser versions with continuous updates, like Firefox. However, official support is limited to the two most recent versions of Chrome, Edge, Firefox, and Opera.
Older browsers, such as IE6+ and Safari 4+, were supported with Normalize.css v1, but that version is no longer updated.
It’s crucial to check your website’s browser usage data using tools like Google Analytics to determine if Normalize.css is suitable for your modern web design projects.
Further Resources
There’s not much to specifically teach about Normalize.css, so most learning happens through practical application.
In reality, there’s little that you can’t pick up by reading the Normalize.css stylesheet and adapting the code as needed. However, if you’re looking for additional resources, I’ve listed some relevant links below.