Solution To The Browser Inconsistency Problem

Normalize CSS approach or the CSS Reset Approach

Please SUBSCRIBE my YouTube Channel: FrontEnd Interview Preparation: https://www.youtube.com/channel/UC-elmWUfbcbmvuhlS12nCtg

As a rule, we want an HTML element to look the same way, independent of which browser is being used to view it. Unfortunately, this is not the case because of the way browsers run.

CSS Resets

• A CSS resets aims to remove all built-in browser styling. It says we don’t need the browsers’ default styles at all.
• A CSS Reset (or “Reset CSS”) is a set of CSS rules that resets the styling of all HTML elements that come with the browser’s user agent.
• In the CSS Reset way, we define all HTML tags to have no padding, no margin, no border, the same font size, and the same alignments.

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; 
}

• The problem with CSS Resets is that they are ugly: they have a big chain of selectors, and they make a lot of unnecessary overrides.

Is CSS reset necessary?

• No. I actually think it never has been necessary. But a CSS reset will help you to make your project look the same in every browser and might save you a lot of time for browser testing and debugging.

CSS Normalize

• Normalize CSS aims to make built-in browser styling consistent across browsers.
• Removes only inconsistent styles and keeps as many common styles as possible
• The best CSS reset library in 2021 — Normalize. css is a CSS reset library, makes browsers render all elements more consistently and in line with modern standards, and precisely targets only the styles that need normalizing.
• If there is an inconsistency in one of the browsers, the normalize.css styles will fix the browser style that has the difference.
• Use normalize.css as a starting point for your own project’s base CSS, customizing the values to match the design’s requirements.
• Or include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

A quick example of how

In this code, Browser 1 will have a preset h1 defined font-size of 3rem

elementExample {
  font-size: 3rem;
}

Browser 2 will have a preset h1 defined font-size of 2.5rem

elementExample {
  font-size: 2.5rem;
}

When normalize.css is included at the top of a CSS project, it will ensure all elements’s have a font size 2rem until overridden.

elementExample {
  font-size: 2em;
}

As long as the font-size is not changed, the font-size will be consistent across all browsers.

Summary

• All browsers have their own styles. The purpose of normalize.css is to make those styles more consistent across all browsers.
• Normalize.css is a great tool that was relied on for a long time. Now, it is still an important source for defining CSS style standards. It may not need to be included in all projects.
• My suggestion to you is to use Normalize CSS with a little bit of CSS Reset. Use them both, but wisely!

Keep learning, keep growing!

Don’t forget to follow me for more such articles.

Let’s connect on LinkedIn!. Please read more for more data structure javascript questions.

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer