CSS Reset
Posted in
3116
4:26 am, January 28, 2022
A fresh new and super tiny CSS Reset
A nice and small CSS reset script using newer selector tags than some of the older reset scripts.
Features
This new CSS reset is using the new CSS features:
- The global CSS reset keywords, ‘unset’ and ‘revert’ keywords.
- The new property of ‘all’ which can reset all properties combined.
- The
:where()
pseudo-class to remove specificity. - The
:not()
pseudo-class with multi arguments.
A fresh new and super tiny CSS Reset Demo
View Demo Full Screen View Demo New Tab
A fresh new and super tiny CSS Reset Code
CSS
/***
The new CSS reset - version 1.4.7 (last updated 27.1.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]){
display:none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly. */
:where([contenteditable]){
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
External Link for A fresh new and super tiny CSS Reset
Related Tags
Add Comment
Other Items in CSS Reset
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
CSS Tools
CSS Slider