♿️ A minimal, accessible, & unopinionated CSS reset that correctly accounts for HTML5 elements
⚙️ Features
👌 Minimal
- No superfluous or redundant styles; nothing is included without an explanation in comments.
- Code copied from other resets and browser default stylesheets is audited.
- Main file is minified; only 1.2kb total size uncompressed.
♿️ Accessible
- Does not tamper with the natural accessibility of semantic HTML.
- Does not remove, or edit in any way, default browser focus state styles.
- ⚠️ You should never remove/hide/suppress the default
:focus
outline without adding custom styles in place of it!
- ⚠️ You should never remove/hide/suppress the default
- Sets
font-size
to100%
and includes a note on why this is important. - Sets default
line-height
onbody
and includes a note (and link) on why this is important. - Ensures that
[hidden]
attribute styles are honored. - Correctly hides elements using
display: none
, as this also removes them from the accessibility tree. - Does not prevent a user from zooming.
🤫 Unopinionated
- Intended to reset the styles for all HTML Elements, NOT to add a layer of opinionated/default styles.
- Meant to have a near-blank-slate effect.
- 📝 NOTE: There are a few exceptions included that are restyled after resetting all elements.
📱 Modern
- Correctly resets new HTML5 elements for custom styling, like
<button>
and<select>
. - Correctly styles multimedia elements to reduce the likelihood of unintended side-scroll.
- Ensures a
pointer
cursor shows on all appropriate interactive elements. - Includes modern browser support (see below).
🏗 Browser Support
The styles in this project are compiled using rules that support the last 2 versions, and any version with coverage greater than 1%, of all modern browsers supported by Browserslist.
> 1%
last 2 versions
😞 Why
After years of creating a custom _reset.scss
file on top of Reset CSS and Normalize, I decided to research what other options are available… surely there has to be a minimal, accessible, unopinionated, modern alternative? And here enters my disappointment - while there are some notable newer options, I couldn’t find anything that ticked all the above boxes. So here is my best attempt at creating a stylesheet that does so.
⤵️ Install
With NPM:
$ npm i css-init
With Yarn:
$ yarn add css-init
Download
🛠 Usage
📝 NOTE: Replace “..node-modules” below with the path to your
/node_modules/
directory, or in your desired location.
HTML:
<link rel="stylesheet" href="..node-modules/css-init/dist/init.min.css">
SCSS:
@import '..node-modules/css-init/src/init.scss';
CSS:
@import '..node-modules/css-init/dist/init.min.css';
Via webpack and css-loader:
import 'css-init';
💣 Testing
There is an included elements.html
file that acts as an example/test page. You can load this file locally in any browser to see how all HTML elements will look after the css-init
styles are loaded.
👥 GitHub
✏️ Contributing
This project is open-source, and can only get better the more people use it and contribute to it (code contributions and issues/bugs/ideas are all encouraged).
❤️ Feedback is welcome!
To submit any issues, bugs, or ideas for improvement please open a new issue on GitHub.
📄 License
MIT