diff --git a/Readme.md b/Readme.md
index 3c54a66..c2d3645 100644
--- a/Readme.md
+++ b/Readme.md
@@ -4,21 +4,17 @@
Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean slate for styling your html.
-## What it does
+## Benefits
-- Ensures consistency across browsers (thanks normalize.css)
-- Removes spacing (margin & padding) and resets font-size and line-height
-- Sets some sensible defaults (see [rules](#rules))
-- Prevents the necessity of reseting (most) user agent styles
+- Ensures consistency across browsers as much as possible
+- Prevents the necessity of reseting user agent styles
- Prevents style inspector bloat by only targeting what is necessary
+- Removes margins & paddings
+- Removes default font styles and ensures proper inheritance
- Contributes to the separation of presentation and semantics
-- Works well with all kind of styling approaches, atomic libraries like [tachyons](https://tachyons.io/), component based styling like css-in-js in [React](https://reactjs.org), good 'ol css, ...
-
-## Why?
-
-[Eric Meyer's reset](https://meyerweb.com/eric/tools/css/reset/) resets properties on elements that do not need it, are unused or even deprecated, this creates bloat in the browser's style inspector which makes developing and debugging less efficient. [Normalize.css](https://github.com/necolas/normalize.css) makes elements look consistent across browsers and it does it well, but it does not remove the user agent's assumptions about how things look. Destyle.css targets both reseting & normalization.
-
-Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html).
+- Sets sensible default styles (see [rules](#rules))
+- Well suited for utility class libraries and large codebases
+- Supports modern browsers, therefor is small in size (~0.95kb, minified gzipped)
## Installation
@@ -26,16 +22,8 @@ Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.h
$ npm install --save destyle.css
```
-Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css
-
-## Browser support
-
-- Chrome
-- Edge
-- Firefox ESR+
-- Internet Explorer 10+
-- Safari 8+
-- Opera
+- Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css
+- CDN: https://classic.yarnpkg.com/en/package/destyle.css
## Usage
@@ -43,35 +31,56 @@ Include `destyle.css` in the `head` of your HTML file before your main styleshee
### Recommended
-Add your base font and color styles to the `body` element in your stylesheet, all other elements will inherit the style from the body.
+Add your base font and color styles to the `html` or `body` element in your stylesheet, all other elements will inherit the style from the body.
```css
/* app.css */
-body {
+html {
color: #333;
font: 16px/1.4 "Helvetica Neue", sans-serif;
}
```
+### Styling generated content
+
It is discouraged to define styles for raw html tags apart from `body` and `html`, use classes (or any other selectors / system) for styling.
If you need to create styles for tags generated by a CMS or markdown wrap them in a class (e.g. `.type`).
```css
.type h1 {
- \* styles *\
+ /* styles */
}
.type h2 {
- \* styles *\
+ /* styles */
}
```
```html
-
{{ generatedMarkup }}
+
{{ generated_markup_goes_here }}
```
+## Rules
+
+- The box model is set to `border-box` for `*`, `::before` and `::after`.
+- The `border-style` is set to `solid` for `*`, `::before` and `::after` and the `border-width` is set to 0 (to hide the borders).
+- `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family.
+- `hr` is set to be a solid 1px line using `border-top` that inherits its color from its parent's `color` property.
+- Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset.
+- `canvas` and `iframe` maintain their default width and height (varies depending on the browser).
+- `button`, `select`, `textarea` and `input` (except `[type='checkbox']` and `[type='radio']`), are reset using `appearance: none`.
+- `textarea` maintains its default height.
+- `meter` and `progress` elements are not reset.
+- Replaced content like `img`, `iframe` and `svg` use `vertical-align: bottom` to prevent alignment issues.
+- Focusable elements retain a focus outline, style depends on browser.
+
+## Caveats
+
+- `range` & `color` inputs are affected by `appearance: none` but are not completely destyled (varies depending on the browser).
+- `button` elements that have a fixed `height` will center its content vertically (can not be reset).
+
## Examples
### Headings
@@ -153,34 +162,36 @@ destyle.css resets buttons completely to make them usable as any other element <
```
-How to create the styles is up to the author, it can be by creating classes, compose style using functional classes, styling inside a react component, etc. In any case the author always gets a clean slate for styling each element and it is up to him/her to reuse the styles or start from scratch for every instance.
-
-## Rules
-
-- The box model is set to `border-box` for `*`, `::before` and `::after`.
-- The `border-style` is set to `solid` for `*`, `::before` and `::after` and the `border-width` is set to 0 (to hide the borders).
-- `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family.
-- `hr` is set to be a solid 1px line using `border-top` that inherits its color from its parent's `color` property.
-- Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset.
-- `canvas` and `iframe` maintain their default width and height (varies depending on the browser).
-- `button`, `select`, `textarea` and `input` (except `[type='checkbox']` and `[type='radio']`), are reset using `appearance: none`.
-- `textarea` maintains its default height.
-- `meter` and `progress` elements are not reset.
-- `img` has `vertical-align` set to `bottom` to prevent alignment issues.
-
-## Caveats
-
-- `select` elements are not completely destyled by `appearance: none` (varies depending on the browser). You can find a good guide for custom styling `select`s [here](https://www.filamentgroup.com/lab/select-css.html).
-- `range`, `color` are affected by `appearance: none` but are not completely destyled (varies depending on the browser).
-- `button` elements that have a fixed `height` will center its content vertically (can not be reset).
-
## Changelog
-- **v2.0.0.** 2020-10-15 - Add `border-style: solid` and `border-width: 0` to `*, ::before, ::after` selector. This change might affect how borders are used and therefor is considered a braking change. The benefit is that simply adding a border-width to an element will display a border without the need to set the border-style explicitly.
+### **v3.0.0.** 2021-09-03
+
+- Remove IE support 🎉
+- Bring back `outline` for focusable elements
+- Remove redundant `line-height: inherit` rule from headings reset
+- Remove redundant `text-decoration` rule from `abbr`
+- Added `svg` selector to replaced content rule
+- Added `text-transform: inherit` rule to form elements
+- Replaced `[disabled]` selector with `:disabled`
+- Removed `::-moz-focus-inner` rules for old Firefox versions
+- Improved `:-moz-focusring` style, no more dotted outline
+- Destyled `select:disabled` in Chrome
+- Add outline to focused `[contenteditable]` elements
+- Fixed border color inheritance for `table` borders in Chrome
+
+### **v2.0.0.** 2020-10-15
+
+- Add `border-style: solid` and `border-width: 0` to `*, ::before, ::after` selector. This change might affect how borders are used and therefor is considered a breaking change. The benefit is that simply adding a border-width to an element will display a border without the need to set the border-style explicitly.
+
+## Why?
+
+[Eric Meyer's reset](https://meyerweb.com/eric/tools/css/reset/) resets properties on elements that do not need it, are unused or even deprecated, this creates bloat in the browser's style inspector which makes developing and debugging less efficient. [Normalize.css](https://github.com/necolas/normalize.css) makes elements look consistent across browsers and it does it well, but it does not remove the user agent's assumptions about how things look. Destyle.css targets both reseting & normalization.
+
+Compare the results [here](https://nicolas-cusan.github.io/destyle.css/compare.html).
## Credits
-This project is heavily inspired by [normalize.css](https://github.com/necolas/normalize.css) and the original [reset](https://meyerweb.com/eric/tools/css/reset/) by Eric Meyer. The source of the test page is from [html5-test-page](https://github.com/cbracco/html5-test-page).
+This project is heavily inspired by [normalize.css](https://github.com/necolas/normalize.css) and the original [reset](https://meyerweb.com/eric/tools/css/reset/) by Eric Meyer. The source of the test page is from [html5-test-page](https://github.com/cbracco/html5-test-page) with some additions.
Tested with:
@@ -192,3 +203,5 @@ Tested with:
[license-url]: LICENSE
[npm-image]: https://img.shields.io/npm/v/destyle.css.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/destyle.css
+
+
diff --git a/destyle.css b/destyle.css
index ba6d0a3..3c62d5f 100644
--- a/destyle.css
+++ b/destyle.css
@@ -1,4 +1,4 @@
-/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
+/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
@@ -70,7 +70,6 @@ h4,
h5,
h6 {
font-size: inherit;
- line-height: inherit;
font-weight: inherit;
margin: 0;
}
@@ -147,7 +146,6 @@ a {
*/
abbr[title] {
- text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
@@ -201,13 +199,14 @@ sup {
top: -0.5em;
}
-/* Embedded content */
+/* Replaced content */
/* ============================================ */
/**
* Prevent vertical alignment issues.
*/
+svg,
img,
embed,
object,
@@ -219,7 +218,9 @@ iframe {
/* ============================================ */
/**
- * Reset form fields to make them styleable
+ * Reset form fields to make them styleable.
+ * 1. Make form elements stylable across systems iOS especially.
+ * 2. Inherit text-transform from parent.
*/
button,
@@ -227,7 +228,7 @@ input,
optgroup,
select,
textarea {
- -webkit-appearance: none;
+ -webkit-appearance: none; /* 1 */
appearance: none;
vertical-align: middle;
color: inherit;
@@ -235,9 +236,9 @@ textarea {
background: transparent;
padding: 0;
margin: 0;
- outline: 0;
border-radius: 0;
text-align: inherit;
+ text-transform: inherit; /* 2 */
}
/**
@@ -255,29 +256,7 @@ textarea {
}
/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input {
- /* 1 */
- overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
- /* 1 */
- text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
+ * Correct cursors for clickable elements.
*/
button,
@@ -285,46 +264,25 @@ button,
[type="reset"],
[type="submit"] {
cursor: pointer;
- -webkit-appearance: none;
- appearance: none;
}
-button[disabled],
-[type="button"][disabled],
-[type="reset"][disabled],
-[type="submit"][disabled] {
+button:disabled,
+[type="button"]:disabled,
+[type="reset"]:disabled,
+[type="submit"]:disabled {
cursor: default;
}
/**
- * Remove the inner border and padding in Firefox.
+ * Improve outlines for Firefox and unify style with input elements & buttons.
*/
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
- border-style: none;
- padding: 0;
+:-moz-focusring {
+ outline: auto;
}
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
- outline: 1px dotted ButtonText;
-}
-
-/**
- * Remove arrow in IE10 & IE11
- */
-
-select::-ms-expand {
- display: none;
+select:disabled {
+ opacity: inherit;
}
/**
@@ -345,19 +303,8 @@ fieldset {
min-width: 0;
}
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- * `fieldset` elements in all browsers.
- */
-
legend {
- color: inherit; /* 2 */
- display: table; /* 1 */
- max-width: 100%; /* 1 */
- padding: 0; /* 3 */
- white-space: normal; /* 1 */
+ padding: 0;
}
/**
@@ -403,7 +350,7 @@ textarea {
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
+ * 2. Fix font inheritance.
*/
::-webkit-file-upload-button {
@@ -442,16 +389,19 @@ summary {
* Remove outline for editable content.
*/
-[contenteditable] {
- outline: none;
+[contenteditable]:focus {
+ outline: auto;
}
-/* Table */
+/* Tables */
/* ============================================ */
+/**
+1. Correct table border color inheritance in all Chrome and Safari.
+*/
+
table {
- border-collapse: collapse;
- border-spacing: 0;
+ border-color: inherit; /* 1 */
}
caption {
@@ -468,22 +418,3 @@ th {
text-align: left;
font-weight: bold;
}
-
-/* Misc */
-/* ============================================ */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
- display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
- display: none;
-}
diff --git a/destyle.min.css b/destyle.min.css
new file mode 100644
index 0000000..660758f
--- /dev/null
+++ b/destyle.min.css
@@ -0,0 +1,2 @@
+/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
+*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox}[type="radio"]{-webkit-appearance:radio;appearance:radio}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}
\ No newline at end of file
diff --git a/package.json b/package.json
index 90d5658..9b23475 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
{
"name": "destyle.css",
- "version": "2.0.2",
- "description": "Opinionated reset stylesheet that provides a clean styling slate for your project.",
+ "version": "3.0.0",
+ "description": "Opinionated reset stylesheet that provides a clean slate for styling your html.",
"main": "destyle.css",
"style": "destyle.css",
"files": [
"destyle.css",
+ "destyle.min.css",
"LICENSE"
],
"repository": {
@@ -15,7 +16,9 @@
"keywords": [
"css",
"reset-css",
- "normalize-css"
+ "normalize-css",
+ "destyle",
+ "destyle-css"
],
"license": "MIT",
"bugs": "https://github.com/nicolas-cusan/destyle.css/issues",
diff --git a/test.html b/test.html
index 98fb0cb..e5d00b9 100644
--- a/test.html
+++ b/test.html
@@ -50,10 +50,18 @@