From c270823f35bf4b44aab6175048937f7f05c5db2c Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Thu, 6 Feb 2025 20:54:33 +0900 Subject: [PATCH 1/3] Update docs about bespoke transition: Make simplify the example of morphable elements The recent Chrome 133 has been introduced the advanced attr() function. It makes simplify how to define the name of morphable elements. --- docs/bespoke-transitions/README.md | 71 ++++++++++++++---------------- 1 file changed, 33 insertions(+), 38 deletions(-) diff --git a/docs/bespoke-transitions/README.md b/docs/bespoke-transitions/README.md index 9fe7d2e6..58f9cf61 100644 --- a/docs/bespoke-transitions/README.md +++ b/docs/bespoke-transitions/README.md @@ -527,39 +527,37 @@ Generally setting [`contain` CSS property][contain] as `layout` or `paint` is al theme: gaia transition: fade style: | - /* ⬇️ Mark the image of "1" in every pages as morphable image named as "one" ⬇️ */ - img[alt="1"] { - view-transition-name: one; - contain: layout; /* required */ - } - - /* Generic image styling for number icons */ - img:is([alt="1"], [alt="2"], [alt="3"]) { + img[title~="step"] { height: 64px; position: relative; top: -0.1em; vertical-align: middle; width: 64px; + + /* ⬇️ Mark the image of "1" in every pages as morphable image named as "one" ⬇️ */ + &[alt="1"] { + view-transition-name: one; + } } --- # Today's topics -- ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666) Introduction -- ![2](https://icongr.am/material/numeric-2-circle.svg?color=666666) Features -- ![3](https://icongr.am/material/numeric-3-circle.svg?color=666666) Conclusion +- ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666 'step') Introduction +- ![2](https://icongr.am/material/numeric-2-circle.svg?color=666666 'step') Features +- ![3](https://icongr.am/material/numeric-3-circle.svg?color=666666 'step') Conclusion --- -![1 w:256 h:256](https://icongr.am/material/numeric-1-circle.svg?color=ff9900) +![1 w:256 h:256](https://icongr.am/material/numeric-1-circle.svg?color=ff9900 'step') # Introduction --- -# ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666) Introduction +# ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666 'step') Introduction Marp is an open-sourced Markdown presentation ecosystem. @@ -570,19 +568,16 @@ It provides a writing experience of presentation slides by Markdown. By using an inline HTML with enabling raw HTML rendering by `--html` Marp CLI option, you can mark a group of morphable contents with more flexibility. -This example is defining the style of `morph` class, to mark the inner elements as morphable. +This example is defining the style for `data-morph` attribute, to mark the inner elements as morphable. ```markdown --- header: Bubble sort transition: fade style: | - /* Define the style of "morph" class */ - .morph { - display: inline-block; - view-transition-name: var(--morph-name); - contain: layout; - vertical-align: top; + /* Define the style of morphable elements (Requires Chrome 133 and later) */ + [data-morph] { + view-transition-name: attr(data-morph type(), auto); } /* Global style */ @@ -591,40 +586,40 @@ style: | } --- -███████ 7 -█████ 5 -███ 3 -█████████ 9 +███████ 7 +█████ 5 +███ 3 +█████████ 9 --- -█████ 5 -███████ 7 -███ 3 -█████████ 9 +█████ 5 +███████ 7 +███ 3 +█████████ 9 --- -█████ 5 -███ 3 -███████ 7 -█████████ 9 +█████ 5 +███ 3 +███████ 7 +█████████ 9 --- -███ 3 -█████ 5 -███████ 7 -█████████ 9 +███ 3 +█████ 5 +███████ 7 +█████████ 9 ``` -The name of group can set through CSS variable in `style` attribute. +The name of morphable elements can set through `data-morph` attribute. Please note that this example is using [advanced `attr()` function](https://developer.chrome.com/blog/advanced-attr), that requires Chrome 133 and later.

Use HTML to mark morphable contents

-Due to the security reason, Marp CLI does not render raw HTML tags in Markdown by default. You have to should add `--html` option to use inline HTMLs. +Due to the security reason, Marp CLI does not render `data-*` attributes in raw `` elements in Markdown by default. You have to should add `--html` option to use. ```bash marp morphable.md --html From 6a944a086edfbaeeb4aafa9a71e56c75a06e096f Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Thu, 6 Feb 2025 21:01:58 +0900 Subject: [PATCH 2/3] Remove information about CSS `contain` property for morphable elements --- docs/bespoke-transitions/README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/bespoke-transitions/README.md b/docs/bespoke-transitions/README.md index 58f9cf61..1d804752 100644 --- a/docs/bespoke-transitions/README.md +++ b/docs/bespoke-transitions/README.md @@ -518,10 +518,6 @@ If there were multiple pairs defined by `view-transition-name` CSS property with In this example, the icon image of "1" on every page is marked as morphable elements named "one" by `view-transition-name` CSS property. -Generally setting [`contain` CSS property][contain] as `layout` or `paint` is also required together with `view-transition-name`. If it lacked, the browser may ignore the morph transition with the error `Shared element must contain paint or layout`. - -[contain]: https://developer.mozilla.org/en-US/docs/Web/CSS/contain - ```markdown --- theme: gaia @@ -566,8 +562,6 @@ It provides a writing experience of presentation slides by Markdown. #### Use HTML to mark morphable contents -By using an inline HTML with enabling raw HTML rendering by `--html` Marp CLI option, you can mark a group of morphable contents with more flexibility. - This example is defining the style for `data-morph` attribute, to mark the inner elements as morphable. ```markdown From b89c2ad60a0fc3da0dca09fd00f879216405ebae Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Thu, 6 Feb 2025 21:04:25 +0900 Subject: [PATCH 3/3] Update example: Fix default style of `view-transition-name` --- docs/bespoke-transitions/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/bespoke-transitions/README.md b/docs/bespoke-transitions/README.md index 1d804752..b2a5c8b2 100644 --- a/docs/bespoke-transitions/README.md +++ b/docs/bespoke-transitions/README.md @@ -571,7 +571,7 @@ transition: fade style: | /* Define the style of morphable elements (Requires Chrome 133 and later) */ [data-morph] { - view-transition-name: attr(data-morph type(), auto); + view-transition-name: attr(data-morph type(), none); } /* Global style */