feat: reduce reset opinions for media elements

Microflash · Jan 15, 2024 · 0887640 · 0887640
1 parent b0c9b88
commit 0887640
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -88,7 +88,7 @@ You can customize some aspects of `preset` through CSS properties. You can defin
 
 ## Credits
 
-[Adam Argyle](https://github.com/argyleink/open-props/blob/45a735169c62544a176b1d95384aeaf00d81862e/src/extra/normalize.src.css#L1), [Andy Bell](https://andy-bell.co.uk/a-more-modern-css-reset/), [Elly Loel](https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522), [Jeremy Thomas](https://github.com/jgthms/minireset.css), [Jesús Ricarte](https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/), [Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/), [Kevin Powell](https://www.youtube.com/watch?v=cCAtD_BAHNw)
+[Adam Argyle](https://github.com/argyleink/open-props/blob/45a735169c62544a176b1d95384aeaf00d81862e/src/extra/normalize.src.css#L1), [Andy Bell](https://andy-bell.co.uk/a-more-modern-css-reset/), [Elly Loel](https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522), [Harry Roberts](https://twitter.com/csswizardry/status/1717841334462005661), [Jeremy Thomas](https://github.com/jgthms/minireset.css), [Jesús Ricarte](https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/), [Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/), [Kevin Powell](https://www.youtube.com/watch?v=cCAtD_BAHNw)
 
 ## License
 

diff --git a/dist/preset.css b/dist/preset.css
@@ -1,4 +1,4 @@
-/*! Preset v1.5.1 | MIT License | https://github.com/Microflash/preset */
+/*! Preset v2.0.0 | MIT License | https://github.com/Microflash/preset */
 * {
   line-height: calc(0.3rem + 2ex + 0.3rem);
   line-height: var(--preset-line-height, calc(0.3rem + 2ex + 0.3rem));
@@ -64,12 +64,15 @@
 }
 
 :where(img, svg, canvas, audio, video, iframe, embed, object) {
-  display: block;
+  vertical-align: middle;
+  font-style: italic;
+  shape-margin: 0.75rem;
 }
 
 :where(img, svg, video) {
   max-width: 100%;
   height: auto;
+  background-size: cover;
 }
 
 :where(svg:not([fill][class]), svg[fill=none]:not([class])) {

diff --git a/dist/preset.min.css b/dist/preset.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@microflash/preset",
-	"version": "1.5.1",
+	"version": "2.0.0",
 	"description": "A modern CSS preset",
 	"keywords": [
 		"css",

diff --git a/src/preset.scss b/src/preset.scss
@@ -1,4 +1,4 @@
-/*! Preset v1.5.1 | MIT License | https://github.com/Microflash/preset */
+/*! Preset v2.0.0 | MIT License | https://github.com/Microflash/preset */
 
 // 1. Set `line-height` based on x-height of the font and `font-size` to automatically adjust for all `font-size` values
 // 2. Prevent text overflow for inline elements
@@ -73,16 +73,22 @@
 	text-wrap: pretty;
 }
 
-// Treat media elements as block elements to prevent layout issues, such as addition of `line-height` by user-agents
+// 1. Remove whitespace around media caused by line-height
+// 2. Italicise alt text or title of media to visually distinguish from surrounding copy
+// 3. Set up margin for optional `shape-outside`
 :where(img, svg, canvas, audio, video, iframe, embed, object) {
-	display: block;
+	vertical-align: middle; // 1
+	font-style: italic; // 2
+	shape-margin: 0.75rem; // 3
 }
 
 // 1. Stop media from overflowing the container
 // 2. Maintain aspect-ratio based on `block-size` / `inline-size`
+// 3. Let optional low-quality image placeholders span the entire box
 :where(img, svg, video) {
 	max-inline-size: 100%; // 1
 	block-size: auto; // 2
+	background-size: cover; // 3
 }
 
 // 1. Inherit `color` for stroke