@hi9mi/normalize-css

normalize css.

Installation

# npm
npm i @hi9mi/normalize-css

# yarn
yarn add @hi9mi/normalize-css

Usage

React:

import { StrictMode } from 'react';
import ReactDOM from 'react-dom';

import App from './App';

// Import normalize-css into index.js or index.ts before your styles
import '@hi9mi/normalize-css/index.min.css';

// Your styles
import './index.css';

const rootElement = document.getElementById('root');
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

CSS:

/* Import normalize-css into your index.css file */
@import '@hi9mi/normalize-css/index.min.css';

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

What's in normalize-css

/* # =================================================================
   # Document
   # ================================================================= */

/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/**
Reset `padding`, `margin` and `border` of all elements.
*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

/**
IE10+ in some cases does not support <meta name="viewport">.
*/
@-ms-viewport {
  width: device-width;
}

/**
 Add the correct display in IE.
*/
*[hidden] {
  display: none;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size (opinionated).
*/
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
  -moz-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
}

/* # =================================================================
   # General elements
   # ================================================================= */

/**
Body rules
1. Set base height 100% and min-height 100vh.
2. Set base width 100vw.
3. Set base font-size 100%.
4. Set base scroll-behavior smooth because I like the smooth scrolling to the anchors.
5. Set text-rendering optimizeSpeed because using optimizeLegibility you make your text look better but you can have problems with performance.
6. Set base overflow visible.
7. Set an explicit initial text-align value so that we can later use the
   `inherit` value on things like `<th>` elements.
 */
body {
  height: 100%; /* 1 */
  min-height: 100vh; /* 1 */
  width: 100vw; /* 2 */
  scroll-behavior: smooth; /* 4 */
  text-rendering: optimizeSpeed; /* 5 */
  overflow: visible; /* 6 */
  text-align: left; /* 7 */
}

/**
HTML5 display-role reset for older browsers.
*/
article,
aside,
details,
main,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/**
General reset styles.
*/
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;
  background: transparent;
}

/**
1. Show the overflow in Edge and IE.
2. Add the correct box sizing in Firefox.
3. Correct border color in Firefox.
*/
hr {
  overflow: visible; /* 1 */
  height: 0; /* 2 */
  color: inherit; /* 3 */
}

/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/* # =================================================================
   # Text-level semantics
   # ================================================================= */

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers.
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Tabular data
   # ================================================================= */

/**
1. Remove text indentation from table contents in Chrome and Safari.
2. Correct table border color inheritance in all Chrome and Safari.
3. Prevent double borders.
4. Remove border spacing in table
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
  border-spacing: 0; /* 4 */
}

/* # =================================================================
   # Forms
   # ================================================================= */

input {
  border-radius: 0;
}

/**
1. Specify font inheritance of form elements.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Restore the font weight unset by the previous rule
*/
optgroup {
  font-weight: bold;
}

/**
Address `overflow` set to `hidden` in IE 8/9/10/11
*/
button {
  overflow: visible;
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/**
Apply cursor pointer to button elements
*/
button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
  cursor: pointer;
  color: inherit;
}

/**
Remove clear button in IE
*/
input::-ms-clear {
  display: none;
}

/**
Replace pointer cursor in disabled elements
*/
[disabled] {
  cursor: default;
}

/**
Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

/**
1. Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4.
2. Correct the inability to style clickable types in iOS.
*/
button,
html [type='button'], /* 1 */
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 2 */
}

/**
Remove the default styling in all browsers.
*/
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/**
Style select like a standard input
*/
select {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Chrome */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

/**
Remove the additional ':invalid' styles in Firefox.
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
1. Correct `color` not being inherited in IE 8/9/10/11.
2. Correct the color inheritance from `fieldset` elements in IE.
3. Correct the text wrapping in Edge and IE.
4. Correct the text wrapping in Edge and IE.
5. Correct the text wrapping in Edge and IE.
6. Correct the text wrapping in Edge 18- and IE.
*/
legend {
  border: 0; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 3 */
  max-width: 100%; /* 4 */
  white-space: normal; /* 5 */
  max-width: 100%; /* 6 */
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
  color: inherit;
}

/**
1. Internet Explorer 11+.
2. Specify textarea resizability.
*/
textarea {
  overflow: auto; /* 1 */
  resize: vertical; /* 2 */
}

/* # =================================================================
   # Links
   # ================================================================= */

/**
1. Remove the gray background on active links in IE 10.
2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
Remove the outline when hovering in all browsers
*/
a:active,
a:hover {
  outline-width: 0;
}

/* # =================================================================
   # Quotes
   # ================================================================= */

blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

/* # =================================================================
   # Images
   # ================================================================= */

/**
Making it easier to work with images.
*/
img {
  max-width: 100%;
  display: block;
}

/*
Remove the border on images inside links in IE 10.
*/
img {
  border-style: none;
}