To be aware of browser incompatibility due to the supported version of the CSS property
To learn how to set default property values in every browser
Have you experienced that your webpage is not consistent in spacing when viewed by other browsers?
Well, this is natural. Browsers may give default attributes to HTML elements, causing sites to look different based on the version of the browser. For example, in Edge, an h1 element may have a certain margin and padding causing your site to look one way, while Chrome may give the h1 a slightly different margin/padding. This problem can be compounded when different browsers have different default font sizes for displaying text, different default font style they are using for the padding, default height or width it provides to some of the inline elements, etc.
These differences can cause a headache, especially if you're trying to make your site look consistent throughout different browsers/versions.
To solve many cross-browser issues, it's encouraged that you use:
A widely used alternative to CSS resets is normalize.css. To use this, the file can be downloaded and linked as an external stylesheet in your HTML document, or you can link online via URL.
In fact, technical recruiters love to ask about how to make your site look consistent throughout different browsers. When they ask you this, you should be able to explain (with confidence) what reset/normalizing means and why they are used. You should also tell them that in addition to this, it's important to know if the CSS property you used needs a vendor prefix to fix cross-browser compatibility issues.
Vendor prefixes are prefixes added before the property name. Got curious what are the browser prefixes and why it is used?
CSS Reset
Have you experienced that your webpage is not consistent in spacing when viewed by other browsers?
Well, this is natural. Browsers may give default attributes to HTML elements, causing sites to look different based on the version of the browser. For example, in Edge, an
h1element may have a certain margin and padding causing your site to look one way, while Chrome may give theh1a slightly different margin/padding. This problem can be compounded when different browsers have different default font sizes for displaying text, different default font style they are using for the padding, default height or width it provides to some of the inline elements, etc.These differences can cause a headache, especially if you're trying to make your site look consistent throughout different browsers/versions.
To solve many cross-browser issues, it's encouraged that you use:
CSS Reset
Here is a great explanation of what CSS resets are, why we use them, and some examples: http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
Normalize
A widely used alternative to CSS resets is normalize.css. To use this, the file can be downloaded and linked as an external stylesheet in your HTML document, or you can link online via URL.
Find more information about what it does and why it is preferable to CSS resets here: https://github.com/necolas/normalize.css/
In fact, technical recruiters love to ask about how to make your site look consistent throughout different browsers. When they ask you this, you should be able to explain (with confidence) what reset/normalizing means and why they are used. You should also tell them that in addition to this, it's important to know if the CSS property you used needs a vendor prefix to fix cross-browser compatibility issues.
Vendor prefixes are prefixes added before the property name. Got curious what are the browser prefixes and why it is used?
Check this out: https://www.thoughtco.com/css-vendor-prefixes-3466867