What is modern-normalize?
The modern-normalize npm package is a modern CSS reset that helps to make built-in browser styling consistent across different browsers. It is a modern alternative to the traditional normalize.css, providing a more up-to-date approach to CSS normalization.
What are modern-normalize's main functionalities?
CSS Reset
This feature allows you to import the modern-normalize CSS reset into your project, ensuring that your styles are consistent across different browsers.
/* Import modern-normalize in your CSS file */
@import 'modern-normalize';
Consistent Box Sizing
This feature ensures that the box-sizing property is set to border-box for all elements, making it easier to manage layouts and avoid unexpected behavior.
/* Example of consistent box sizing */
* {
box-sizing: border-box;
}
Improved Typography
This feature sets a consistent line-height and font-family for the body element, improving the readability and appearance of text across different browsers.
/* Example of improved typography */
body {
line-height: 1.5;
font-family: system-ui, sans-serif;
}
Other packages similar to modern-normalize
normalize.css
normalize.css is a popular CSS reset library that makes built-in browser styling consistent across different browsers. It is the predecessor to modern-normalize and provides a more traditional approach to CSS normalization.
reset-css
reset-css is another CSS reset library that provides a minimalistic approach to resetting default browser styles. It is less comprehensive than modern-normalize but can be useful for projects that require a simpler reset.
sanitize.css
sanitize.css is a CSS library that provides both a reset and a set of base styles for consistent and clean default styling across browsers. It offers more features than modern-normalize, including additional base styles for common HTML elements.
If you have questions about the source, check out the original source and this for details.
The goal of this project is to make itself obsolete.
Browser support
- Latest Chrome
- Latest Firefox
- Latest Safari
Install
npm install modern-normalize
Download
CDN
Usage
@import 'node_modules/modern-normalize/modern-normalize.css';
or
<link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css">
FAQ
Can you provide Sass, Less, etc, ports?
There's absolutely no reason to have separate ports for these. They are just CSS supersets and can import CSS directly.
Related