The New CSS Reset

Category: CSS & CSS3 , Recommended | December 23, 2022
Author:elad2412
Views Total:1,703 views
Official Page:Go to website
Last Update:December 23, 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:

12/23/2022

  • v1.8.2: An image should not exceed from its container

07/06/2022

  • v1.7.2: Incorrect spacings

You Might Be Interested In:


One thought on “The New CSS Reset

  1. tomas

    ive done this one with 5 pages and have not nice glitch when you flipping the page and you can see page below before page done move .. :/

    Reply

Leave a Reply