diff options
author | Jonathan Neal <jonathantneal@hotmail.com> | 2018-11-09 19:14:12 -0500 |
---|---|---|
committer | Jonathan Neal <jonathantneal@hotmail.com> | 2018-11-09 19:14:12 -0500 |
commit | 18087126df48eace1658e4118d654b920125e949 (patch) | |
tree | d8a13d426537fb1f7303255b77aa9e54f0d22ff7 | |
parent | 3f3cbc206ee5fb63ae6b67ec81a1aae80944a1c2 (diff) | |
download | normalize.css-18087126df48eace1658e4118d654b920125e949.tar.gz normalize.css-18087126df48eace1658e4118d654b920125e949.zip |
Update documentation, add unopinionated version
-rw-r--r-- | README.md | 10 | ||||
-rw-r--r-- | opinionated-normalize.css | 399 |
2 files changed, 404 insertions, 5 deletions
@@ -1,6 +1,6 @@ -# normalize.css [<img src="https://camo.githubusercontent.com/0d1347e7b4ede3d714150c863a44c932f3c4d84e/68747470733a2f2f6e65636f6c61732e6769746875622e696f2f6e6f726d616c697a652e6373732f6c6f676f2e737667" alt="normalize" width="90" height="90" align="right">][normalize.css] +# csstools-normalize [<img src="https://camo.githubusercontent.com/0d1347e7b4ede3d714150c863a44c932f3c4d84e/68747470733a2f2f6e65636f6c61732e6769746875622e696f2f6e6f726d616c697a652e6373732f6c6f676f2e737667" alt="normalize" width="90" height="90" align="right">][csstools-normalize] -[normalize.css] is a CSS library that provides consistent, cross-browser +[csstools-normalize] is a CSS library that provides consistent, cross-browser default styling of HTML elements. ## Usage @@ -11,13 +11,13 @@ npm install --save @csstools/normalize.css ### Usage in npm and webpack -Import [normalize.css] in CSS: +Import [csstools-normalize] in CSS: ```css @import '~@csstools/normalize.css'; ``` -Alternatively, import [normalize.css] in JS: +Alternatively, import [csstools-normalize] in JS: ```js import '@csstools/normalize.css'; @@ -74,4 +74,4 @@ contribution process easy and effective for everyone involved. normalize.css is a project by [Jonathan Neal](https://github.com/jonathantneal), co-created with [Nicolas Gallagher](https://github.com/necolas). -[normalize.css]: https://github.com/csstools/normalize.css +[csstools-normalize]: https://github.com/csstools/normalize.css diff --git a/opinionated-normalize.css b/opinionated-normalize.css new file mode 100644 index 0000000..3a92cc5 --- /dev/null +++ b/opinionated-normalize.css @@ -0,0 +1,399 @@ +/*! normalize.css v9.0.1 | MIT License | github.com/csstools/normalize.css */ + +/* Document + * ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + * ========================================================================== */ + +/** + * Remove the margin in all browsers. (opinionated) + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + * ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * Add the correct display in IE. + */ + +main { + display: block; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + * ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* Embedded content + * ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + * ========================================================================== */ + +/** + * Remove the margin in Safari. + */ + +button, +input, +select { + margin: 0; +} + +/** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + +button { + overflow: visible; /* 1 */ + text-transform: none; /* 2 */ +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * Show the overflow in Edge and IE. + */ + +input { + overflow: visible; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +select { + text-transform: none; +} + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + * 3. Remove the default vertical scrollbar in IE. + */ + +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + overflow: auto; /* 3 */ +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 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 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 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 */ +} + +/** + * Remove the inner border and padding of focus outlines in Firefox. + */ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/* Interactive + * ========================================================================== */ + +/* + * Add the correct display in Edge and IE. + */ + +details { + display: block; +} + +/* + * Add the correct styles in Edge, IE, and Safari. + */ + +dialog { + background-color: white; + border: solid; + color: black; + display: block; + height: -moz-fit-content; + height: -webkit-fit-content; + height: fit-content; + left: 0; + margin: auto; + padding: 1em; + position: absolute; + right: 0; + width: -moz-fit-content; + width: -webkit-fit-content; + width: fit-content; +} + +dialog:not([open]) { + display: none; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + * ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* User interaction + * ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} |