The New CSS Reset


Author: elad2412
Views Total: 514 views
Official Page: Go to website
Last Update: March 17, 2022
License: MIT

Preview:

The New CSS Reset

Description:

A fresh new and super tiny CSS reset library for modern development.

How it works:

/*
  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 {
  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;
}
/* 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;
}

Changelog:

03/17/2022

02/17/2022

01/22/2022

  • update cursor pointer for anchor tag

11/30/2021

See also  Stylish Faux-3D Effect In Pure CSS - Prism

Leave a Reply

Your email address will not be published. Required fields are marked *