While working through the process of optimizing my themes for the newer default WordPress Editor, I noticed some issues when using the CSS Reset that I’ve used and shared in a previous post. I will cover the key steps in that process in a later post, but one of the main aspects was updating my reset method to be less heavy-handed with the newer post blocks. The reset below combines parts of Normalize.css and my previous reset, without totally zeroing out all elements, and as before, it makes form elements and media items responsive.
This is my current CSS Normalize/Reset for WordPress.
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
}
pre,
code {
font-family: monospace, monospace;
font-size: 0.937em;
}
pre {
tab-size: 4;
overflow: auto;
}
strong,
b {
font-weight: 700;
}
blockquote,
q {
font-style: italic;
}
ol,
ul {
list-style: none;
padding: 0;
margin: 0;
}
sub,
sup {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
border: 1px solid;
padding: 0.25em;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 1em;
line-height: inherit;
margin: 0;
}
button,
input,
textarea {
background-color: inherit;
color: inherit;
border: 1px solid;
border-radius: 0;
outline: 0;
padding: 0.25em;
max-width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
}
button,
select {
text-transform: none;
}
::-webkit-search-decoration,
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
blockquote,
figure {
margin-left: 0;
margin-right: 0;
}
details,
audio,
img,
video {
display: block;
}
img,
video {
height: auto;
max-width: 100%;
}
embed,
iframe,
object {
max-width: 100%;
}
.alignleft {
float: left;
margin: 0 1em 1em 0;
}
.alignright {
float: right;
margin: 0 0 1em 1em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.clear {
clear: both;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px !important;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px !important;
word-wrap: normal !important;
}
.bypostauthor{}
.gallery-caption{}
.sticky{}
.wp-caption-text{}
.wp-caption{}This is a minified version of the code above.
html{box-sizing:border-box;font-family:system-ui,sans-serif;line-height:1.25;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*,*:before,*:after{box-sizing:inherit}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}pre,code{font-family:monospace,monospace;font-size:.937em}pre{tab-size:4;overflow:auto}strong,b{font-weight:700}blockquote,q{font-style:italic}ol,ul{list-style:none;padding:0;margin:0}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-spacing:0}th,td{border:1px solid;padding:.25em}button,input,optgroup,select,textarea{font-family:inherit;font-size:1em;line-height:inherit;margin:0}button,input,textarea{background-color:inherit;color:inherit;border:1px solid;border-radius:0;outline:0;padding:.25em;max-width:100%;-webkit-appearance:none;-moz-appearance:none}button,select{text-transform:none}::-webkit-search-decoration,::-webkit-search-cancel-button{-webkit-appearance:none}progress{vertical-align:baseline}summary{display:list-item}blockquote,figure{margin-left:0;margin-right:0}details,audio,img,video{display:block}img,video{height:auto;max-width:100%}embed,iframe,object{max-width:100%}.alignleft{float:left;margin:0 1em 1em 0}.alignright{float:right;margin:0 0 1em 1em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}.clear{clear:both}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px!important;overflow:hidden;padding:0;position:absolute!important;width:1px!important;word-wrap:normal!important}.bypostauthor{}.gallery-caption{}.sticky{}.wp-caption-text{}.wp-caption{}