https://www.bram.us/wordpress/wp-content/uploads/2026/10/ie-page-transitions.mp4 Recording of the demo showcasing all 23 `RevealTrans` effects. ~ Back in late 2024, I started working on a fun end-of-year side project named `ie-page-transitions`. It’s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style. ~ ### # A Quick Trip Down Memory Lane (and Project History) If you built websites in the late 1990s or early 2000s, you might remember that Microsoft Internet Explorer 4.0 through 8.0 had a proprietary feature called Interpage Transitions. Using a simple `<meta>` tag in the `<head>` of your document, you could apply PowerPoint-style transitions — like _Box in_ , _Circle out_ , _Vertical blinds_ , _Checkerboard_ , or _Random dissolve_ — to the entire browser viewport whenever a visitor entered or exited a web page. <!-- Page entry effect using effect number 7 (Wipe left) --> <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=7)"> https://www.bram.us/wordpress/wp-content/uploads/2026/10/ie8-page-exit.mp4 Recording of the Interpage Transitions on page exit, recorded in Internet Explorer 8. At the end of 2024, it struck me that we now have all the primitives in modern CSS and the View Transition API to recreate those exact transitions cleanly on today’s web. I teased an early prototype on Bluesky back in December 2024 as a little EOY project, and I even showed it off in a few conference talks since. However, I never got around to actually covering it here on `bram.us` because the project wasn’t finalized yet: I had only implemented a handful of the 23 effects and still needed to wire up the trickier ones like checkerboard grids, pixel dissolves, and random bars. Recently, thanks to Gemini, I was able to easily knock out the remaining effects, polish up the interactive demo site, and finally get the whole thing over the finish line! 🙂 ~ ### # Bringing the Oldskool Back Rather than inventing a new configuration format, `ie-page-transitions` brings the oldskool back by reading the exact same `<meta http-equiv="Page-Enter">` and `<meta http-equiv="Page-Exit">` tags that Internet Explorer used back in the day. Under the hood, a tiny script parses the `revealTrans(Duration=…,Transition=…)` declaration from your `<meta>` tags and translates it into Selective View Transitions with Active Types (for example, `page-enter-effect-7`). The accompanying stylesheet then uses the `:active-view-transition-type()` pseudo-class to animate the `::view-transition-old(root)` and `::view-transition-new(root)` pseudo-elements using modern CSS `clip-path` shapes, multi-layer `mask-image` gradients, and registered custom properties (`@property`). To use it on a Multi-Page Application (aka _“just a website”_), opt in to Cross-Document View Transitions, load the stylesheet and render-blocking module script, and drop in your classic IE `<meta>` tags: <!-- 1. Enable Cross-Document View Transitions --> <style> @view-transition { navigation: auto; } </style> <!-- 2. Include Stylesheet and Render-Blocking Script --> <link rel="stylesheet" href="https://unpkg.com/ie-page-transitions/ie-page-transitions.css"> <script src="https://unpkg.com/ie-page-transitions/ie-page-transitions.mpa.js" type="module" blocking="render"></script> <!-- 3. Configure IE Page Transitions Effect(s) --> <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=23)"> <meta http-equiv="Page-Exit" content="revealTrans(Duration=0.5,Transition=23)"> A helper for Single-Page Applications (SPAs) is also included, alongside a set of CSS Custom Properties (like `--page-transitions-blinds-bands`, `--page-transitions-checkerboard-columns`, and `--page-transitions-random-dissolve-size`) in case you want to tweak the geometry of the effects. Under the hood `ie-page-transitions` uses View Transition Types. Browser support therefore only starts with Chrome 125+, Safari 18.2+, and Firefox 147+ for the SPA variant. For the MPA variant, Cross-Document View Transition support is required, so that leaves Chrome 126+ and Safari 18.2+. Because `ie-page-transitions` reuses the original `<meta>` tags originally introduced by Internet Explorer, the effects are supported not only in today’s modern browsers, but also in Internet Explorer 5.5 – 8.0 😆. In those versions of IE, the browser’s native DirectX `RevealTrans` filter will kick in automatically while in modern browsers `ie-page-transitions` takes over. ~ ### # Check It Out I’ve put together a dedicated website at page-transitions.style where you can preview all 23 effects, read the full documentation, and play with both the SPA and MPA demos right inside an embedded browser shell. * page-transitions.style (Website & Live Demos) → * `ie-page-transitions` on GitHub → * `ie-page-transitions` on NPM → ~ ### # Spread the word Feel free to reshare one of the following posts on social media to help spread the word: * 🦋 Bluesky * 🦣 Mastodon * 💼 LinkedIn ~ **🔥 Like what you see? Want to stay in the loop? Here's how:** * 🦋 Follow @bram.us on Bluesky * 🔸 Follow bram.us using RSS I can also be found on 𝕏 Twitter and 🐘 Mastodon but only post there sporadically.

Very few images are truly decorative. An image can add meaning, mood, or context without providing information. It may be time for WCAG to use a better category.

Wikipedia に「一緒に歌舞伎を観に行った」との記述があるのですが、35年分の本誌目次コメントをチェックした結果そのような事実は確認できませんでした。情報ソースを求めています。

Can you animate the opening and closing of the HTML `<details>` element using only CSS? Yes. Here’s the code: details::details-content { block-size: 0; overflow: hidden; transition-property: block-size, content-visibility; transition-duration: var(--transition-duration, 0.2s); transition-behavior: allow-discrete; } details[open]::details-content { block-size: auto; block-size: calc-size(auto, size); } It took an annoyingly long time to find a good answer to what felt like a basic question. Too many solutions relied on hacky approaches with obvious flaws, used unnecessary JavaScript, or only accomplished part of the solution (not animating the close). I finally found what I was looking for in a video, and since I prefer blog posts that are easy to scan, find what one needs (especially when the author puts the answer at the top of the page!), and copy/pasted from, I decided to write this and share it for posterity. Hope you found it useful. Please share. ## Explanation If you want a deeper understanding of what the code is doing, we can break it down line by line: * `details::details-content {...}` – This is the CSS selector for the content of the details element. In other words, this is the stuff we want to show and hide. * `block-size: 0;` – Sets the size of the details content to zero. * `overflow: hidden;` – Makes sure that as the element is animating between a height of `0` and `auto`, the content within it will not be shown. * `transition-property: block-size, content-visibility;` – This animation relies on animating the `block-size` AND `content-visibility` properties. `block-size` is the one that controls the animation of the height. `content-visibility` is a little less obvious but is necessary because of how the `<details>` element works. It contains a Shadow DOM that controls the element under the hood and shows or hides the content visibility. We basically want the `content-visibility` property to wait until the `block-size` has finished animating before changing the `content-visibility`. * `transition-duration: var(--transition-duration, 0.2s);` – Tells the browser how long the animation should take. In this case, we are assigning the value to the CSS custom property, `--transition-duration` with a fallback of 0.2 seconds. * `transition-behavior: allow-discrete;` – This is the line that makes it all work. `transition-behavior` is relatively new, and `allow-discrete` is the value that allows developers to animate ‘discrete’ properties. It’s too complicated to explain in full detail here, so check out the page on `transition-behavior` and Animatable CSS Properties on MDN. * `details[open]::details-content {...}` – CSS selector for styling the details content only when the details element is open. * `block-size: auto;` – A fallback for browsers that do not support the `calc-size()` CSS function, which is a more modern approach for this solution. * `block-size: calc-size(auto, size);` – Tells the browser to set the height of the details content to it. ## Browse Support This approach relies on some CSS that, at the time of publishing, does not work in Firefox. As a Firefox user, I am ok with this. This is an example of progressive enhancement where users on supported browsers will get the animated experience, and users on non-supported browsers get the default. The `<details>` element still opens and closes as expected, it just does not animate. This is an affordance I am ok with because: * Eventually, more browsers will catch up. * It uses built-in browser features as they are intended, without relying on hacks. * I don’t have to remember at some point later on to remove code. ## Bonus: Custom Marker & Animation It’s also possible to use a custom marker and animate it on open and close. This example removes the default `::marker` pseudoelement and replaces it with a custom `»` character using the `::before` pseudoelement. It also relies on some absolute positioning and padding, so you might need to tweak it a bit summary { position: relative; padding-inline-start: .75rem; } summary::marker { content: '»'; content: none; } summary::before { content: '»'; position: absolute; inset-inline-start: 0; inset-block-start: -0.05rem; transition: rotate 0.2s; } details[open] summary::before { rotate: 90deg; inset-block-start: 0.05rem; } ## Credits The best solution found came in a video by CSS Weekly‘s Zoran Jambor. His demo is much fancier, and he goes into much more details explaining how things work and why he took this approach. I highly recommend watching it and following his work. Watch this video on YouTube * * * _Thanks for stopping by my corner of the internet. Here, there are no ads, trackers, paywalls, accounts, etc. It's hard, but worth the better experience. If you'd like to keep this site up, considerhiring me, making a donation, buying something (soon), leaving a comment, or sharing. It helps more than you know. I'm glad you're here :)_

Google は、検索結果でサポートするファビコンのファイル形式を具体的に提示するように、ファビコンのドキュメントを更新した。

Contribute to SaekiTominaga/w0s.jp development by creating an account on GitHub.