Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

@fourdigit/sanitize-4d.css

8.0.0 • Public • Published

sanitize-4d.css sanitize

Greenkeeper badge

sanitize-4d.css is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults.

How to get it

NPM

npm install --save @fourdigit/sanitize-4d.css

Usage in npm and webpack

Import sanitize-4d.css in CSS:

@import '~@fourdigit/sanitize-4d.css';

Alternatively, import sanitize-4d.css in JS:

import '@fourdigit/sanitize-4d.css';

In webpack.config.js, be sure to use the appropriate loaders:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

What does it do?

  • Normalizes styles for a wide range of elements.
  • Corrects bugs and common browser inconsistencies.
  • Provides common, useful defaults.
  • Explains what code does using detailed comments.

Features

Box sizing defaults to border-box
*::before::after {
  box-sizing: border-box;
}
Backgrounds do not repeat by default
*::before::after {
  background-repeat: no-repeat;
}
Pseudo-elements inherit text decoration and vertical alignment
::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}
Cursors only change to hint non-obvious interfaces
html {
  cursor: default;
}
The default font is the system ui font
html {
  font-family: 
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI,
    /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu,
    /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 5+ */ Noto Sans,
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}
Tabs appear the same on the web as in a typical editor
html {
  tab-size: 4;
}
Words break to prevent overflow
html {
  word-break: break-all;
}
Documents do not use a margin for outer padding
body {
  margin: 0;
}
Navigation lists do not include a marker style
nav olnav ul {
  list-style: none;
}
Pre-formatted and code-formatted text uses the monospace system ui font
codekbdpresamp {
  font-family: 
    /* macOS 10.10+ */ Menlo,
    /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono,
    /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 5+ */ Noto Mono,
    /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono,
    /* fallback */ monospace;
}
Text selections do not include text shadows
::selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}
Media elements align to the text center of other content
audiocanvasiframeimgsvgvideo {
  vertical-align: middle;
}
SVGs fallback to the current text color
svg:not([fill]) {
  fill: currentColor;
}
Tables do not include additional border spacing
table {
  border-collapse: collapse;
}
Form controls are easily style-able
buttoninputselecttextarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
Textareas only resize vertically by default
textarea {
  resize: vertical;
}
Single taps are dispatched immediately on clickable elements
aareabuttoninputlabelselectsummarytextarea[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
ARIA roles include visual cursor hints
[aria-busy="true"] {
  cursor: progress;
}
 
[aria-controls] {
  cursor: pointer;
}
 
[aria-disabled="true"], [disabled] {
  cursor: default;
}
Visually hidden content remains accessible
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0000);
  display: inherit;
  position: absolute;
}

Differences

normalize.css and sanitize-4d.css correct browser bugs while carefully testing and documenting changes. normalize.css styles adhere to css specifications. sanitize-4d.css styles adhere to common developer expectations and preferences. reset.css unstyles all elements. Both sanitize-4d.css and normalize.css are maintained in sync.

Browser support

  • Chrome (last 3)
  • Edge (last 3)
  • Firefox (last 3)
  • Firefox ESR
  • Opera (last 3)
  • Safari (last 3)
  • iOS Safari (last 2)
  • Internet Explorer 9+

Contributing

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.

Acknowledgements

sanitize.css is a project by Jonathan Neal, built upon normalize.css, a project by Jonathan Neal, co-created with Nicolas Gallagher.

install

npm i @fourdigit/sanitize-4d.css

Downloadsweekly downloads

20

version

8.0.0

license

CC0-1.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability