Socket
Socket
Sign inDemoInstall

sanitize.css

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sanitize.css - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

CHANGELOG.md

24

package.json
{
"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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc