├── .idea
├── .gitignore
├── vcs.xml
├── modules.xml
└── the-new-css-reset.iml
├── package.json
├── LICENSE
├── README.md
└── css
└── reset.css
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/the-new-css-reset.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "the-new-css-reset",
3 | "version": "1.11.3",
4 | "description": "the new CSS reset, using new css features",
5 | "main": "css/reset.css",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/elad2412/the-new-css-reset.git"
12 | },
13 | "keywords": [
14 | "css",
15 | "css-reset"
16 | ],
17 | "author": "Elad Shechter",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/elad2412/the-new-css-reset/issues"
21 | },
22 | "homepage": "https://github.com/elad2412/the-new-css-reset#readme"
23 | }
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Elad Shechter
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ⏪ The New CSS Reset
2 | **A package that resets some of the default, user agent based, styles.**
3 |
4 | It **doesn't** affect the `display` property and special HTML elements like ```iframe```, ```canvas```, ```img```, ```svg``` and ```video```.
5 |
6 | **This package is using the new CSS features:**
7 | - The global CSS reset keywords, `unset` and `revert` keywords.
8 | - The new property of `all` which can reset all properties combined.
9 | - The ```:where()``` pseudo-class to remove specificity.
10 | - The ```:not()``` pseudo-class with multi arguments.
11 |
12 | ## Motivation
13 | This package is built with the understanding that we don’t want to use default styles we are getting from the browsers, except for the `display` property.
14 |
15 | ## How to get started?
16 | **Run ```npm i the-new-css-reset``` OR [Download the Latest Version](https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css).**
17 |
18 | **Once installed, you can use it in two different ways:**
19 |
20 | 1) Import ```/css/reset.css``` before the regular styles of the project.
21 | 2) Include the following snippet in one of the JavaScript/TypeScript entry files:
22 | ```js
23 | import "the-new-css-reset/css/reset.css";
24 | ```
25 |
26 | ## Want to exclude some of the resets?
27 |
28 | **You can revert to the default styles of the browser!**
29 |
30 | For example:
31 |
32 |
33 | ```css
34 | input[type="checkbox"],
35 | input[type="radio"] {
36 | all: revert;
37 | }
38 | ```
39 |
40 | or all input elements:
41 | ```css
42 | input,
43 | textarea,
44 | select {
45 | all: revert;
46 | }
47 | ```
48 |
49 | ## Accessibility Recommendation
50 |
51 | **To keep your website accessible, don't forget to take care of the ```:focus``` states.**
52 | ```css
53 | :focus { /* focus styles */ }
54 |
55 | /* or/and */
56 |
57 | :focus-visible { /* keyboard only focus styles */ }
58 | ```
59 |
60 | ## Browser Support
61 |
62 |  |  |  |  |  | 
63 | --- | --- | --- | --- | --- | --- |
64 | 88+ ✔ | 88+ ✔ | 84+ ✔ | 14+ ✔ | 75+ ✔ | 15+ ✔ |
65 |
--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
1 | /***
2 | The new CSS reset - version 1.11.3 (last updated 25.08.2024)
3 | GitHub page: https://github.com/elad2412/the-new-css-reset
4 | ***/
5 |
6 | /*
7 | Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
8 | - The "symbol *" part is to solve Firefox SVG sprite bug
9 | - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
10 | */
11 | *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
12 | all: unset;
13 | display: revert;
14 | }
15 |
16 | /* Preferred box-sizing value */
17 | *,
18 | *::before,
19 | *::after {
20 | box-sizing: border-box;
21 | }
22 |
23 | /* Fix mobile Safari increase font-size on landscape mode */
24 | html {
25 | -moz-text-size-adjust: none;
26 | -webkit-text-size-adjust: none;
27 | text-size-adjust: none;
28 | }
29 |
30 | /* Reapply the pointer cursor for anchor tags */
31 | a, button {
32 | cursor: revert;
33 | }
34 |
35 | /* Remove list styles (bullets/numbers) */
36 | ol, ul, menu, summary {
37 | list-style: none;
38 | }
39 |
40 | /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
41 | ol {
42 | counter-reset: revert;
43 | }
44 |
45 | /* For images to not be able to exceed their container */
46 | img {
47 | max-inline-size: 100%;
48 | max-block-size: 100%;
49 | }
50 |
51 | /* removes spacing between cells in tables */
52 | table {
53 | border-collapse: collapse;
54 | }
55 |
56 | /* Safari - solving issue when using user-select:none on the text input doesn't working */
57 | input, textarea {
58 | -webkit-user-select: auto;
59 | }
60 |
61 | /* revert the 'white-space' property for textarea elements on Safari */
62 | textarea {
63 | white-space: revert;
64 | }
65 |
66 | /* minimum style to allow to style meter element */
67 | meter {
68 | -webkit-appearance: revert;
69 | appearance: revert;
70 | }
71 |
72 | /* preformatted text - use only for this feature */
73 | :where(pre) {
74 | all: revert;
75 | box-sizing: border-box;
76 | }
77 |
78 | /* reset default text opacity of input placeholder */
79 | ::placeholder {
80 | color: unset;
81 | }
82 |
83 | /* fix the feature of 'hidden' attribute.
84 | display:revert; revert to element instead of attribute */
85 | :where([hidden]) {
86 | display: none;
87 | }
88 |
89 | /* revert for bug in Chromium browsers
90 | - fix for the content editable attribute will work properly.
91 | - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
92 | :where([contenteditable]:not([contenteditable="false"])) {
93 | -moz-user-modify: read-write;
94 | -webkit-user-modify: read-write;
95 | overflow-wrap: break-word;
96 | -webkit-line-break: after-white-space;
97 | -webkit-user-select: auto;
98 | }
99 |
100 | /* apply back the draggable feature - exist only in Chromium and Safari */
101 | :where([draggable="true"]) {
102 | -webkit-user-drag: element;
103 | }
104 |
105 | /* Revert Modal native behavior */
106 | :where(dialog:modal) {
107 | all: revert;
108 | box-sizing: border-box;
109 | }
110 |
111 | /* Remove details summary webkit styles */
112 | ::-webkit-details-marker {
113 | display: none;
114 | }
115 |
--------------------------------------------------------------------------------