Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
tedillize.css - My own personal CSS normalization stylesheet. It combines a lot of different styles and stylesheets found throughout the web.
@charset "UTF-8";
/********************************************
Tedilize 2.0 - Normalization and Base Styling
*********************************************/
:root {
-moz-tab-size: 4;
tab-size: 4;
}
*,
*::before,
*::after {
box-sizing: border-box;
vertical-align: inherit;
}
*::before,
*::after {
text-decoration: inherit;
white-space: pre;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
touch-action: manipulation;
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
'Liberation Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
}
/*********************
Document
*********************/
body {
background-color: #fefefe;
color: #111;
font-size: 1rem;
margin: 0;
min-height: 100%;
line-height: 1.5;
}
main {
display: block;
}
header,
footer {
clear: both;
display: table;
width: 100%;
}
hr {
margin: 1rem 0;
background-color: #999;
border: 0;
clear: both;
}
hr:not([size]) {
height: 1px;
}
blockquote {
-webkit-hyphens: auto;
hyphens: auto;
margin: 0 0 1rem;
}
address {
font-style: normal;
line-height: inherit;
}
template,
[hidden] {
display: none;
}
/*********************
Inline elements
*********************/
b,
strong {
font-weight: bolder;
}
sub,
sup {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
mark {
background-color: #ff3;
border-radius: 0.2em;
padding: 0.2em;
}
small {
font-size: 0.875em;
}
ins {
-webkit-text-decoration: underline dashed #aaa;
text-decoration: underline dashed #aaa;
}
abbr {
speak-as: spell-out;
}
abbr[title],
abbr[aria-label] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: none;
}
/*********************
Headings
*********************/
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
margin-bottom: 0.4rem;
font-weight: 400;
}
h1 {
font-size: 2.4rem;
margin: 0.67em 0;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.7rem;
font-weight: 600;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.2rem;
font-weight: 500;
}
h6 {
font-size: 1rem;
font-weight: 600;
}
/*********************
Tables
*********************/
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
caption-side: top;
text-indent: 0;
}
td,
th {
padding: 0.15em 0.5em 0.15em;
line-height: 1.15;
text-align: left;
text-overflow: ellipsis;
vertical-align: text-top;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
caption {
padding: 0.75rem;
}
/*********************
List elements
*********************/
ul,
ol {
padding-left: 2rem;
}
dt {
font-weight: 700;
}
dd {
margin-left: 2em;
}
nav ol,
nav ul {
list-style: none;
padding: 0;
}
/*********************
Monospace elements
*********************/
code,
kbd,
samp,
pre {
unicode-bidi: bidi-override;
direction: ltr;
white-space: pre-wrap;
font-size: 1em;
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Roboto Mono',
'Liberation Mono',
Menlo,
monospace;
}
code {
background: #ddd;
padding: 0.1rem 0.2rem;
border-radius: 0.3rem;
}
kbd {
background: #ddd;
padding: 0.2rem 0.4rem;
border-radius: 0.2rem;
border-bottom: 1px solid #aaa;
white-space: nowrap;
}
pre {
display: block;
word-break: break-all;
line-height: 1.4;
font-size: 0.9rem;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
display: inline-block;
padding: 0.8rem;
}
a > code {
color: inherit;
}
/*********************
Images and figures
*********************/
img,
video,
audio,
iframe {
height: auto;
max-width: 100%;
vertical-align: middle;
border: none;
object-fit: cover;
image-rendering: auto;
}
img[src$='.gif'],
img[src$='.svg'],
canvas,
svg {
image-rendering: crisp-edges;
image-rendering: pixelated;
}
a img {
object-fit: contain;
}
figure {
margin: 0 0 1rem;
}
figure img,
figure video,
figure iframe {
width: 100%;
}
figure a img {
cursor: zoom-in;
}
figcaption {
text-align: center;
padding: 0.6em 0.2em;
line-height: 1.2;
}
svg:not(:root) {
overflow: hidden;
vertical-align: middle;
}
/*********************
Interactive elements
*********************/
:focus-visible {
outline: 5px auto -webkit-focus-ring-color;
}
:focus:not(:focus-visible),
[tabindex='-1']:focus:not(:focus-visible) {
outline: none;
}
[href] {
color: inherit;
background-color: transparent;
-webkit-tap-highlight-color: rgba(220,220,220,0.4);
}
[href]::before,
[href]::after {
display: inline-block;
text-decoration: none;
}
a:not([href]),
[href=''],
[href='#'] {
pointer-events: none;
text-decoration: none;
}
/* Details Element */
summary {
cursor: pointer;
display: list-item;
}
details {
display: block;
}
/* Dialog Element */
dialog {
position: fixed;
left: 0;
right: 0;
top: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin: auto;
display: block;
z-index: 9999;
border: solid;
padding: 1em;
background: #fff;
color: inherit;
will-change: auto;
}
dialog:not([open]) {
display: none;
}
/*********************
Form elements
*********************/
::placeholder {
color: #888;
}
input:not(:focus):invalid {
color: #d00;
}
[disabled],
[disabled] + label[for] {
opacity: 0.4;
pointer-events: none;
}
[readonly],
button > *,
[role='button'] > * {
pointer-events: none;
}
button,
input,
optgroup,
select,
label,
textarea,
[list] {
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
border-radius: 0;
background: inherit;
}
[role='button'],
[role='textbox'],
[role='listbox'],
button,
input,
select,
textarea {
background-color: #fff;
display: inline-block;
border: 1px solid #999;
color: inherit;
letter-spacing: inherit;
padding: 0.25em 0.375em;
max-width: 100%;
text-transform: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: ellipsis;
cursor: pointer;
overflow: hidden;
word-wrap: normal;
}
select:not([multiple]):not([size]) {
padding-right: 1.4em;
background: transparent no-repeat 100% 50% / 1em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M6.6 18l4.5-4.6 2 2L6.6 22 0 15.4l2-2zm0-14L2 8.6l-2-2L6.6 0 13 6.6l-2 2z' fill='dimgray'/%3E%3C/svg%3E");
}
button,
[role='button'],
[type='button'],
[type='reset'],
[type='submit'] {
background-color: #eee;
overflow: visible;
cursor: pointer;
white-space: nowrap;
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
[type='checkbox'],
[type='radio'] {
cursor: pointer;
font-size: inherit;
margin: 0;
}
textarea {
overflow: auto;
resize: vertical;
vertical-align: middle;
-webkit-appearance: none;
overscroll-behavior-y: contain;
}
label {
display: inline-block;
}
label[for] {
cursor: pointer;
}
output {
display: inline-block;
font-weight: bold;
margin: auto 0.2em;
}
fieldset {
padding: 0 0.5em 0.5em;
border: 1px solid #bbb;
}
legend {
padding: 0 0.3rem;
max-width: 100%;
white-space: normal;
margin-bottom: 0.2rem;
line-height: inherit;
font-size: 1.1rem;
}
legend + * {
clear: left;
}
/* Special Fields */
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field,
::-webkit-color-swatch-wrapper {
padding: 0;
}
/* Input Number */
[type='number'] {
-moz-appearance: textfield;
}
:out-of-range {
color: #d00;
}
::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Input Search */
[type='search'] {
-webkit-appearance: textfield;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
/* Input Range */
[type='range'] {
-webkit-appearance: none;
height: 1.8em;
width: 9em;
vertical-align: middle;
background-color: transparent !important;
font: 1.1em/1 arial, sans-serif;
border: none;
cursor: pointer;
}
::-webkit-slider-runnable-track {
border-radius: 0.3em;
height: 0.5rem;
background: #ccc;
}
::-moz-range-track {
border-radius: 0.3em;
height: 0.5em;
background: #ccc;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -0.35em;
width: 1.15em;
height: 1.15em;
border-radius: 50%;
background: #eee;
border: 2px solid #aaa;
}
::-moz-range-thumb {
-moz-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
background: #eee;
border: 2px solid #aaa;
}
/* Meter */
meter {
height: 1.5em;
border: 1px solid #bbb;
background: #eee;
}
::-webkit-meter-bar {
background: #eee;
border-radius: 0;
height: 1.35em;
}
::-webkit-meter-optimum-value {
background: green;
}
:-moz-meter-optimum::-moz-meter-bar {
background: green;
}
::-webkit-meter-suboptimum-value {
background: gold;
}
:-moz-meter-sub-optimum::-moz-meter-bar {
background: gold;
}
::-webkit-meter-even-less-good-value {
background: red;
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: red;
}
/* Progress */
progress {
display: inline-block;
border: 1px solid #bbb;
vertical-align: baseline;
height: 1.2em;
}
::-webkit-progress-bar {
background-color: #eee;
}
::-webkit-progress-value {
background-color: #777;
}
::-moz-progress-bar {
background-color: #777;
}
/*********************
Accessibility
********************/
[aria-busy='true'] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled='true'],
[disabled] {
cursor: not-allowed;
}
[aria-hidden='false'][hidden] {
display: initial;
}
[aria-hidden='false'][hidden]:not(:focus) {
clip: rect(0,0,0,0);
position: absolute;
}
/*********************
Browser Hacks
*********************/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
/*********************
Responsive elements
*********************/
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}
html {
scroll-behavior: auto !important;
}
}
/* Mobile Devices */
@media (-webkit-min-device-pixel-ratio: 2) {
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
a img {
cursor: pointer;
}
[aria-label]:hover::after {
visibility: hidden;
}
}
/* Phone (Portrait) and narrow screen */
@media (max-width: 812px) {
body {
font-size: 0.96em;
}
nav,
header,
main,
footer,
aside,
section,
article,
iframe,
table {
width: 100%;
float: none;
position: relative;
}
fieldset {
width: auto;
}
}
/* Printing */
@media print {
*,
*::before,
*::after {
background-color: #fff;
color: #000;
text-shadow: none !important;
box-shadow: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
table,
tr,
li,
img,
pre,
nav,
blockquote,
fieldset,
figure,
video,
picture,
address,
select,
textarea {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
max-width: 100%;
}
hr:not([size='0']) {
border-bottom: 2px solid #666;
}
thead {
display: table-header-group;
}
pre {
overflow-x: auto;
white-space: pre-wrap !important;
word-wrap: break-word;
}
abbr[title]::after {
content: " (" attr(title) ")";
}
[href] {
text-decoration: underline !important;
}
main [href]::after {
content: " [" attr(href) "]";
font-size: 70%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment