diff --git a/CHANGELOG.md b/CHANGELOG.md index daa4cc1..d996870 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,23 @@ # Changes to sanitize.css +### 10.0.0 (June 3, 2019) + +- Added: Opinionated page measure via `page.css`. +- Added: Opinionated `border` normalization on form controls to match UA. +- Added: Opinionated `font` and `letter-spacing` as `inherit` on form controls. +- Added: Opinionated normalization of select controls. +- Added: Opinionated normalization of placeholders in Internet Explorer. +- Added: Opinionated `border` removal on iframes in all browsers. +- Removed: Opinionated `border-radius` on form controls. +- Removed: Opinionated `box-shadow` on form controls to match UA expectations. +- Fixed: `Edge` comments without `Chrome` are are changed to `Edge 18-`. +- Fixed: `Chrome` comments without `Edge` have `Edge` added. +- Fixed: Nested list `dl` normalizations split. +- Fixed: Logical `margin-block` normalization changed to `margin`. +- Fixed: Used consistent quotes around typefaces in `typography.css`. + +> These fixes were brought in from normalize.css v10.1.0. + ### 9.0.0 (May 16, 2019) - Removed: Opinionated removal of text shadow on text selections due to bugs in @@ -29,27 +47,25 @@ ### 7.0.2 (September 4, 2018) -- Restore form control margin normalizations in Firefox -- Re-order a few rules (opinionated) +- Fixed: Restored form control margin normalizations in Firefox +- Updated: Ordering of a few rules (opinionated) ### 7.0.1 (August 25, 2018) -- Support the 4-space tab width in Firefox (opinionated) -- Update documentation +- Added: Support the 4-space tab width in Firefox (opinionated) ### 7.0.0 (August 22, 2018) -- Use the default user interface font in all browsers (opinionated) -- Use the default monospace user interface font in all browsers (opinionated) -- Use a 4-space tab width in all browsers (opinionated) -- Fix correction of cursor style of increment and decrement buttons - in Safari, not Chrome -- Correct the text style of placeholders in Chrome, Edge, and Safari -- Remove unnecessary form control margin normalizations in Firefox -- Remove opinionated fieldset padding in all browsers -- Remove `::-moz-focus-inner` and `:-moz-focusring` normalizations - fixed in Firefox 53 - https://bugzilla.mozilla.org/show_bug.cgi?id=140562 +- Added: System font in all browsers (opinionated) +- Added: System monospace user interface font in all browsers (opinionated) +- Added: 4-space tab width in all browsers (opinionated) +- Removed: Unnecessary form control margin normalizations in Firefox +- Removed: Opinionated fieldset padding in all browsers +- Removed: Normalzations for `::-moz-focus-inner` and `:-moz-focusring` fixed + in Firefox 53 (https://bugzilla.mozilla.org/show_bug.cgi?id=140562) +- Fixed: Correction of cursor style of increment and decrement buttons in + Safari, not Chrome +- Fixed: Text style of placeholders in Chrome, Edge, and Safari ### 6.0.0 (June 24, 2018) @@ -79,8 +95,7 @@ - Added: Documentation for each opinionated feature - Added: Universal `background-repeat: no-repeat` - Removed: Reset of universal `margin` and `padding` -- Removed: Inheritance of `font-size` on elements - (form control elements still have it) +- Removed: Inheritance of `font-size` on elements (form controls still have it) - Removed: Pre-compiled files that used variables - Updated: `abbr[title]` styled using `border-bottom` over `text-decoration` - Updated: Tests and linting @@ -166,7 +181,7 @@ accurately indicate your changes coming from your files. - Added: `font-style` inheritance - Updated: Support for the latest **Firefox** - Removed: Redundant inheritance in ::before and ::after -- Removed: redundant cursor inheritance in anchor and form elements +- Removed: redundant cursor inheritance in anchor and form controls ### 1.1.0 (March 20, 2015) diff --git a/README.md b/README.md index fa1a78e..72abb23 100644 --- a/README.md +++ b/README.md @@ -13,16 +13,34 @@ documented. ``` -A separate stylesheet normalizes typography using system interface fonts. +### Forms + +A separate stylesheet that normalizes form controls without side effects. + +```html + +``` + +A separate stylesheet that sizes form controls without affecting native styles. + +```html + +``` + +### Typography + +A separate stylesheet that normalizes typography using system interface fonts. ```html ``` -A separate stylesheet normalizes forms using minimal, standards-like styling. +### Measure + +A separate stylesheet that applies a comfortable measure to the page. ```html - + ``` ### Install diff --git a/forms.css b/forms.css index 39a6881..4160d51 100644 --- a/forms.css +++ b/forms.css @@ -1,6 +1,6 @@ /** - * 1. Use standards-like styling in all browsers (opinionated). - * 2. Inherit typography styling in all browsers (opinionated). + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). */ button, @@ -8,13 +8,37 @@ input, select, textarea { background-color: transparent; /* 1 */ - border: 0 solid; /* 1 */ - border-radius: 0.25em; /* 1 */ - box-shadow: inset 0 0 0 1px WindowFrame; /* 1 */ + border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ - font-family: inherit; /* 2 */ - font-size: inherit; /* 2 */ - line-height: inherit; /* 2 */ + font: inherit; /* 2 */ letter-spacing: inherit; /* 2 */ padding: 0.25em 0.375em; /* 1 */ } + +/** + * Change the inconsistent appearance in all browsers (opinionated). + */ + +select { + -moz-appearance: none; + -webkit-appearance: none; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em; + border-radius: 0; + padding-right: 1em; +} + +/** + * Change the inconsistent appearance in IE (opinionated). + */ + +::-ms-expand { + display: none; +} + +/** + * Correct the inconsistent appearance in IE (opinionated). + */ + +:-ms-input-placeholder { + color: rgba(0, 0, 0, 0.54); +} diff --git a/package.json b/package.json index c0d788e..189185a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sanitize.css", - "version": "9.0.0", + "version": "10.0.0", "description": "A best-practices CSS foundation", "author": "Jonathan Neal ", "contributors": [ @@ -15,12 +15,13 @@ "style": "sanitize.css", "files": [ "forms.css", + "page.css", "sanitize.css", "typography.css" ], "scripts": { "prepublishOnly": "npm test", - "test": "stylelint forms.css sanitize.css typography.css" + "test": "stylelint *.css" }, "devDependencies": { "stylelint": "^10.0.1", diff --git a/page.css b/page.css new file mode 100644 index 0000000..5a7549e --- /dev/null +++ b/page.css @@ -0,0 +1,26 @@ +/** + * Use a comfortable measure in all browsers (opinionated). + */ + +html { + padding: 1em; +} + +@media (min-width: 34em) { + html { + padding: 1em calc(50% - 16em); + } +} + +/** + * Restrict sizing to the page width in all browsers (opinionated). + */ + +iframe, +img, +input, +select, +textarea { + height: auto; + max-width: 100%; +} diff --git a/sanitize.css b/sanitize.css index bd741f4..acb1d71 100644 --- a/sanitize.css +++ b/sanitize.css @@ -56,7 +56,7 @@ body { /** * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. + * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { @@ -68,25 +68,31 @@ h1 { * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome and Safari. + * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. */ dl dl, dl ol, dl ul, ol dl, +ul dl { + margin: 0; +} + +/** + * Remove the margin on nested lists in Edge 18- and IE. + */ + ol ol, ol ul, -ul dl, ul ol, ul ul { - margin-block-start: 0; - margin-block-end: 0; + margin: 0; } /** * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * 2. Show the overflow in Edge 18- and IE. */ hr { @@ -134,7 +140,7 @@ a { } /** - * Add the correct text decoration in Edge, IE, Opera, and Safari. + * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { @@ -205,6 +211,14 @@ audio:not([controls]) { height: 0; } +/** + * Remove the border on iframes in all browsers (opinionated). + */ + +iframe { + border-style: none; +} + /** * Remove the border on images within links in IE 10-. */ @@ -255,7 +269,7 @@ select { /** * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { @@ -275,15 +289,17 @@ button, } /** - * Correct the padding in Firefox. + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Correct the padding in Firefox. */ fieldset { - padding: 0.35em 0.75em 0.625em; + border: 1px solid #a0a0a0; /* 1 */ + padding: 0.35em 0.75em 0.625em; /* 2 */ } /** - * Show the overflow in Edge and IE. + * Show the overflow in Edge 18- and IE. */ input { @@ -291,7 +307,7 @@ input { } /** - * 1. Correct the text wrapping in Edge and IE. + * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ @@ -303,8 +319,8 @@ legend { } /** - * 1. Add the correct display in Edge and IE. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 1. Add the correct display in Edge 18- and IE. + * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { @@ -342,7 +358,7 @@ textarea { } /** - * 1. Correct the odd appearance in Chrome and Safari. + * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ @@ -370,7 +386,7 @@ textarea { } /** - * Remove the inner padding in Chrome and Safari on macOS. + * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { @@ -416,7 +432,7 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge and IE. + * Add the correct display in Edge 18- and IE. */ details { @@ -424,7 +440,7 @@ details { } /* - * Add the correct styles in Edge, IE, and Safari. + * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { diff --git a/typography.css b/typography.css index 1068808..9d91b89 100644 --- a/typography.css +++ b/typography.css @@ -6,11 +6,11 @@ html { font-family: system-ui, /* macOS 10.11-10.12 */ -apple-system, - /* Windows 6+ */ Segoe UI, - /* Android 4+ */ Roboto, - /* Ubuntu 10.10+ */ Ubuntu, - /* Gnome 3+ */ Cantarell, - /* KDE Plasma 5+ */ Noto Sans, + /* Windows 6+ */ "Segoe UI", + /* Android 4+ */ "Roboto", + /* Ubuntu 10.10+ */ "Ubuntu", + /* Gnome 3+ */ "Cantarell", + /* KDE Plasma 5+ */ "Noto Sans", /* fallback */ sans-serif, /* macOS emoji */ "Apple Color Emoji", /* Windows emoji */ "Segoe UI Emoji", @@ -27,13 +27,13 @@ kbd, samp, pre { font-family: - /* macOS 10.10+ */ Menlo, - /* Windows 6+ */ Consolas, - /* Android 4+ */ Roboto Mono, - /* Ubuntu 10.10+ */ Ubuntu Monospace, - /* KDE Plasma 5+ */ Noto Mono, - /* KDE Plasma 4+ */ Oxygen Mono, - /* Linux/OpenOffice fallback */ Liberation Mono, + /* macOS 10.10+ */ "Menlo", + /* Windows 6+ */ "Consolas", + /* Android 4+ */ "Roboto Mono", + /* Ubuntu 10.10+ */ "Ubuntu Monospace", + /* KDE Plasma 5+ */ "Noto Mono", + /* KDE Plasma 4+ */ "Oxygen Mono", + /* Linux/OpenOffice fallback */ "Liberation Mono", /* fallback */ monospace, /* macOS emoji */ "Apple Color Emoji", /* Windows emoji */ "Segoe UI Emoji",