sanitize-4d.css is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults.
sanitize-4d.css wraps styles in zero-specificity selectors using :where().
NPM
npm install --save @fourdigit/sanitize-4d.css
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' ]
}
]
}
}
- 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.
*, ::before, ::after {
box-sizing: border-box;
}
*, ::before, ::after {
background-repeat: no-repeat;
}
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
html {
cursor: default;
}
html {
line-height: 1.5;
}
html {
tab-size: 4;
}
html {
word-break: break-all;
}
body {
margin: 0;
}
nav ol, nav ul {
list-style: none;
padding: 0;
}
audio, canvas, iframe, img, svg, video {
vertical-align: middle;
}
svg:not([fill]) {
fill: currentColor;
}
table {
border-collapse: collapse;
}
textarea {
resize: vertical;
}
a, area, button, input, label, select, summary, textarea, [tabindex] {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
[aria-busy="true"] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"], [disabled] {
cursor: default;
}
Visually hidden content remains accessible
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
sanitize-4d.css includes a separate stylesheet for normalizing forms using minimal, standards-like styling.
button, input, select, textarea {
background-color: transparent;
border: 1px solid WindowFrame;
color: inherit;
font: inherit;
letter-spacing: inherit;
padding: 0.25em 0.375em;
}
[type="color"],
[type="range"] {
border-width: 0;
padding: 0;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
background: no-repeat right center / 1em;
border-radius: 0;
padding-right: 1em;
}
select:not([multiple]):not([size]) {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='https://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}
::-ms-expand {
display: none;
}
sanitize-4d.css includes a separate stylesheet for normalizing restricting the size of assets in all browsers.
iframe,
img,
input,
select,
textarea {
height: auto;
max-width: 100%;
}
:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.54);
}
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";
}
code, kbd, pre, samp {
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;
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
Font rendering settings; 1x => subpixel、2x or higher => grayscale https://creator.dwango.co.jp/14128.html
html {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: unset;
}
@media only screen and
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
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.
- Chrome (last 2)
- Edge (last 2)
- Firefox (last 2)
- Firefox ESR
- Opera (last 2)
- Safari (last 2)
- iOS Safari (last 2)
- Internet Explorer 9+
Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.
sanitize.css is a project by Jonathan Neal, built upon normalize.css, a project by Jonathan Neal, co-created with Nicolas Gallagher.