diff --git a/README.md b/README.md index c63adf0..84e8954 100644 --- a/README.md +++ b/README.md @@ -5,32 +5,38 @@ just set the values you want. ## Features -### Unsets browser defaults +### Unset browser defaults The default styles are removed by a `all: unset` declaration applied to all elements **except the following**: - HTML `head` element - HTML [metadata content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#metadata_content) elements +- HTML [embedded content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#embedded_content) elements - SVG elements - MathML elements -### Uses box-sizing +### Use box-sizing -All visible HTML elements are given a `box-sizing: border-box` declaration. +All HTML elements are given a `box-sizing: border-box` declaration except the +`head` element and [metadata +content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#metadata_content) +elements. All `::before` and `::after` pseudo-elements are given a `box-sizing: inherit` declaration. -### Retains block elements +### Retain block elements Following elements are given a `display: block` declaration: - `address` - `article` - `aside` +- `audio` - `blockquote` - `body` +- `canvas` - `dd` - `details` - `dialog` @@ -51,16 +57,22 @@ Following elements are given a `display: block` declaration: - `header` - `hgroup` - `hr` +- `iframe` +- `img` - `li` - `main` +- `math` - `nav` +- `object` - `ol` - `p` - `pre` - `section` +- `svg` - `ul` +- `video` -### Retains tables layout +### Retain tables layout The `display` properties for table elements are reset back to their normal values: @@ -72,10 +84,11 @@ The `display` properties for table elements are reset back to their normal value - `th` (`display: table-cell`) - `td` (`display: table-cell`) -### Give embedded content sensible defaults +### Sensible defaults for embedded content -All embedded content elements are given `display: block` and `max-width: 100%` -declarations: +All [embedded +content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#embedded_content) +elements are given `border: none` and `max-width: 100%` declarations: - `audio` - `canvas` diff --git a/tests/iframe.html b/tests/iframe.html new file mode 100644 index 0000000..9e8589a --- /dev/null +++ b/tests/iframe.html @@ -0,0 +1,2 @@ + + diff --git a/tests/img.html b/tests/img.html index 6079b69..c40ed7d 100644 --- a/tests/img.html +++ b/tests/img.html @@ -1,2 +1,2 @@ - + diff --git a/universal.css b/universal.css index 41238cd..454a833 100644 --- a/universal.css +++ b/universal.css @@ -4,7 +4,6 @@ address, area, article, aside, -audio, b, bdi, bdo, @@ -12,7 +11,6 @@ blockquote, body, br, button, -canvas, caption, cite, code, @@ -46,8 +44,6 @@ hgroup, hr, html, i, -iframe, -img, input, ins, kbd, @@ -60,7 +56,6 @@ mark, menu, meter, nav, -object, ol, optgroup, option, @@ -100,14 +95,19 @@ track, u, ul, var, -video, wbr { all: unset; box-sizing: border-box; } +audio, +canvas, +iframe, +img, +math, +object, svg, -math { +video { box-sizing: border-box; } @@ -188,5 +188,6 @@ math, object, svg, video { + border: none; max-width: 100%; }