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 1.1.0 to 2.0.0
| { | ||
| "name": "sanitize.css", | ||
| "version": "1.1.0", | ||
| "version": "2.0.0", | ||
| "description": "Render elements consistently. Style with best practices.", | ||
| "author": "Jonathan Neal", | ||
| "license": "CC0", | ||
| "license": "CC0-1.0", | ||
| "main": "index.js", | ||
@@ -13,19 +13,19 @@ "style": "dist/sanitize.css", | ||
| "README.md", | ||
| "sanitize.scss" | ||
| "sanitize.scss", | ||
| "index.js", | ||
| "gulpfile.js" | ||
| ], | ||
| "homepage": "https://github.com/jonathantneal/sanitize.css", | ||
| "homepage": "https://github.com/10up/sanitize.css", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/jonathantneal/sanitize.css.git" | ||
| "url": "https://github.com/10up/sanitize.css.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/jonathantneal/sanitize.css/issues" | ||
| "url": "https://github.com/10up/sanitize.css/issues" | ||
| }, | ||
| "devDependencies": { | ||
| "autoprefixer-core": "^5.1.7", | ||
| "gulp": "^3.8.11", | ||
| "gulp-minify-css": "^1.0.0", | ||
| "gulp-postcss": "^4.0.3", | ||
| "gulp-sass": "^1.3.3", | ||
| "gulp-sourcemaps": "^1.5.0" | ||
| "gulp": "^3.9.0", | ||
| "gulp-minify-css": "^1.2.1", | ||
| "gulp-sass": "^2.0.4", | ||
| "gulp-sourcemaps": "^1.5.2" | ||
| }, | ||
@@ -32,0 +32,0 @@ "scripts": { |
| # sanitize.css | ||
| Render elements consistently. Style with best practices. | ||
| <img align="right" width="128" height="128" src="http://10up.github.io/sanitize.css/logo.png" alt=""> | ||
| [![npm][npm-image]][npm-url] | ||
| ![bower][bower-image] | ||
| Render elements consistently. Style with best practices. | ||
@@ -33,20 +36,26 @@ ## Installation | ||
| ## Highlights | ||
| - CSS inheritance is universal so that styles are easier to control ([code](sanitize.scss#L96-L112)). | ||
| - 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#L139)). | ||
| - Smaller font-sizes display consistently across browsers ([reference](https://github.com/servo/servo/issues/3423#issuecomment-56321664)) ([code](sanitize.scss#L76-L78)). | ||
| - Monospace fonts render consistently ([reference](http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/)) ([code](sanitize.scss#L216-L221)). | ||
| - Border styles work as expected ([reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values)) ([code](sanitize.scss#L122-L127)). | ||
| - Text selections containing a drop shadow remain legible ([reference](https://twitter.com/miketaylr/status/12228805301)) ([code](sanitize.scss#L260-L263)). | ||
| - 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#L285-L293)). | ||
| ## Highlights | ||
| ## Differences | ||
| - CSS inheritance is universal so that styles are easier to control ([code](sanitize.scss#L48-L60)). | ||
| - 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#L77)). | ||
| - Smaller font-sizes display consistently across browsers ([reference](https://github.com/servo/servo/issues/3423#issuecomment-56321664)) ([code](sanitize.scss#L31)). | ||
| - Monospace fonts render consistently ([reference](http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/)) ([code](sanitize.scss#L94)). | ||
| - Border width works as expected ([reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values)) ([code](sanitize.scss#L64)). | ||
| - Text selections containing a drop shadow remain legible ([reference](https://twitter.com/miketaylr/status/12228805301)) ([code](sanitize.scss#L129)). | ||
| - 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#L140-L149)). | ||
| **Sanitize.css** styles browsers to render elements more consistently with developer expectations and preferences. **Normalize.css** styles browsers to render elements more consistently with each other. **Reset.css** unstyles every element. Each one has its own advantages. | ||
| To give you even more control, [sanitize.scss](sanitize.scss) allows you to define your own defaults for box-sizing, font family, monospace font family, text rendering, selection background color, and smaller font size - all without over-declaring them later. | ||
| In **Sanitize.css**, CSS inheritance is assigned universally so that styles cascade naturally and consistently. Wherever possible, the box model operates more intuitively. Every normalization and opinionated default is carefully documented, and most are configurable from Sass. | ||
| ## Options | ||
| 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. | ||
| ```scss | ||
| // overwrite defaults in sanitize.scss | ||
| $default-font-family: "Open Sans"; | ||
| $default-text-rendering: optimizeSpeed; | ||
| $root-font-family: "Open Sans"; | ||
| $root-text-rendering: optimizeSpeed; | ||
@@ -56,21 +65,34 @@ import 'vendors/sanitize.scss'; | ||
| - **$default-box-sizing**: the default box-sizing is `border-box`. | ||
| - **$default-font-family**: the default font family is `sans-serif`. | ||
| - **$default-text-rendering**: the default text-rendering is `optimizeLegibility`. | ||
| - **$default-monospace-font-family**: the default monospace font is `monospace`. | ||
| - **$default-selection-background-color**: the default selection background color is `#B3D4FC`. | ||
| - **$default-small-font-size**: the default small font size is `75%`. | ||
| - **$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 `16px`. | ||
| - **$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`. | ||
| ## Support | ||
| At present, we support the current and previous major releases of popular web browsers. When a new version is released, we begin supporting that version and stop supporting the third most recent version. | ||
| At present, we support the current and previous major releases of popular web browsers. When a new version is released, we begin supporting that version and stop supporting the third most recent version. Many older browsers happen to be remain supported using the same CSS without additional needs. | ||
| These browsers currently include Android 4.3-4.4+, Chrome 39-40+, Firefox 34-35+, Internet Explorer 10-11+, iOS 7-8+, Safari 7-8+, Windows Phone 8.1+. | ||
| Currently tested and supported browsers include **Android 4.3-4.4+**, **Chrome 39-45+**, **Edge 12+**, **Firefox 34-40+**, **Internet Explorer 9-11**, **iOS 7-8+**, **Safari 7-9+**, **Windows Phone 8.1+**. | ||
| ## License | ||
| **sanitize.css** is dedicated to the [public domain](LICENSE.md). | ||
| [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 |
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
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
Misc. License Issues
License(Experimental) A package's licensing information has fine-grained problems.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by53.02%
23752
- Dev dependency count
- decreased by-33.33%
4
- Number of package files
- increased by50%
9
- Number of medium license alerts
- decreased by-100%
0
- Lines of code
- increased by85.71%
52
- Number of lines in readme file
- increased by29.33%
97
No dependency changes