mirror of
https://github.com/nicolas-cusan/destyle.css.git
synced 2025-08-31 16:51:47 +02:00
Minor text improvements & corrections.
Update changelog.
This commit is contained in:
committed by
Nicolas Cusan
parent
d7659fa487
commit
0d8334fa94
64
Readme.md
64
Readme.md
@@ -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:
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user