mirror_css/destyle
1
0
Fork 0
mirror of https://github.com/nicolas-cusan/destyle.css.git synced 2025-08-31 16:51:47 +02:00
Code Issues Releases Wiki Activity

Minor text improvements & corrections.

Browse Source 
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
1 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
Readme.md
View File

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