From 08876402115d8467a6916d1a02154e864edb8f14 Mon Sep 17 00:00:00 2001 From: Naiyer <19614213+naiyerasif@users.noreply.github.com> Date: Mon, 15 Jan 2024 12:20:11 +0530 Subject: [PATCH] feat: reduce reset opinions for media elements --- README.md | 2 +- dist/preset.css | 7 +++++-- dist/preset.min.css | 4 ++-- package.json | 2 +- src/preset.scss | 12 +++++++++--- 5 files changed, 18 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 17bbda5..0d01417 100644 --- 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 index 60632fa..8e773e4 100644 --- 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 index ef9d7ba..b38c5e1 100644 --- a/dist/preset.min.css +++ b/dist/preset.min.css @@ -1,2 +1,2 @@ -/*! Preset v1.5.1 | MIT License | https://github.com/Microflash/preset */ -*{line-height:calc(.3rem + 2ex + .3rem);line-height:var(--preset-line-height, calc(0.3rem + 2ex + 0.3rem));word-wrap:break-word;overflow-wrap:break-word}*,::after,::before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(html){height:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;hanging-punctuation:first last}@media (prefers-reduced-motion:no-preference){.js-focus-within :where(html)[focus-within],:where(html)[focus-within].js-focus-within{scroll-behavior:smooth}:where(html):focus-within{scroll-behavior:smooth}}:where(body){min-height:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-moz-tab-size:var(--preset-tab-size, 2);-o-tab-size:var(--preset-tab-size, 2);tab-size:var(--preset-tab-size, 2)}:where([hidden]:not([hidden=until-found])){display:none}:where(:not(fieldset):not(progress):not(meter)){background-origin:border-box;background-repeat:no-repeat}:where(abbr[title]){text-decoration-line:underline;text-decoration-style:dotted;border-bottom:none;cursor:help}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,svg,canvas,audio,video,iframe,embed,object){display:block}:where(img,svg,video){max-width:100%;height:auto}:where(svg:not([fill][class]),svg[fill=none]:not([class])){stroke:currentColor;stroke:var(--preset-stroke-color, currentColor);stroke-linecap:round;stroke-linejoin:round}:where(iframe){border:0}:where(summary){display:list-item}:where(dialog)::backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);-webkit-backdrop-filter:var(--preset-dialog-backdrop-filter, blur(25px));backdrop-filter:var(--preset-dialog-backdrop-filter, blur(25px))}.js-has-pseudo :where([csstools-has-2w-38-31-30-1m-2w-2p-37-14-2s-2x-2p-30-33-2v-2j-33-34-2t-32-2l-15]:not(does-not-exist):not(does-not-exist)),:where(html:has(dialog[open])){overflow:hidden}:where(table){border-collapse:collapse;border-spacing:0;caption-side:bottom;caption-side:var(--preset-table-caption-side, bottom)}:where(input,button,textarea,select,optgroup),:where(input[type=file])::file-selector-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(textarea:not([rows])){min-height:10em}:where(a[href],area,button,input:not([type=text]):not([type=email]):not([type=file]):not([type=number]):not([type=password]):not([type=""]):not([type=tel]):not([type=url]),label[for],select,summary,[role=button],[onclick],[tabindex]:not([tabindex*="-"])),:where(input[type=file])::file-selector-button{cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[role=button],[onclick],[tabindex]:not([tabindex*="-"])){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where(button,button[type],input[type=button],input[type=image],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.js-focus-visible :where(.focus-visible),:where(.focus-visible).js-focus-visible,:where(:focus-visible){transition:outline-offset 145ms cubic-bezier(.25,0,.4,1)}.js-focus-visible :where(:not(:active).focus-visible),:where(:not(:active).focus-visible).js-focus-visible,:where(:not(:active):focus-visible){transition-duration:.25s}.js-has-pseudo :where([csstools-has-1m-2w-2p-37-14-1m-38-2p-36-2v-2t-38-15]),:where(:has(:target)){scroll-behavior:smooth;scroll-padding-block-start:3rem;scroll-padding-block-start:var(--preset-scroll-padding, 3rem)}} \ No newline at end of file +/*! Preset v2.0.0 | MIT License | https://github.com/Microflash/preset */ +*{line-height:calc(.3rem + 2ex + .3rem);line-height:var(--preset-line-height, calc(0.3rem + 2ex + 0.3rem));word-wrap:break-word;overflow-wrap:break-word}*,::after,::before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(html){height:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;hanging-punctuation:first last}@media (prefers-reduced-motion:no-preference){.js-focus-within :where(html)[focus-within],:where(html)[focus-within].js-focus-within{scroll-behavior:smooth}:where(html):focus-within{scroll-behavior:smooth}}:where(body){min-height:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-moz-tab-size:var(--preset-tab-size, 2);-o-tab-size:var(--preset-tab-size, 2);tab-size:var(--preset-tab-size, 2)}:where([hidden]:not([hidden=until-found])){display:none}:where(:not(fieldset):not(progress):not(meter)){background-origin:border-box;background-repeat:no-repeat}:where(abbr[title]){text-decoration-line:underline;text-decoration-style:dotted;border-bottom:none;cursor:help}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,svg,canvas,audio,video,iframe,embed,object){vertical-align:middle;font-style:italic;shape-margin:.75rem}:where(img,svg,video){max-width:100%;height:auto;background-size:cover}:where(svg:not([fill][class]),svg[fill=none]:not([class])){stroke:currentColor;stroke:var(--preset-stroke-color, currentColor);stroke-linecap:round;stroke-linejoin:round}:where(iframe){border:0}:where(summary){display:list-item}:where(dialog)::backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);-webkit-backdrop-filter:var(--preset-dialog-backdrop-filter, blur(25px));backdrop-filter:var(--preset-dialog-backdrop-filter, blur(25px))}.js-has-pseudo :where([csstools-has-2w-38-31-30-1m-2w-2p-37-14-2s-2x-2p-30-33-2v-2j-33-34-2t-32-2l-15]:not(does-not-exist):not(does-not-exist)),:where(html:has(dialog[open])){overflow:hidden}:where(table){border-collapse:collapse;border-spacing:0;caption-side:bottom;caption-side:var(--preset-table-caption-side, bottom)}:where(input,button,textarea,select,optgroup),:where(input[type=file])::file-selector-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(textarea:not([rows])){min-height:10em}:where(a[href],area,button,input:not([type=text]):not([type=email]):not([type=file]):not([type=number]):not([type=password]):not([type=""]):not([type=tel]):not([type=url]),label[for],select,summary,[role=button],[onclick],[tabindex]:not([tabindex*="-"])),:where(input[type=file])::file-selector-button{cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[role=button],[onclick],[tabindex]:not([tabindex*="-"])){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where(button,button[type],input[type=button],input[type=image],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.js-focus-visible :where(.focus-visible),:where(.focus-visible).js-focus-visible,:where(:focus-visible){transition:outline-offset 145ms cubic-bezier(.25,0,.4,1)}.js-focus-visible :where(:not(:active).focus-visible),:where(:not(:active).focus-visible).js-focus-visible,:where(:not(:active):focus-visible){transition-duration:.25s}.js-has-pseudo :where([csstools-has-1m-2w-2p-37-14-1m-38-2p-36-2v-2t-38-15]),:where(:has(:target)){scroll-behavior:smooth;scroll-padding-block-start:3rem;scroll-padding-block-start:var(--preset-scroll-padding, 3rem)}} \ No newline at end of file diff --git a/package.json b/package.json index fa25b01..34c5a96 100644 --- 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 index a9acec4..0dfac5b 100644 --- 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