Guide: How to use Normalize.css For Development
Browser compatibility is a big part of accessibility on the web. Developers must consider it variance of their audience and browser versions needing supportWhile CSS resets are an option, most developers prefer Normalize.css for its simplicity and compatibility with all modern web browsers. In this post, I’ll cover it the basics of Normalize and how it relates to common CSS resetsThis is not a complicated library and should take no more than a few hours to understand. But the key to normalizing is learning how to perform it correctly and judiciously.
Browser reset versus normalize
I used a modified version of Eric Meyer’s CSS resets for years. These were enough for most of my projects and didn’t cause any major problems. However, Normalize has changed my view of resets because it works differently from a CSS reset. It is important to understand the differences. Think of Normalizing as one garment applied consistently across all browsers, and think of one CSS reset as a thermonuclear detonation in all browsers. Normalize styles and formatting of headings, paragraphs, block quotes, and common elements so that they are appear identical (or close enough) in all supported browsers. CSS reset completely wipe the slate, so there are no default values for all. With a CSS reset, your headings can look the same as your paragraphs; elements have no padding, margins, or spacing of any kind. With a CSS reset you must enter a new code to improve the style. With Normalize you get a pre-designed style that can be built on. So is one of these better than the other? It is a hotly debated topic, although one point of argument states that Normalizing works better for compatibility and produces smaller file sizes “I would have to say normalization is better than reset. It will result in less CSS transfer over the thread, better use of UA defaults, and a better understanding of how elements should be displayed. “ Whether you fall in love with Normalize or prefer a typical reset, it’s important to at least understand both sides and choose what fits best. Very few developers start coding from scratch, so normalizing or a CSS reset is almost required for modern frontend development. If you’d like to try a CSS reset, here are some popular choices:
Eric Meyer’s resets Reset HTML5 HTML5Doctor Reset
Normalize Config
Normalize creator Nicolas Gallagher wrote an introductory post leading with this statement: “Normalize.css is a small CSS file that provides better cross-browser consistency in the standard style of HTML elements. It’s a modern, HTML5 ready alternative to the traditional CSS reset. “ Over the years, this has grown into a trusted library used by developers worldwide. In fact, Normalize has been used to some extent in Bootstrap and Pure CSS. There are two ways to use Normalize in a project: edit the source to customize your own Normalize stylesheet, or use it as a base and add styles to it. The first is a pick-and-choose strategy where you go through the Normalize.css file and delete anything you don’t need to create your own custom stylesheet. This is best per project to keep file size low. Alternatively, some developers include the entire Normalize.css file and build their own stylesheet on top of it. The full Normalize style sheet includes 420+ lines of code, which equates to ~ 6.8 KB uncompressed. Neither method is better than the other, and it’s worth following what works best for each project or your favorite workflow. To get started, download a copy of Normalize from GitHub or host it from an external CDN. You can also get the latest version of Normalize directly from NPM, such as: npm install – save normalize.css If you don’t want to download files, you can even create a new CodePen project to which you can add Normalize with the click of a button Since Normalize is modular, you can temporarily remove sections or even create your own customization of Normalize. You can then start any project with selected parts, such as the HTML5 display elements, while removing embedded content styles. Each Normalize line has a corresponding CSS comment explaining what it does and what problems / bugs it fixes. Some are obvious, such as setting display: block on newer HTML5 elements. Others are less obvious, like this SVG code hiding overflow in Internet Explorer: svg: not (: root) {overflow: hidden;} I highly recommend reviewing the stylesheet to see exactly how it works and if Normalize is right for your project.
Normalize.css in web design
The latest version of Normalize v4.0 offers wide browser support.
Chrome (last two) Edge (last two) Firefox (last two) Firefox ESR Internet Explorer 8+ Opera (last two) Safari 6+
As far as I can tell, Normalize may support older versions of browsers with constant updates such as Firefox. But the “official” support only includes the two most recent versions of Chrome / Edge / FF / Opera. IE6 + and Safari 4+ are also supported with Normalize v1, but that version will no longer be updated. It is crucial that you check browser versions with a tool like Google Analytics. This will give you a better idea of whether Normalize can be a useful tool for modern web design.
Further sources
There is not much to teach specifically about Normalizing, so most learning happens by doing. And truthfully, there is not much to explain that you cannot choose up by reading the style sheet and copying / changing the code as needed. But if you are looking for other relevant information I have added some links below.
Related articles
Nicolas Gallagher: About Normalize.css Introduction to HTML5 Boilerplate Normalize.css vs Reset.css: Which One to Use?
Introduction videos
Normalize CSS Resets and normalize by Envato Nicolas Gallagher – Thinking beyond scalable CSS
How to use Normalize.css For Development: benefits
Faq
Final note
I hope you like the guide How to use Normalize.css For Development. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to use Normalize.css For Development, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to use Normalize.css For Development”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to use Normalize.css For Development, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
