sanitize.css
Advanced tools
sanitize.css - npm Package Compare versions
Comparing version 2.1.1 to 3.0.0
@@ -0,1 +1,11 @@ | ||
| ## 3.0.0 (2015-10-23) | ||
| - Added: Normalization for **iOS 8+** | ||
| - Added: `background-repeat` for all elements | ||
| - Added: CONTRIBUTING.md | ||
| - Updated: background color and color for `:root` previously `html` | ||
| - Updated: `::selection` color to `#ffffff` | ||
| - Updated: dist from CSS source using PostCSS, cssnext, and cssnano | ||
| - Updated: Documentation | ||
| ## 2.1.1 (2015-10-05) | ||
@@ -8,5 +18,5 @@ | ||
| - Added: CSS version | ||
| - Updated: Use percentage font-size on :root | ||
| - Updated: Use percentage `font-size` on `:root` | ||
| - Updated: Documentation | ||
| - Removed: background-color inheritance | ||
| - Removed: `background-color` inheritance | ||
@@ -18,3 +28,3 @@ ## 2.0.0 (2015-09-03) | ||
| - Added: Trigger element style `[aria-controls]` | ||
| - Added: Color style for `<html>` | ||
| - Added: Color style for `html` | ||
| - Added: CHANGELOG.md | ||
@@ -21,0 +31,0 @@ - Removed: Standards-breaking visually hidden style `[hidden~="screen"]` |
30
index.js
@@ -1,1 +0,29 @@ | ||
| // Blank export for parcelify | ||
| var fs = require('fs'); | ||
| require('postcss-cssnext')({ | ||
| features: { | ||
| autoprefixer: { | ||
| remove: false | ||
| } | ||
| } | ||
| }).process(fs.readFileSync('sanitize.css', 'utf8'), { | ||
| from: 'sanitize.css', | ||
| to: 'dist/sanitize.css', | ||
| map: { | ||
| inline: false | ||
| }, | ||
| }).then(function (result) { | ||
| fs.writeFileSync('dist/sanitize.css', result.css); | ||
| fs.writeFileSync('dist/sanitize.css.map', result.map); | ||
| require('cssnano')().process(result.css, { | ||
| from: 'dist/sanitize.css', | ||
| to: 'dist/sanitize.min.css', | ||
| map: { | ||
| inline: false | ||
| }, | ||
| }).then(function (result) { | ||
| fs.writeFileSync('dist/sanitize.min.css', result.css); | ||
| fs.writeFileSync('dist/sanitize.min.css.map', result.map); | ||
| }); | ||
| }); |
| { | ||
| "name": "sanitize.css", | ||
| "version": "2.1.1", | ||
| "version": "3.0.0", | ||
| "description": "Render elements consistently. Style with best practices.", | ||
| "keywords": [ | ||
| "css", | ||
| "sass", | ||
| "scss", | ||
| "stylus", | ||
| "normalize", | ||
| "postcss" | ||
| ], | ||
| "author": "Jonathan Neal", | ||
@@ -13,5 +21,5 @@ "license": "CC0-1.0", | ||
| "README.md", | ||
| "sanitize.css", | ||
| "sanitize.scss", | ||
| "index.js", | ||
| "gulpfile.js" | ||
| "sanitize.styl" | ||
| ], | ||
@@ -27,13 +35,13 @@ "homepage": "https://github.com/10up/sanitize.css", | ||
| "devDependencies": { | ||
| "gulp": "^3.9.0", | ||
| "gulp-minify-css": "^1.2.1", | ||
| "gulp-sass": "^2.0.4", | ||
| "gulp-sourcemaps": "^1.5.2", | ||
| "autoprefixer": "^6.0.3", | ||
| "gulp-postcss": "^6.0.0", | ||
| "gulp-rename": "^1.2.2" | ||
| "cssnano": "^3.3.1", | ||
| "postcss": "^5.0.10", | ||
| "postcss-cssnext": "^2.2.0" | ||
| }, | ||
| "scripts": { | ||
| "build": "gulp" | ||
| "build": "node index.js" | ||
| }, | ||
| "engines": { | ||
| "iojs": ">=2.0.0", | ||
| "node": ">=0.12.0" | ||
| } | ||
| } |
@@ -38,9 +38,9 @@ # sanitize.css | ||
| - CSS inheritance is universal so that styles are easier to control ([code](sanitize.scss#L96-L116)). | ||
| - The box model is more intuitive with border-box ([reference](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)) ([reference](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)) ([code](sanitize.scss#L143)). | ||
| - Smaller font-sizes display consistently across browsers ([reference](https://github.com/servo/servo/issues/3423#issuecomment-56321664)) ([code](sanitize.scss#L80-L82)). | ||
| - Monospace fonts render consistently ([reference](http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/)) ([code](sanitize.scss#L218-L225)). | ||
| - Border styles work as expected ([reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values)) ([code](sanitize.scss#L124-L131)). | ||
| - Text selections containing a drop shadow remain legible ([reference](https://twitter.com/miketaylr/status/12228805301)) ([code](sanitize.scss#L262-L267)). | ||
| - Content may be hidden from the screen but not screenreaders ([reference](http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)) ([reference](https://www.drupal.org/node/897638)) ([code](sanitize.scss#L287-L297)). | ||
| - CSS inheritance is universal so that styles are easier to control ([code](sanitize.css#L86-L101)). | ||
| - The box model is more intuitive with border-box ([reference](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)) ([reference](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)) ([code](sanitize.css#L130)). | ||
| - Smaller font-sizes display consistently across browsers ([reference](https://github.com/servo/servo/issues/3423#issuecomment-56321664)) ([code](sanitize.css#L58-L60)). | ||
| - Monospace fonts render consistently ([reference](http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/)) ([code](sanitize.css#L201-L206)). | ||
| - Border styles work as expected ([reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values)) ([code](sanitize.css#L111-L116)). | ||
| - Text selections containing a drop shadow remain legible ([reference](https://twitter.com/miketaylr/status/12228805301)) ([code](sanitize.css#L245-L249)). | ||
| - Content may be hidden from the screen but not screenreaders ([reference](http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)) ([reference](https://www.drupal.org/node/897638)) ([code](sanitize.css#L271-L279)). | ||
@@ -55,4 +55,14 @@ ## Differences | ||
| To give you even more control, [sanitize.scss](sanitize.scss) allows you to define your own defaults for box-sizing, font family, text rendering, selection, etc. - all without over-declaring them later. | ||
| To give you complete control, **sanitize.css** is available in three flavors; CSS, SCSS, and Stylus. Each flavor allows you to define your own defaults for box-sizing, font family, text rendering, selection, etc. - all without over-declaring them later. | ||
| ```css | ||
| /* overwrite defaults in sanitize.css */ | ||
| :root { | ||
| --root-font-family: "Open Sans", sans-serif; | ||
| --root-text-rendering: optimizeSpeed; | ||
| } | ||
| import url('vendors/sanitize.css'); | ||
| ``` | ||
| ```scss | ||
@@ -66,22 +76,33 @@ // overwrite defaults in sanitize.scss | ||
| - **$root-box-sizing**: the default box-sizing is `border-box`. | ||
| - **$root-cursor**: the default cursor is `default`. | ||
| - **$root-font-family**: the default font family is `sans-serif`. | ||
| - **$root-font-size**: the default font size `100%`. | ||
| - **$root-line-height**: the default line height is `1.5`. | ||
| - **$root-text-rendering**: the default text-rendering is `optimizeLegibility`. | ||
| - **$html-background-color**: the default background color is `#FFFFFF`. | ||
| - **$html-color**: the default text color is `#000000`. | ||
| - **$anchor-text-decoration**: the default anchor text decoration is `none`. | ||
| - **$form-element-background-color**: the default form background color is `transparent`. | ||
| - **$media-element-vertical-align**: the default vertical alignment for media elements is `middle`. | ||
| - **$monospace-font-family**: the default font for code elements is `monospace`. | ||
| - **$nav-list-style**: the default list style for navigation lists is `none`. | ||
| - **$selection-background-color**: the default selection background color is `#B3D4FC`. | ||
| - **$selection-text-shadow**: the default selection shadow is `none`. | ||
| - **$small-font-size**: the default font size for small elements is `75%`. | ||
| - **$table-border-collapse**: the default border collapse for tables is `collapse`. | ||
| - **$table-border-spacing**: the default border spacing for tables is `0`. | ||
| - **$textarea-resize**: the default resize for textarea’s is `vertical`. | ||
| ```stylus | ||
| // overwrite defaults in sanitize.scss | ||
| root-font-family = "Open Sans", sans-serif | ||
| root-text-rendering = optimizeSpeed | ||
| @import "vendors/sanitize.styl" | ||
| ``` | ||
| - **root-background-color**: the default background color is `#FFFFFF`. | ||
| - **root-box-sizing**: the default box-sizing is `border-box`. | ||
| - **root-color**: the default text color is `#000000`. | ||
| - **root-cursor**: the default cursor is `default`. | ||
| - **root-font-family**: the default font family is `sans-serif`. | ||
| - **root-font-size**: the default font size `100%`. | ||
| - **root-line-height**: the default line height is `1.5`. | ||
| - **root-text-rendering**: the default text-rendering is `optimizeLegibility`. | ||
| - **anchor-text-decoration**: the default anchor text decoration is `none`. | ||
| - **background-repeat**: the default background repeat is `no-repeat`. | ||
| - **form-element-background-color**: the default form background color is `transparent`. | ||
| - **form-element-min-height**: the default form element minimum height is `1.5em` | ||
| - **media-element-vertical-align**: the default vertical alignment for media elements is `middle`. | ||
| - **monospace-font-family**: the default font for code elements is `monospace`. | ||
| - **nav-list-style**: the default list style for navigation lists is `none`. | ||
| - **selection-background-color**: the default selection background color is `#b3d4fc`. | ||
| - **selection-color**: the default selection text color is `#ffffff`. | ||
| - **selection-text-shadow**: the default select text shadow is `none`. | ||
| - **small-font-size**: the default font size for small elements is `75%`. | ||
| - **table-border-collapse**: the default border collapse for tables is `collapse`. | ||
| - **table-border-spacing**: the default border spacing for tables is `0`. | ||
| - **textarea-resize**: the default resize for textarea’s is `vertical`. | ||
| ## Support | ||
@@ -88,0 +109,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
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
Improved metrics
- Total package byte prevSize
- increased by24.92%
49626
- Dev dependency count
- decreased by-57.14%
3
- Number of package files
- increased by9.09%
12
- Lines of code
- increased by99.57%
469
- Number of lines in readme file
- increased by21.65%
118
Worsened metrics
- Number of low supply chain risk alerts
- increased byInfinity%
1
No dependency changes