The New Simple and Lighter CSS Reset

Elad Shechter

Last update: Dec 30, 2022

Related tags

Overview

The New CSS Reset

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.

What is the-new-css-reset resetting?

This CSS reset is built from the understanding that we don’t want to use default styles we are getting from the browsers, except the ‘display’ property.

This CSS reset removes all the default styles which we are getting on specific HTML elements except the ‘display’ property, as I already mentioned, and special HTML elements like iframe, canvas, img, svg, video, and audio.

In case you want the default style of the browser of a specific HTML element back, you can revert back to the default styles of the browser. For example:

input[type="checkbox"],
input[type="radio"] {
    all: revert;
}

or all input elements:

input,
textarea,
select {
   all: revert;
}

Download the Latest Version

NPM and How to Use?

The package name on NPM is 'the-new-css-reset'.

Import /css/reset.css before the regular styles of the project.

In a React project, insert it to the main entry file:

import "the-new-css-reset/css/reset.css"

Accessibility Recommendation

To keep your website accessibly, don't forget to take care of the :focus states.

:focus { /* focus styles */ }

/* or/and */

:focus-visible { /* keyboard only focus styles */ }

Browser Support

All evergreen browsers

Chrome, Edge: version 88+
FireFox: version 84+
Safari/iOS browsers: version 14+
Opera: version 75+
Samsung Browser: version 15+

Comments

Add summary to items not reset

This PR adds summary to the list of items not reset.

The reason is that, by resetting it, the icon accompanying the summary in a details drop-down changes from an arrow, which usefully changes direction according to whether details is open or closed, to a bullet, which provides no such information and is essentially meaningless in this context anyway.

This PR thus has the effect of retaining the arrow.

opened by KTS915 9
Minimize use of revert
Since the point is to eliminate browser inconsistencies by not using the browser's default styles, in principle it should be better to not use revert (whose value can differ depending on browser) unless needed. For instance,

a, button { /* cursor: revert; */ cursor: pointer; }
opened by Justin-Marks 8
img should also have `height: auto;`
Considering the following common markup:

<img src="image.jpg" width="800" height="600">

Because of max-width: auto, the image will be squished when the viewport gets smaller than 800px.
opened by cadars 8
Focus states & keyboard accessibility
First of all, thank you so much for building this! I've been trying it out in a few projects and it's honestly been a breath of fresh air to not have to constantly fight with default user agent styles to get things looking exactly the way I want.

That said, I do have some concerns around accessibility of the reset in its default configuration, specifically because it removes the default browser focus outlines. This is the reset working as intended, but as it grows in popularity I fear that people who use it might not realize this and will build apps with really poor accessibility for keyboard users by not providing any custom focus styles on top of the reset.

Some potential ideas to work around this:

We can make an exception for the default focus styles and not override them. This way usages will continue to have a reasonable default level of accessibility for keyboard users.

We can add a note in the readme, ideally very high up, mentioning that the reset removes focus styles, the consequences around that, and strongly recommend users to provide their own.

I would personally vastly prefer 1 as a safer default, but 2 is probably better than nothing if we want to err on the purist side and override as much styling as possible. Definitely open to other ideas as well, and happy to send a PR once we settle on the approach!
opened by lewisl9029 7
Firefox SVG sprite bug

I noticed a strange bug in Firefox when using a SVG sprite. Some shapes render fine but others don't.

CodeSandbox: https://codesandbox.io/s/reqrh Test Files: https://github.com/nicolaibach/svg-firefox-bug

The bug goes away if symbol * is excluded explicitly:

*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *))

opened by nicolaibach 7
Change `max-width` to `max-inline-size`

Change max-width to max-inline-size in order to control layout through logical rather than physical, direction and dimension mappings. This helps with making websites internationally compatible. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

opened by vicsantizo 4
TNCSSR + `-webkit-user-select: none` Breaks Text Input In Safari

When setting -webkit-user-select: none on the body, I can't type into text input fields in Safari, see here (code). Not sure what is happening exactly here (in Chrome everything works fine), but it seems related to TNCSSR. Feel free to delete if this is offtopic.

opened by fweth 4
Problem with height of that I hide with select { height: 0; overflow: hidden; opacity: 0; pointer-events: none; }

But the height didn't apply until I add this : select {white-space: pre;}

opened by vhanadium 4

Problems with progress and draggable elements

Hi,

Your method render draggable true element not draggable and progress bar impossible to modify with css.

Had to fix by modifying the first line like this for the moment: *:where(:not(iframe,canvas,img,svg,video,progress):not(svg *,symbol *)){all:unset;display:revert}

I'm on Safari but the problems was tested with Firefox and Chrome too

For Safari you have to revert -webkit-user-drag so let's assume you have to revert user-drag too. using [draggable=true] {-webkit-user-drag: element;} not sure on the user-drag usage at the moment (not tested on chrome and firefox and every element I want to be draggable are draggable="true" of course)

sorry for my poor English.

opened by vhanadium 4

Reset makes hr vanish

Hello,

all: unset resets all borders to zero, which makes <hr> tags disapear :

Codepen : https://codepen.io/raphaelgoetter/pen/rNvmWwY?editors=1100

opened by raphaelgoetter 3

Strange result with browsers on Windows

I have a strange result with this reset: the <head> <title> tag and the content of <script> tags within the body are displayed as content in the browser.

This happens only in browsers (tested in Chrome & Edge) on Windows.

I debugged the issue and found out that the error is caused by

*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  display: revert;
  all: unset;
}

opened by zero2one 3

Web component host reset

I've been using this reset with web components (via LitElement). In doing so, I've found that the reset (both unset: all and display: revert) causes a lot of problems related to styling the :host (shadow root) selector.

Problem

Research suggests that the specificity for the :host selector is intended to make it act as the default style for a custom element. Therefore, it is expected to be overridden by any other styles.

That places the shadow root in quite an awkward position following a reset. After all, the purpose of a reset is to strip browser styling. After that, any user-authored styling (including the defaults of custom elements) should be respected.

Solution

My solution is to add display: contents !important to the :host selector in each component. Then, if a custom root is desired, it can be implemented as a separate class, applied to a container element (like a div).

/* Pass through root */
:host {
	display: contents !important;
}

/* Custom root */
.container {
	display: flex;
}

This solution is ideal in my case, because I don't like that shadow roots participate in the document layout in the first place; I prefer the pass-through behavior of React fragments (<></>).

min-width has to be resetted to 0 for flexbox

The "new" auto default value on min-width and max-width causes problems in Flexbox because flex-items do not shrink on small screens due to their content.

auto computes to 0 for most elements... except for flex-items and grid-items.

See: https://medium.com/the-crazy-coder/the-mystery-of-css-flex-layout-items-shrinking-8748145e96d9

Since auto is now default value for min-width, it can't be just resetted to 0 with initial, unset nor revert. We need to explicitly set it to 0.

See and try on Codepen: https://codepen.io/raphaelgoetter/pen/oLzzar?editors=1100

opened by raphaelgoetter 4

Add text-size-adjust?

Hello!

I came across this article today on text-size-adjust and am wondering if it's worth setting it to none in the reset? Reading the MDN article, I'm not sure if unset does the same thing.

opened by aaronsturm 0

Added test html file

Hey Elad, I really love your work! I published a css reset with similar goals a while back (https://www.npmjs.com/package/reset-css-complete) but I dig your approach so much more!

Anyway, I thought I could share the simple html file I used for testing across browsers and thought that it might help you as well (for example, did you know that in chrome unsetting <input type="color"> is totally broken?)

Hope you find this useful -Alex

opened by alex-e-leon 5

The New Simple and Lighter CSS Reset

Related tags

Overview

The New CSS Reset

What is the-new-css-reset resetting?

NPM and How to Use?

Accessibility Recommendation

Browser Support

Comments

Problem

Solution

Related

Owner

Elad Shechter

Easily open daily notes and periodic notes in new pane; customize periodic notes background; quick append new line to daily notes.

:new:A new version of Icalingua.

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

A library management system that built with JavaScript, HTML, and CSS. Allows the user to add new books and delete books.

DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!

Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

This simple project aims to connect to an API to fetch score data and display it on a LeaderBoard box, as well as provide the tool to submit a new score.

A simple JS To Do List bundled using Webpack. You can add new tasks, edit existing tasks, check completed tasks, and delete tasks from the list. It is built mainly with Javascript.

Simple NextJS Project Template to write less boilerplate code when starting a new Next JS Project

A simple CLI to patch the Fitbit OS Simulator with the new SSL certificate - March 2022

A new, simple NFT standard for Solana

Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

my first javascript project .this is my discordBot repository and this bot can do kick and ban member of server , show member counter in status and more ... . i try to add some new feature to my discord bot latter and i hope this bot can help you 😊

Using Webpack and external API, this website saves and shows players' scores and allows the submission of new scores.

This project is for hacktoberfest to encourage new developer and open source developers to contribute to open source and improve skills which require debugging, write testable code, industry standards, problem solving and many more,

A mod for Mindustry that adds a few items and liquids, and a whole new tier of upgrades, along with arc

Project Cider. A new look into listening and enjoying Apple Music in style and performance. 🚀

A leaderboard created using Leaderboard API service, Webpack, and Gitflow. The user can add a new score and refresh to see his ranking in the leaderboard.

The website can be used to creat a new game and start adding players and there scores! 🙌