Hướng dẫn reset normalize css npm

css-reset-and-normalize

A combination of css reset and normalize [available in CSS, SCSS, Stylus and LESS].

• About
  • Rules and Reasons
• Installation
• Usage
• Optional Addons:
  • Usage
• License

About

This combination of css reset and normalize is based on

• CSS Reset 2.0 [public domain] by Eric Meyer

• normalize.css 8.0.1 [MIT] by Nicolas Gallagher and Jonathan Neal

• Bootstrap 4.5.3 Reboot [MIT] by Twitter Inc.

Rules and Reasons

Take a look at the source code, it has comments.

BTW: Here's an article about Reboot, Resets and Reasoning by Chris Coyier.

Installation

css-reset-and-normalize is a npm package. You can install it…

# …using npm
npm install --save css-reset-and-normalize
# …or yarn
yarn add css-reset-and-normalize

You can also use the latest generated CSS directly from a CDN:

• from jsdelivr:
  

• from unpkg:
  

Usage

There are multiple ways:

• HTML

• CSS @import

  @import "path/to/reset-and-normalize.min.css";

• SCSS @import

  @import 'path/to/node_modules/css-reset-and-normalize/scss/reset-and-normalize';

• Stylus @require

  @require 'path/to/node_modules/css-reset-and-normalize/stylus/reset-and-normalize'

• LESS @import

  @import 'path/to/node_modules/css-reset-and-normalize/less/reset-and-normalize';

Optional Addons:

• button-reset
• link-reset

See source code.

Usage

The optional addons can be included the same way like the base library.

SCSS example:

@import 'path/to/node_modules/css-reset-and-normalize/scss/reset-and-normalize';
@import 'path/to/node_modules/css-reset-and-normalize/scss/button-reset';
@import 'path/to/node_modules/css-reset-and-normalize/scss/link-reset';

License

MIT © Simon Lepel

normalize.css

A modern alternative to CSS resets

NPM

npm install --save normalize.css

CDN

See //yarnpkg.com/en/package/normalize.css

Download

See //necolas.github.io/normalize.css/latest/normalize.css

What does it do?

• Preserves useful defaults, unlike many CSS resets.
• Normalizes styles for a wide range of elements.
• Corrects bugs and common browser inconsistencies.
• Improves usability with subtle modifications.
• Explains what code does using detailed comments.

Browser support

• Chrome
• Edge
• Firefox ESR+
• Internet Explorer 10+
• Safari 8+
• Opera

Extended details and known issues

Additional detail and explanation of the esoteric parts of normalize.css.

pre, code, kbd, samp

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

sub, sup

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

select

By default, Chrome on OS X and Safari on OS X allow very limited styling of select, unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

[type="checkbox"]

It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width.

[type="number"]

Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text.

[type="search"]

The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font, padding, border, or background. In Chrome and Safari on Windows you can't control border properly. It will apply border-width but will only show a border color [which cannot be controlled] for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs [e.g. showing past searches].

Contributing

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.