Merge branch 'master' of github.com:nicolas-cusan/destyle.css

2025-08-31 00:40:17 +02:00 · 2021-09-06 16:38:15 +02:00
parent 598fb9afac 2586c2ac56
commit 35ab16ef5d
5 changed files with 135 additions and 151 deletions
--- 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
-<div class="type">{{ generatedMarkup }}</div>
+<div class="type">{{ generated_markup_goes_here }}</div>
 ```

+## 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 <
 </button>
 ```

-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
+
+<!-- Outline -->
--- 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;
-}
--- a/destyle.min.css
+++ 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}
--- 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",
--- a/test.html
+++ b/test.html
@@ -50,10 +50,18 @@
              <li><a href="#forms__checkbox">Checkboxes</a></li>
              <li><a href="#forms__radio">Radio buttons</a></li>
              <li><a href="#forms__textareas">Textareas</a></li>
+              <li><a href="#forms__files">Files</a></li>
              <li><a href="#forms__html5">HTML5 inputs</a></li>
              <li><a href="#forms__action">Action buttons</a></li>
            </ul>
          </li>
+          <li>
+            <a href="#interactive">Interactive Content</a>
+            <ul>
+              <li><a href="#interactive__summary_detail">Summary & detail</a></li>
+              <li><a href="#interactive__contenteditable">Editable content</a></li>
+            </ul>
+          </li>
        </ul>
      </nav>
      <main role="main">
@@ -375,6 +383,14 @@
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
+            <fieldset id="forms__files">
+              <legend>Files</legend>
+              <p>
+                <label for="input__file" class="valid">File</label>
+                <input id="input__file" type="file">
+              </p>
+            </fieldset>
+            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__html5">
              <legend>HTML5 inputs</legend>
              <p>
@@ -429,9 +445,28 @@
            <p><a href="#top">[Top]</a></p>
          </form>
        </section>
+        <section id="interactive">
+          <header><h1>Interactive elements</h1></header>
+          <article id="interactive__summary_detail">
+            <header><h2>Summary & Detail</h2></header>
+            <details>
+              <summary>
+                Summary
+              </summary>
+              <p>The <code>&lt;details&gt;</code> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <code>&lt;summary&gt;</code> element.</p>
+            </details>
+          </article>
+
+          <article id="interactive__contenteditable">
+            <header><h2>Editable content</h2></header>
+            <div contenteditable>
+              The content of this <code>&lt;div&gt;</code> tag can be edited via the <code>[contenteditable]</code> attribute.
+            </div>
+          </article>
+        </section>
      </main>
      <footer role="contentinfo">
-        <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
+        <p>Originaly made by <a href="http://twitter.com/cbracco">@cbracco</a> (<a href="http://github.com/cbracco/html5-test-page">GitHub</a>). And expanded by <a href="http://twitter.com/n_cusan">@n_cusan</a></p>
      </footer>
    </div>
  </body>