Git Product home page Git Product logo

sanitize.css's Introduction

sanitize.css

PostHTML Logo

Render elements consistently. Follow best practices.

npm bower gitter

NPM

npm install --save-dev sanitize.css

Bower

bower install --save sanitize-css

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.

*,
::before,
::after {
	box-sizing: inherit;
}

:root {
	box-sizing: var(--root-box-sizing, border-box);
}

Each new default is easily configurable with variables available in your favorite CSS, Less, Sass, SCSS, and Stylus flavors.

@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;
}
@import "node_modules/sanitize.css/sanitize.less";

// overwrite defaults in sanitize.less
@root-box-sizing: border-box;
@root-font-family: sans-serif;
@root-color: #333333;
// overwrite defaults in sanitize.sass
$root-box-sizing: border-box
$root-font-family: "Open Sans", sans-serif
$root-color: #333333

import "node_modules/sanitize.css/sanitize.scss"
// overwrite defaults in sanitize.scss
$root-box-sizing: border-box;
$root-font-family: "Open Sans", sans-serif;
$root-color: #333333;

import "node_modules/sanitize.css/sanitize.scss";
// overwrite defaults in sanitize.styl
root-box-sizing = border-box;
root-font-family = "Open Sans", sans-serif
root-color = #333333

@import "node_modules/sanitize.css/sanitize.styl"

Variables

root-background-color

Controls the page background color (default: #ffffff)

root-box-sizing

Controls the page box model inherited by all elements (default: border-box)

root-color

Controls the page text color inherited by all elements (default: #ffffff)

root-cursor

Controls the default page cursor (default: default)

root-font-family

Controls the page font inherited by all elements (default: sans-serif)

root-font-size

Controls the page text size inherited by all elements (default: 100%)

root-line-height

Controls the page text line height inherited by all elements (default: 1.5)

background-repeat

Controls how background images are repeated on all elements (default: no-repeat)

form-element-background-color

Controls the background color of form controls (button, input, select, textarea) (default: transparent)

form-element-color

Controls the text color of form controls (button, input, select, textarea) (default: inherit)

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.

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.

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+.

Additionally tested and supported browsers (requiring no supplementary CSS) include Internet Explorer 9 and Safari 7.

License

sanitize.css is dedicated to the public domain.

sanitize.css's People

Contributors

jonathantneal avatar ungoldman avatar sotayamashita avatar bcomnes avatar bjork24 avatar fabianbeiner avatar m-iskw avatar zrothauser avatar metaloha avatar weotch avatar charbelrami avatar brunorios1 avatar kittygiraudel avatar pascalduez avatar tzi avatar vovanbo avatar machida avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.