Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
sanitize.css
Advanced tools
sanitize.css - npm Package Compare versions
Comparing version 3.3.0 to 4.0.0
@@ -0,1 +1,20 @@ | ||
| ## 4.0.0 (2016-06-20) | ||
| - Added: All improvements from normalize.css v4.1.1 | ||
| - 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: Pre-compiled files that used variables | ||
| - Updated: `abbr[title]` styled using `border-bottom` over `text-decoration` | ||
| - Updated: Tests and linting | ||
| ### Why are variables removed in v4? | ||
| Variables were there for developers to override styles in sanitize.css without | ||
| editing the original file or overriding the rule. However, you *should* override | ||
| the rule so that your change is explicit, and so that your source maps | ||
| accurately indicate your changes coming from your files. | ||
| ## 3.3.0 (2016-03-03) | ||
@@ -7,3 +26,4 @@ | ||
| - Added: `svg` fill as the current color | ||
| - Updated: Organized rules into normalization, universal inheritance, opinionated defaults, and configurable defaults | ||
| - Updated: Organized rules into normalization, universal inheritance, | ||
| opinionated defaults, and configurable defaults | ||
| - Updated: Moved source and compiled libraries | ||
@@ -62,3 +82,4 @@ | ||
| - Updated: Form styling | ||
| - Updated: Support for the latest **Chrome**, **Edge**, **Firefox**, and **Safari** | ||
| - Updated: Support for the latest **Chrome**, **Edge**, **Firefox**, | ||
| and **Safari** | ||
| - Updated: Licensing reference in package.json | ||
@@ -87,3 +108,10 @@ - Updated: Development dependencies | ||
| > Normalize.css had and still has opinionated, developer-centric styles. For example, `sub` and `sup` elements are styled to not impact the line height of text, and `table`, `th`, and `td` omit all spacing. As Nicolas pushed Normalize.css into maturity, future preferences like these no longer had a place in the project. Almost a year later, Sanitize was officially branded. Where Normalize.css conservatively follows user agent consensus and results in more pre-styled elements, Sanitize.css liberally follows developer consensus and results in more unstyled elements. | ||
| > Normalize.css had and still has opinionated, developer-centric styles. For | ||
| example, `sub` and `sup` elements are styled to not impact the line height of | ||
| text, and `table`, `th`, and `td` omit all spacing. As Nicolas pushed | ||
| Normalize.css into maturity, future preferences like these no longer had a | ||
| place in the project. Almost a year later, Sanitize was officially branded. | ||
| Where Normalize.css conservatively follows user agent consensus and results | ||
| in more pre-styled elements, Sanitize.css liberally follows developer | ||
| consensus and results in more unstyled elements. | ||
@@ -90,0 +118,0 @@ ## 0.0.0 (2011-04-21) |
| { | ||
| "name": "sanitize.css", | ||
| "version": "3.3.0", | ||
| "description": "Render elements consistently. Follow best practices.", | ||
| "version": "4.0.0", | ||
| "description": "The best-practices alternative to CSS resets.", | ||
| "main": "index.js", | ||
| "style": "sanitize.css", | ||
| "files": [ | ||
| "sanitize.css", | ||
| "lib/sanitize.css", | ||
| "lib/sanitize.less", | ||
| "lib/sanitize.sass", | ||
| "lib/sanitize.scss", | ||
| "lib/sanitize.styl" | ||
| ], | ||
| "dependencies": {}, | ||
| "devDependencies": { | ||
| "postcss": "^5.0.19", | ||
| "postcss-cssnext": "^2.4.0", | ||
| "postcss": "^5.0.21", | ||
| "postcss-reporter": "^1.3.3", | ||
| "stylelint": "^4.4.0" | ||
| "stylelint": "^6.5.1", | ||
| "stylelint-config-10up": "github:jonathantneal/stylelint-config-10up" | ||
| }, | ||
| "scripts": { | ||
| "build": "node index.js", | ||
| "test": "node test.js" | ||
| "test": "stylelint sanitize.css" | ||
| }, | ||
| "engines": { | ||
| "iojs": ">=2.0.0", | ||
| "node": ">=0.12.0" | ||
@@ -46,3 +35,6 @@ }, | ||
| "bugs": "https://github.com/10up/sanitize.css/issues", | ||
| "homepage": "https://github.com/10up/sanitize.css#readme" | ||
| "homepage": "https://github.com/10up/sanitize.css#readme", | ||
| "stylelint": { | ||
| "extends": "stylelint-config-10up" | ||
| } | ||
| } |
270
README.md
@@ -5,8 +5,15 @@ # sanitize.css | ||
| > Render elements consistently. Follow best practices. | ||
| > The best-practices CSS foundation. | ||
| [![npm][npm-image]][npm-url] [![bower][bower-image]][bower-url] [![gitter][gitter-image]][gitter-url] | ||
| [![npm][npm-image]][npm-url] [![bower][bower-image]][bower-url] | ||
| [![gitter][gitter-image]][gitter-url] | ||
| **NPM** | ||
| [sanitize.css] is a CSS library that corrects broken and missing styles in all | ||
| browsers, preserving useful defaults rather than unstyling everything. It’s | ||
| developed alongside [normalize.css], so every normalization includes the | ||
| browsers or browser versions being targeted, and every opinionated change is | ||
| marked and documented. | ||
| ##### NPM | ||
| ```sh | ||
@@ -16,3 +23,3 @@ npm install --save-dev sanitize.css | ||
| **Bower** | ||
| ##### Bower | ||
@@ -23,162 +30,186 @@ ```sh | ||
| [sanitize.css] corrects broken and missing styles in all browsers so that elements always render consistently. Next, it adds new default styles based on modern best practices. Finally, it exposes opinionated defaults as governable variables. | ||
| ##### CDN | ||
| See https://cdnjs.com/libraries/10up-sanitize.css | ||
| ##### Download | ||
| See https://rawgit.com/10up/sanitize.css/release/4.0.0/sanitize.css | ||
| ## Features | ||
| ##### Backgrounds should not repeat by default | ||
| ```css | ||
| *, | ||
| ::before, | ||
| ::after { | ||
| * { | ||
| background-repeat: no-repeat; | ||
| } | ||
| ``` | ||
| ##### Box sizing should be inherited and default to border-box | ||
| ```css | ||
| * { | ||
| box-sizing: inherit; | ||
| } | ||
| :root { | ||
| box-sizing: var(--root-box-sizing, border-box); | ||
| html { | ||
| box-sizing: border-box; | ||
| } | ||
| ``` | ||
| Each new default is easily configurable with variables available in your favorite CSS, Less, Sass, SCSS, and Stylus flavors. | ||
| ##### Cursor should only change to hint non-obvious interfaces | ||
| ```css | ||
| @import url("node_modules/sanitize.css/sanitize.css"); | ||
| /* overwrite defaults in sanitize.css */ | ||
| :root { | ||
| --root-box-sizing: border-box; | ||
| --root-font-family: "Open Sans", sans-serif; | ||
| --root-color: #333; | ||
| html { | ||
| cursor: default; | ||
| } | ||
| ``` | ||
| ```less | ||
| @import "node_modules/sanitize.css/sanitize.less"; | ||
| ##### Regular text should be sans serif with a comfortable line height | ||
| // overwrite defaults in sanitize.less | ||
| @root-box-sizing: border-box; | ||
| @root-font-family: sans-serif; | ||
| @root-color: #333333; | ||
| ```css | ||
| html { | ||
| font-family: sans-serif | ||
| line-height: 1.5; | ||
| } | ||
| ``` | ||
| ```sass | ||
| // overwrite defaults in sanitize.sass | ||
| $root-box-sizing: border-box | ||
| $root-font-family: "Open Sans", sans-serif | ||
| $root-color: #333333 | ||
| ##### Documents should not use a margin for outer padding | ||
| import "node_modules/sanitize.css/sanitize.scss" | ||
| ```css | ||
| body { | ||
| margin: 0; | ||
| } | ||
| ``` | ||
| ```scss | ||
| // overwrite defaults in sanitize.scss | ||
| $root-box-sizing: border-box; | ||
| $root-font-family: "Open Sans", sans-serif; | ||
| $root-color: #333333; | ||
| ##### Navigation lists should not include a marker style | ||
| import "node_modules/sanitize.css/sanitize.scss"; | ||
| ```css | ||
| nav ol, nav ul { | ||
| list-style: none; | ||
| } | ||
| ``` | ||
| ```stylus | ||
| // overwrite defaults in sanitize.styl | ||
| root-box-sizing = border-box; | ||
| root-font-family = "Open Sans", sans-serif | ||
| root-color = #333333 | ||
| ##### Text selections should not include text shadows | ||
| @import "node_modules/sanitize.css/sanitize.styl" | ||
| ```css | ||
| ::selection { | ||
| text-shadow: none; | ||
| } | ||
| ``` | ||
| ## Variables | ||
| ##### Media elements should align to the text center of other content | ||
| ##### `root-background-color` | ||
| ```css | ||
| audio, canvas, iframe, img, svg, video { | ||
| vertical-align: middle; | ||
| } | ||
| ``` | ||
| Controls the page background color (default: `#ffffff`) | ||
| ##### SVGs should fallback to their surrounding text color | ||
| ##### `root-box-sizing` | ||
| ```css | ||
| svg { | ||
| fill: currentColor; | ||
| } | ||
| ``` | ||
| Controls the page box model inherited by all elements (default: `border-box`) | ||
| ##### Outlines are redundant on hovered links | ||
| ##### `root-color` | ||
| ```css | ||
| :hover { | ||
| outline-width: 0; | ||
| } | ||
| ``` | ||
| Controls the page text color inherited by all elements (default: `#ffffff`) | ||
| ##### Tables should not include additional border spacing | ||
| ##### `root-cursor` | ||
| ```css | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
| ``` | ||
| Controls the default page cursor (default: `default`) | ||
| ##### Form controls should be fully style-able | ||
| ##### `root-font-family` | ||
| ```css | ||
| button, input, select, textarea { | ||
| background-color: transparent; | ||
| border-style: none; | ||
| color: inherit; | ||
| font-size: 1em; | ||
| } | ||
| ``` | ||
| Controls the page font inherited by all elements (default: `sans-serif`) | ||
| ##### Textarea should only resize vertically by default | ||
| ##### `root-font-size` | ||
| ```css | ||
| textarea { | ||
| resize: vertical; | ||
| } | ||
| ``` | ||
| Controls the page text size inherited by all elements (default: `100%`) | ||
| ##### ARIA roles should include visual cursor hints | ||
| ##### `root-line-height` | ||
| ```css | ||
| [aria-busy="true"] { | ||
| cursor: progress; | ||
| } | ||
| Controls the page text line height inherited by all elements (default: `1.5`) | ||
| [aria-controls] { | ||
| cursor: pointer; | ||
| } | ||
| ##### `background-repeat` | ||
| [aria-disabled] { | ||
| cursor: default; | ||
| } | ||
| ``` | ||
| Controls how background images are repeated on all elements (default: `no-repeat`) | ||
| ##### Single taps should be dispatched immediately on clickable elements | ||
| ##### `form-element-background-color` | ||
| ```css | ||
| a, area, button, input, label, select, textarea, [tabindex] { | ||
| -ms-touch-action: manipulation; /* 1 */ | ||
| touch-action: manipulation; | ||
| } | ||
| ``` | ||
| Controls the background color of form controls (`button`, `input`, `select`, `textarea`) (default: `transparent`) | ||
| ##### Visually hidden content should remain accessible | ||
| ##### `form-element-color` | ||
| ```css | ||
| [hidden][aria-hidden="false"] { | ||
| clip: rect(0, 0, 0, 0); | ||
| display: inherit; | ||
| position: absolute; | ||
| } | ||
| Controls the text color of form controls (`button`, `input`, `select`, `textarea`) (default: `inherit`) | ||
| [hidden][aria-hidden="false"]:focus { | ||
| clip: auto; | ||
| } | ||
| ``` | ||
| ##### `form-element-min-height` | ||
| Controls the minimum height of form controls (`button`, `[type="button"]`, `[type="date"]`, `[type="datetime"]`, `[type="datetime-local"]`, `[type="email"]`, `[type="month"]`, `[type="number"]`, `[type="password"]`, `[type="reset"]`, `[type="search"]`, `[type="submit"]`, `[type="tel"]`, `[type="text"]`, `[type="time"]`, `[type="url"]`, `[type="week"]`, `select`, `textarea`) (default: `1.5em`) | ||
| ##### `media-element-vertical-align` | ||
| Controls the vertical align of media elements (`audio`, `canvas`, `iframe`, `img`, `svg`, `video`) (default: `middle`) | ||
| ##### `monospace-font-family` | ||
| Controls the font used by markup elements (`code`, `kbd`, `pre`, `samp`) (default: `monospace`) | ||
| ##### `nav-list-style` | ||
| Controls the list style for navigation lists (`nav ol, nav ul`) (default: `none`) | ||
| ##### `selection-background-color` | ||
| Controls the background color of selected text (default: `#b3d4fc`) | ||
| ##### `selection-color` | ||
| Controls the text color of selected text (default: `#ffffff`) | ||
| ##### `selection-text-shadow` | ||
| Controls the text shadow of selected text (default: `none`) | ||
| ##### `small-font-size` | ||
| Controls the text size of `small` elements (default: `75%`) | ||
| ##### `table-border-collapse` | ||
| Controls how borders collapse within `table` elements (default: `collapse`) | ||
| ##### `table-border-spacing` | ||
| Controls the distance between borders within `table` elements (default: `0`) | ||
| ##### `textarea-resize` | ||
| Controls the resizability of `textarea` elements (default: `vertical`) | ||
| ## Differences | ||
| [sanitize.css] styles elements more consistently with developers’ expectations and preferences. [normalize.css] styles elements more consistently between browsers. [reset.css] unstyles every element. Both sanitize.css and normalize.css are maintained in sync, and both projects correct browser bugs while carefully testing and documenting every change. | ||
| [sanitize.css] styles elements more consistently with developers’ expectations | ||
| and preferences. [normalize.css] styles elements more consistently between | ||
| browsers. [reset.css] unstyles every element. Both sanitize.css and | ||
| normalize.css are maintained in sync, and both projects correct browser bugs | ||
| while carefully testing and documenting every change. | ||
| ## Support | ||
| At present, sanitize.css supports the current and previous major releases of common web browsers. When a new version is released, we begin supporting that newer version and stop supporting the third version back. Additionally, many older browsers remain supported without supplementary CSS. | ||
| At present, sanitize.css supports the current and previous major releases of | ||
| popular web browsers. When a new version is released, we begin supporting that | ||
| newer version and stop supporting the third version back. Additionally, many | ||
| older browsers remain supported without supplementary CSS. | ||
| Currently tested and supported browsers include **Android 4.3-4.4+**, **Chrome 47-48+**, **Edge 12-13+**, **Firefox 43-44+**, **Internet Explorer 10-11**, **iOS 7-8+**, **Opera 34-35+**, **Safari 8-9+**, and **Windows Phone 8.1+**. | ||
| Currently tested and supported browsers in the latest release include | ||
| **Android 4.3-4.4+**, **Chrome 50-51+**, **Edge 12-13+**, **Firefox 46-47+**, | ||
| **Internet Explorer 10-11**, **iOS 7-8+**, **Opera 37-38+**, **Safari 8-9+**, | ||
| and **Windows Phone 8.1+**. | ||
| Additionally tested and supported browsers (requiring no supplementary CSS) include **Internet Explorer 9** and **Safari 7**. | ||
| Additionally tested and supported browsers (requiring little supplementary CSS) | ||
| include **Internet Explorer 9** and **Safari 7**. | ||
@@ -189,10 +220,11 @@ ## License | ||
| [npm-image]: https://img.shields.io/npm/v/sanitize.css.svg?style=flat-square | ||
| [npm-url]: https://www.npmjs.com/package/sanitize.css | ||
| [bower-image]: https://img.shields.io/bower/v/sanitize-css.svg?style=flat-square | ||
| [bower-url]: https://libraries.io/bower/sanitize-css | ||
| [gitter-image]: https://img.shields.io/gitter/room/10up/sanitize.css.svg | ||
| [gitter-url]: https://gitter.im/10up/sanitize.css | ||
| [npm-image]: https://img.shields.io/npm/v/sanitize.css.svg?style=flat-square | ||
| [npm-url]: https://www.npmjs.com/package/sanitize.css | ||
| [bower-image]: https://img.shields.io/bower/v/sanitize-css.svg?style=flat-square | ||
| [bower-url]: https://libraries.io/bower/sanitize-css | ||
| [gitter-image]: https://img.shields.io/gitter/room/10up/sanitize.css.svg?style=flat-square | ||
| [gitter-url]: https://gitter.im/10up/sanitize.css | ||
| [normalize.css]: https://github.com/necolas/normalize.css | ||
| [reset.css]: http://meyerweb.com/eric/tools/css/reset/ | ||
| [sanitize.css]: https://github.com/10up/sanitize.css | ||
| [reset.css]: http://meyerweb.com/eric/tools/css/reset/ | ||
| [sanitize.css]: https://github.com/10up/sanitize.css |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by16.41%
227
- Number of low supply chain risk alerts
- decreased by-50%
1
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-22.97%
39699
- Number of package files
- decreased by-27.27%
8
- Lines of code
- decreased by-19.19%
438
No dependency changes