auto naming

vtbag · Nov 9, 2024 · 4d263fb · 4d263fb
1 parent 1b218bb
commit 4d263fb
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 6 deletions.
diff --git 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 → src/components/Bsky.astro b/src/components/bsky.astro → src/components/Bsky.astro
diff --git 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 &hellip;
+* &hellip; information about the [structure of the pseudo-elements](/basics/pseudos/) of the API
+* &hellip; 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
@@ -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 `<html>` element for an HTML document. If you prefer another name, you can override it. If you do not want the `<html>` 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 → src/content/docs/basics/test-page.mdx b/src/content/docs/basics/testpage.mdx → 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|<span id="level1"/>|
 |View Transition API Level 2|<span id="level2"/>|
-|Nested transition groups|<span id="level2b"/>|
+|Nested transition groups: `view-transition-group` property|<span id="level2b"/>|
+|Auto-generated names: `view-transition-name: auto`|<span id="level2c"/>|
 
 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%;
+		}
+	}
 `}</style>
diff --git 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"
 
 <style>{`
   .hero h1 {