Minor text improvements & corrections.

Update changelog.
This commit is contained in:
Nicolas Cusan
2021-09-03 16:54:15 +02:00
committed by Nicolas Cusan
parent d7659fa487
commit 0d8334fa94

View File

@@ -30,12 +30,7 @@ Download: https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/des
## Browser support ## Browser support
- Chrome Support modern browsers only (bye bye IE).
- Edge
- Firefox ESR+
- Internet Explorer 10+
- Safari 8+
- Opera
## Usage ## Usage
@@ -69,9 +64,28 @@ If you need to create styles for tags generated by a CMS or markdown wrap them i
``` ```
```html ```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.
## 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).
## Examples ## Examples
### Headings ### Headings
@@ -155,32 +169,26 @@ 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. 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 ## 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-0903
- 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.
## Credits ## 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: Tested with: