{"id":2462,"date":"2024-05-30T19:50:00","date_gmt":"2024-05-31T01:50:00","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2462"},"modified":"2024-05-30T19:50:01","modified_gmt":"2024-05-31T01:50:01","slug":"new-code-requirement-for-multi-page-view-transitions","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/new-code-requirement-for-multi-page-view-transitions\/","title":{"rendered":"New Code Requirement for Multi Page View Transitions"},"content":{"rendered":"\n<p>If you want to use <em>multi-page<\/em> view transitions, this used to be a prerequisite:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"view-transition\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"same-origin\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That&#8217;s dead. Now you do this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@view-transition<\/span> {\n  <span class=\"hljs-selector-tag\">navigation<\/span>: <span class=\"hljs-selector-tag\">auto<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Thanks to Bramus for the <a href=\"https:\/\/front-end.social\/@bramus\/112495246971535269\">PSA<\/a> and <a href=\"https:\/\/developer.chrome.com\/blog\/view-transitions-update-io24?hl=en\">update article<\/a>. <\/p>\n\n\n\n<!--more-->\n\n\n\n<iframe src=\"https:\/\/front-end.social\/@bramus\/112495243979447862\/embed\" class=\"mastodon-embed\" style=\"max-width: 100%; border: 0\" width=\"400\" allowfullscreen=\"allowfullscreen\"><\/iframe><script src=\"https:\/\/front-end.social\/embed.js\" async=\"async\"><\/script>\n\n\n\n<p>I imagine we&#8217;ll see PRs a lot like this! <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"760\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-30-at-8.49.00%E2%80%AFAM.png?resize=1024%2C760&#038;ssl=1\" alt=\"\" class=\"wp-image-2463\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-30-at-8.49.00%E2%80%AFAM.png?resize=1024%2C760&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-30-at-8.49.00%E2%80%AFAM.png?resize=300%2C223&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-30-at-8.49.00%E2%80%AFAM.png?resize=768%2C570&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-30-at-8.49.00%E2%80%AFAM.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Real quick here, I think the new <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Speculation_Rules_API\">Speculation Rules API<\/a> is worth a mention. See, there is an immediate performance cost to using multi-page view transitions. In order for the browser to understand what and how to transition, it needs to essentially render the page you are navigating to behind-the-scenes, <em>then<\/em> navigate to it, causing a bit of a delay. Hopefully that&#8217;s mitigated by the transition itself a bit, but any performance hit sucks. If the page was <em>already<\/em> pre-rendered (like it might be with this new API available), it should be smooth as butter. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to use multi-page view transitions, this used to be a prerequisite: That&#8217;s dead. Now you do this: Thanks to Bramus for the PSA and update article.<\/p>\n","protected":false},"author":1,"featured_media":2463,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,101],"class_list":["post-2462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-view-transitions"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-30-at-8.49.00%E2%80%AFAM.png?fit=1530%2C1136&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2462"}],"version-history":[{"count":3,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2462\/revisions"}],"predecessor-version":[{"id":2477,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2462\/revisions\/2477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2463"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}