custom-css-reset
Version:
Modern Css reset using the new keywords
161 lines (130 loc) • 2.13 kB
CSS
@charset "UTF-8";
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol
*)) {
all: unset;
display: revert;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
code,
pre,
kbd,
samp {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
a,
button {
cursor: pointer;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
ol,
ul,
menu {
list-style: none;
}
img {
display: block;
max-width: 100%;
}
table {
border-collapse: collapse;
}
details {
display: block;
}
summary {
display: list-item;
}
input,
textarea {
-webkit-user-select: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
textarea {
white-space: revert;
}
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
::-webkit-input-placeholder {
color: unset;
}
::-moz-placeholder {
color: unset;
}
:-ms-input-placeholder {
color: unset;
}
::-ms-input-placeholder {
color: unset;
}
::placeholder {
color: unset;
}
:where([hidden]) {
display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
:where([draggable="true"]) {
-webkit-user-drag: element;
}