diff --git a/astro.config.ts b/astro.config.ts
index fec31aa..2e22f5d 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -101,7 +101,8 @@ function sidebar() {
}, {
label: 'Basics',
items: [
- { label: 'Browser Support', link: "/basics/testpage/" },
+ { label: 'Browser Support', link: "/basics/test-page/" },
+// { label: 'Step by Step Tutorial', link: "/basics/step-by-step/" },
{ label: 'View Transition API', link: "/basics/api/" },
{ label: 'View Transition Examples', link: "/basics/examples/" },
{ label: 'Structure of Pseudo-Elements', link: "/basics/pseudos/" },
diff --git a/src/components/bsky.astro b/src/components/Bsky.astro
similarity index 100%
rename from src/components/bsky.astro
rename to src/components/Bsky.astro
diff --git a/src/content/docs/basics/api.mdx b/src/content/docs/basics/api.mdx
index dd9f197..0ea8116 100644
--- a/src/content/docs/basics/api.mdx
+++ b/src/content/docs/basics/api.mdx
@@ -5,12 +5,13 @@ description: Basics information about the View Transition browser API
The View Transition API is a rather new API. Eventually, this site will hold more background information about the API.
-I made a start with information about the [structure of the pseudo-elements](/basics/pseudos/) of the API and about the [mechanisms of the default animations](/basics/default-animations/).
+I made a start with …
+* … information about the [structure of the pseudo-elements](/basics/pseudos/) of the API
+* … and about the [mechanisms of the default animations](/basics/default-animations/).
+* Recently I also added some background on [how to style view transitions](/basics/styling/).
While I add more pages, I'm also happy that I can offer some links to previous work on the `astro-vtbot` package[^1].
-* A [test page](https://events-3bg.pages.dev/jotter/api/test-page/) to test your browsers support for the View Transition API
-* [References](https://events-3bg.pages.dev/jotter/api/references/) to helpful documents
* An [Overview](https://events-3bg.pages.dev/jotter/api/) and a [Details](https://events-3bg.pages.dev/jotter/api/details/) article on the API
* An in depth [same-document example](https://events-3bg.pages.dev/jotter/api/example/)
diff --git a/src/content/docs/basics/styling.mdx b/src/content/docs/basics/styling.mdx
index a40b007..a6a74b3 100644
--- a/src/content/docs/basics/styling.mdx
+++ b/src/content/docs/basics/styling.mdx
@@ -33,8 +33,18 @@ It is not important to have much imagination when choosing names. They can be th
At the start of the view transition, the **view transition names have to be unique** in the DOM. You can exempt an element from this uniqueness check by setting its (or one of its parent's) styling to `visibility: hidden` or `display: none`. For those elements, the browser won't generate pseudos.
+#### Auto-Generated Names
+The opposite problem to view transition names not being unique is that elements need to have _any_ `view-transition-name` assigned in order to trigger a group or morph animation. Often, the actual value doesn’t matter. What's important is simply having a value defined. For large numbers of elements, doing this manually can be cumbersome. You can automate it with JavaScript, as with the headings on this site or in [this demo](https://events-3bg.pages.dev/image-gallery/). However, it will also be possible to do this with only CSS, no JavaScript needed. [Check if your current browser already supports it](/basics/test-page/). And don't expect matching values on cross-document navigation. For that use case you need a JavaScript solution.
+
+```css
+.tile {
+ view-transition-name: auto;
+}
+```
+
The browser automatically assigns the view transition name `root` to the `:root` element, i.e. the top-level `` element for an HTML document. If you prefer another name, you can override it. If you do not want the `` element to participate in the view transition with own pseudo-elements, you explicitly have to remove the `root` name by [overriding it with `none`](/basics/pseudos/#opt-out).
+#### Dynamic Names
Of course view transition names do not need to be static. You can assign them conditionally, e.g. inside a media query or with a selector that checks for a special CSS class further up the DOM. Another interesting way for conditional assignment of view transition names is to let the m [depend on view transition types](/basics/styling/#conditional-view-transitions).
Because they are animatable CSS properties, view transition names can even be changed using other animations. So if you like you could automatically change a name over time or depending on the scroll position with scroll-driven animations.
diff --git a/src/content/docs/basics/testpage.mdx b/src/content/docs/basics/test-page.mdx
similarity index 80%
rename from src/content/docs/basics/testpage.mdx
rename to src/content/docs/basics/test-page.mdx
index e7da9aa..49ebc37 100644
--- a/src/content/docs/basics/testpage.mdx
+++ b/src/content/docs/basics/test-page.mdx
@@ -9,7 +9,8 @@ This page shows whether your current browser has native support for view transit
|-------|---------|
|View Transition API Level 1||
|View Transition API Level 2||
-|Nested transition groups||
+|Nested transition groups: `view-transition-group` property||
+|Auto-generated names: `view-transition-name: auto`||
The W3C Draft for [Level 1](https://drafts.csswg.org/css-view-transitions-1/) of the View Transition API defines view transitions within th same document.\
The W3C Draft for [Level 2]( https://drafts.csswg.org/css-view-transitions-2/) of the View Transition API covers cross-document view transitions.
@@ -30,6 +31,9 @@ Browser compatibility data: https://developer.mozilla.org/en-US/docs/Web/API/Vie
#level2b::before {
content: 'Not supported';
}
+ #level2c::before {
+ content: 'Not supported';
+ }
@supports (view-transition-name: a) {
#level1::before {
@@ -64,4 +68,15 @@ Browser compatibility data: https://developer.mozilla.org/en-US/docs/Web/API/Vie
width: 100%;
}
}
+ @supports (view-transition-name: auto) {
+ #level2b::before {
+ content: 'Supported';
+ background-color: lightgreen;
+ color: black;
+ display: inline-block;
+ margin: auto;
+ padding: 0.5ex 1ex;
+ width: 100%;
+ }
+ }
`}
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index 6e846e8..d8f3271 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -30,7 +30,7 @@ head:
content: '{"@context": "https://schema.org", "@type": "WebSite", "name": "@vtbag", "url": "https://vtbag.dev/"}'
---
-import Bsky from "../../components/bsky.astro"
+import Bsky from "../../components/Bsky.astro"