{"id":8540,"date":"2022-03-04T10:10:55","date_gmt":"2022-03-04T10:10:55","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/en\/?p=6810"},"modified":"2025-07-18T14:50:07","modified_gmt":"2025-07-18T14:50:07","slug":"incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/","title":{"rendered":"Incoming: 20 new CSS viewport units: &#8216;svh&#8217;, &#8216;lvh&#8217;, &#8216;dvh&#8217;, &#8216;svw&#8217;, &#8216;lvw&#8217;, &#8216;dvw&#8217;, &#8230;"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"5682.7421875\" data-cache-vw-t=\"617\" data-cache-h-t=\"5006.8828125\" data-cache-vw-m=\"462\" data-cache-h-m=\"11221.25\"><div class=\"col all\"><p>As of March 2022 new CSS viewport units <a class=\"code css-code\" href=\"#dt-svh\">svh<\/a>, <a class=\"code css-code\" href=\"#dt-lvh\">lvh<\/a>, <a class=\"code css-code\" href=\"#dt-dvh\">dvh<\/a>, <a class=\"code css-code\" href=\"#dt-svw\">svw<\/a>, <a class=\"code css-code\" href=\"#dt-lvw\">lvw<\/a>, and <a class=\"code css-code\" href=\"#dt-dvw\">dvw<\/a> are incoming as part of the efforts of Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla to improve the web for developers; as part of a project called Interop 2022. Who had ever thought.<\/p><h2>Why these new CSS viewport units?<\/h2><p>These new CSS units are there to better reflect the viewport's minimum, maximum and current dimensions. For developers this used to require both CSS and JavaScript.<\/p><p>This means that there has never been a clean or built-in solution for issues regarding viewport height excluding the interface of mobile viewports (the URL bar for instance).<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><tw-shortcode-wrapper data-id=\"12\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h3>Overview of current viewport units (as of March 2022)<\/h3><p>Before we jump into the new CSS viewport units, it's important to know the behaviour of the viewport units that are currently supported by most modern web browsers.<\/p><p><strong>Note:<\/strong> all viewport-relative units hold a value that is relative to 1% of the dimension of the viewport it refers to. This means that <code class=\"css-code\">50<a href=\"#dt-vh\">vh<\/a><\/code> is equal to 50% of the viewport's height.<\/p><dl><dt id=\"dt-vh\"><h4><abbr title=\"Viewport height\">vh<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">vh<\/span> refers to the height of the viewport.<\/p><p>Before 2017, Chrome for Android would update the value of <code class=\"css-code\">vh<\/code> whenever the currently visible viewport height changed due to the interface of the browser changing.<\/p><p>This caused layout shifts when, for instance, the address bar would move out of view due to scrolling down a web page. Safari for iOS was one of the first mobile web browsers to change the value of the <code class=\"css-code\">vh<\/code> unit to refer to the largest possible viewport height.<\/p><p>Chrome for Android changed the implementation of unit <code class=\"css-code\">vh<\/code> accordingly in version 56.<\/p><\/dd><dt id=\"dt-vw\"><h4><abbr title=\"Viewport width\">vw<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">vw<\/span> refers to the width of the viewport.<\/p><p>There has been <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/1766\">frustration and debate about unit vw including the scrollbar<\/a> that may or may not be present on the right side of your viewport, causing a horizontal scrollbar when applying <code class=\"css-code\">100vw<\/code> on an HTML element inside of a scrollable web page.<\/p><p>Web browser developers have discussed this and decided not to subtract the scroll bar width from the <code class=\"css-code\">vw<\/code> unit. Whether the scrollbar's&nbsp;width should be subtracted from <code class=\"css-code\">vw<\/code> or not depends on whether the web page has content that overflows the root vertically.<\/p><p>That means that the web browser can only know whether or not to subtract the scrollbar width if the whole web page has already rendered.<\/p><p>This means that a forced recalculation of styles would occur after the web browser finds out that a scrollbar has appeared due to rendered content overflowing the root.<\/p><p>That is the reason why web browser developers decided to keep the calculation of the <code class=\"css-code\">vw<\/code> unit as is. Consider reading the how-to section&nbsp;<a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/viewport-relative-fluid-responsive-web-design\/#excluding-scrollbar-from-viewport-width-css-100vw-minus-scrollbar-width\" target=\"_blank\" rel=\"noopener\">CSS 100vw minus scrollbar width<\/a>.<\/p><\/dd><dt id=\"dt-vmin\"><h4><abbr title=\"Viewport minimum\">vmin<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">vmin<\/span> refers to the smallest dimension of the viewport. Just like is the case with unit <a href=\"#dt-vw\" class=\"code css-code\">vw<\/a>, <a href=\"#finetuning-units-like-vmin-and-vmax-need-a-recalculation,-because-the-viewport-width-units-include-the-scrollbar&amp;#039;s-width\">unit vmin needs recalculation<\/a> to subtract the scrollbar from the viewport width.<\/p><\/dd><dt id=\"dt-vmax\"><h4><abbr title=\"Viewport maximum\">vmax<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">vmax<\/span> refers to the largest dimension of the viewport. Just like is the case with unit <a href=\"#dt-vmin\" class=\"code css-code\">vmin<\/a>, <a href=\"finetuning-units-like-vmin-and-vmax-need-a-recalculation,-because-the-viewport-width-units-include-the-scrollbar&amp;#039;s-width\">unit vmax needs recalculation<\/a> to subtract the scrollbar from the viewport width.<\/p><\/dd><\/dl><tw-shortcode-wrapper data-id=\"13\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h3>Overview of the new incoming CSS viewport units<\/h3><dl><dt id=\"dt-svh\"><h4><abbr title=\"Smallest viewport height\">svh<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">svh<\/span> reflects the smallest possible viewport height that is visible to the user. The smallest possible viewport height excludes all interface elements by the user agent.<\/p><p>By default, the <a class=\"code css-code\" href=\"#dt-vh\">vh<\/a> unit includes the address bar that comes with a mobile browser.<\/p><\/dd><dt id=\"dt-lvh\"><h4><abbr title=\"Largest viewport height\">lvh<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">lvh<\/span> reflects the largest possible viewport height visible to the user.<\/p><\/dd><dt id=\"dt-dvh\"><h4><abbr title=\"Dynamic viewport height\">dvh<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">dvh<\/span> reflects the current viewport height. This unit excludes the user agent's interface, unlike unit <a href=\"#dt-vh\" class=\"code css-code\">vh<\/a>, and updates as the current viewport height changes.<\/p><p>Unit <code class=\"css-code\">dvh<\/code> reflects how much vertical viewport height the user agent's interface currently takes up. For instance, this will change as you scroll down a page on mobile, since the mobile URL bar moves out of your screen.<\/p><\/dd><dt id=\"dt-svw\"><h4><abbr title=\"Smallest viewport width\">svw<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">svw<\/span> reflects the smallest possible viewport width that is visible to the user. This unit's value is static, so it will not be changed if the current viewport's width changes.<\/p><\/dd><dt id=\"dt-lvw\"><h4><abbr title=\"Largest viewport width\">lvw<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">lvw<\/span> reflects the largest possible viewport width that is visible to the user. Like unit svw, this unit's value is static and will not change.<\/p><\/dd><dt id=\"dt-dvw\"><h4><abbr title=\"Dynamic viewport width\">dvw<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">dvw<\/span> reflects the current viewport width that is visible to the user. This value is dynamic and will thus change according to the current viewport width.<\/p><\/dd><dt id=\"dt-svmin\"><h4><abbr title=\"Smallest viewport minimum\">svmin<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">svmin<\/span> picks the smallest value between units <a href=\"#dt-svh\" class=\"code css-code\">svh<\/a> and <a href=\"#dt-svw\" class=\"code css-code\">svw<\/a>.<\/p><\/dd><dt id=\"dt-lvmin\"><h4><abbr title=\"Largest viewport minimum\">lvmin<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">lvmin<\/span> picks the smallest value between units <a href=\"#dt-lvh\" class=\"code css-code\">lvh<\/a> and <a href=\"#dt-lvw\" class=\"code css-code\">lvw<\/a>.<\/p><\/dd><dt id=\"dt-dvmin\"><h4><abbr title=\"Dynamic viewport minimum\">dvmin<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">dvmin<\/span> picks the smallest value between units <a href=\"#dt-dvh\" class=\"code css-code\">dvh<\/a> and <a href=\"#dt-dvw\" class=\"code css-code\">dvw<\/a>.<\/p><\/dd><dt id=\"dt-svmax\"><h4><abbr title=\"Smallest viewport maximum\">svmax<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">svmax<\/span> picks the largest value between units <a href=\"#dt-svh\" class=\"code css-code\">svh<\/a> and <a href=\"#dt-svw\" class=\"code css-code\">svw<\/a>.<\/p><\/dd><dt id=\"dt-lvmax\"><h4><abbr title=\"Largest viewport maximum\">lvmax<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">lvmin<\/span> picks the largest value between units <a href=\"#dt-lvh\" class=\"code css-code\">lvh<\/a> and <a href=\"#dt-lvw\" class=\"code css-code\">lvw<\/a>.<\/p><\/dd><dt id=\"dt-dvmax\"><h4><abbr title=\"Dynamic viewport maximum\">dvmax<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">dvmax<\/span> picks the largest value between units <a href=\"#dt-dvh\" class=\"code css-code\">dvh<\/a> and <a href=\"#dt-dvw\" class=\"code css-code\">dvw<\/a>.<\/p><\/dd><dt id=\"dt-vi\"><h4><abbr title=\"Viewport inline\">vi<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">vi<\/span> refers to the viewport's size in the inline direction. For typical English text, the inline direction refers to the width; writing from left to right.&nbsp;However, for typical Chinese text layouts, the inline direction refers to the height; writing from top to bottom.<\/p><\/dd><dt id=\"dt-svi\"><h4><abbr title=\"Smallest viewport inline\">svi<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">svi<\/span> refers to the viewport's smallest possible size in the inline direction.<\/p><\/dd><dt id=\"dt-lvi\"><h4><abbr title=\"Largest viewport inline\">lvi<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">lvi<\/span> refers to the viewport's largest possible size in the inline direction.<\/p><\/dd><dt id=\"dt-dvi\"><h4><abbr title=\"Dynamic viewport inline\">dvi<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">dvi<\/span> refers to the viewport's current possible size in the inline direction.<\/p><\/dd><dt id=\"dt-vb\"><h4><abbr title=\"Viewport block\">vb<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">vb<\/span> refers to the viewport's size in the block direction. For typical English text, the block direction refers to the height; with lines wrapping from top to bottom. For typical Chinese text, the block direction refers to the width; wrapping lines from right to left.<\/p><\/dd><dt id=\"dt-svb\"><h4><abbr title=\"Smallest viewport block\">svb<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">svb<\/span> refers to the viewport's smallest possible dimension in the block direction.<\/p><\/dd><dt id=\"dt-lvb\"><h4><abbr title=\"Largest viewport block\">lvb<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">lvb<\/span> refers to the viewport's largest possible dimension in the block direction.<\/p><\/dd><dt id=\"dt-dvb\"><h4><abbr title=\"Dynamic viewport block\">dvb<\/abbr><\/h4><\/dt><dd><p>Unit <span class=\"code css-code\">dvb<\/span> refers to the viewport's current dimension in the block direction.<\/p><\/dd><\/dl><tw-shortcode-wrapper data-id=\"14\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Finetuning<\/h2><p>Not everything is fixed with the addition of the new CSS viewport units, so here are some issues that I noticed working with viewport relative CSS units.<\/p><h3>Mobile keyboards affect viewport height units<\/h3><p>Whenever a keyboard appears on a mobile viewport, the value of unit <code class=\"css-code\">vh<\/code> changes.<\/p><p>The viewport units' values can be configured to not take the keyboard into account as proposed in&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/virtual-keyboard\/\"><abbr title=\"World Wide Web Consortium\">W3C<\/abbr>'s article on the Virtual Keyboard API<\/a>.<\/p><p>To do so, use this JavaScript code:<\/p><tw-pre><code class=\"js-code\">if('virtualKeyboard' in navigator) {\r\n  navigator.virtualKeyboard.overlaysContent = true;\r\n}<\/code><\/tw-pre><h3>Units like vmin and vmax need a recalculation, because the viewport width units include the scrollbar's width<\/h3><p>Viewport width includes the scrollbar's width, which causes units like <a href=\"#dt-vmin\" class=\"code css-code\">vmin<\/a>&nbsp;to return either the viewport height (if that's the smallest dimension) or the viewport width&nbsp;(if that's the smallest dimension), which includes the scrollbar's width.<\/p><p>This means that you have to create your own version of <a href=\"#dt-vmin\" class=\"code css-code\">vmin<\/a>&nbsp;that compares the viewport's height and it's width excluding the scrollbar's width.<\/p><p>After <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/viewport-relative-fluid-responsive-web-design\/#excluding-scrollbar-from-viewport-width-css-100vw-minus-scrollbar-width\" target=\"_blank\" rel=\"noopener\">subtracting the scrollbar width from unit vw<\/a>, you can use the CSS variable called&nbsp;<code class=\"css-code nowrap\">--vw<\/code> you've created inside of CSS function <code class=\"css-code\">min()<\/code> and <code class=\"css-code\">max()<\/code> in order to create your own custom CSS variables called <code class=\"css-code\">--vmin<\/code> and <code class=\"css-code\">--vmax<\/code>. This is how:<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --vmin: calc(min(1vh, var(--vw)));\r\n  --vmax: calc(max(1vh, var(--vw)));\r\n}<\/code><\/tw-pre><p>The same recalculation is required for the new viewport units regarding the smallest and largest dimension: <a href=\"#dt-svmin\" class=\"code css-code\">svmin<\/a>, <a href=\"#dt-lvmin\" class=\"code css-code\">lvmin<\/a>, <a href=\"#dt-dvmin\" class=\"code css-code\">dvmin<\/a>, <a href=\"#dt-svmax\" class=\"code css-code\">svmax<\/a>, <a href=\"#dt-lvmax\" class=\"code css-code\">lvmax<\/a>, and <a href=\"#dt-dvmax\" class=\"code css-code\">dvmax<\/a>.<\/p><p><strong>Note:<\/strong> in the code below, CSS variable&nbsp;<code class=\"css-code\">--scrollbarWidth<\/code>&nbsp;refers to the scrollbar's width that you calculated in order to <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/viewport-relative-fluid-responsive-web-design\/#excluding-scrollbar-from-viewport-width-css-100vw-minus-scrollbar-width\" target=\"_blank\" rel=\"noopener\">subtract the scrollbar's width from unit vw<\/a>.<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --svw: calc(1svw - var(--scrollbarWidth) \/ 100);\r\n  --lvw: calc(1lvw - var(--scrollbarWidth) \/ 100);\r\n  --dvw: calc(1dvw - var(--scrollbarWidth) \/ 100);\r\n  \r\n  --svmin: calc(min(1svh, var(--svw)));\r\n  --svmax: calc(max(1svh, var(--svw)));\r\n\r\n  --lvmin: calc(min(1lvh, var(--lvw)));\r\n  --lvmax: calc(max(1lvh, var(--lvw)));\r\n\r\n  --dvmin: calc(min(1dvh, var(--dvw)));\r\n  --dvmax: calc(max(1dvh, var(--dvw)));\r\n}<\/code><\/tw-pre><h2>Sources<\/h2><ul><li><a href=\"https:\/\/www.w3.org\/TR\/css-values-4\/#dynamic-viewport-size\" target=\"_blank\" rel=\"noopener\">https:\/\/www.w3.org\/TR\/css-values-4\/#dynamic-viewport-size<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/TR\/css-writing-modes-4\/#inline-axis\" target=\"_blank\" rel=\"noopener\">https:\/\/www.w3.org\/TR\/css-writing-modes-4\/#inline-axis<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/TR\/virtual-keyboard\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.w3.org\/TR\/virtual-keyboard\/<\/a><\/li><li><a href=\"https:\/\/webkit.org\/blog\/12288\/working-together-on-interop-2022\/\" target=\"_blank\" rel=\"noopener\">https:\/\/webkit.org\/blog\/12288\/working-together-on-interop-2022\/<\/a><br><\/li><li><a href=\"https:\/\/web.dev\/interop-2022\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/interop-2022\/<\/a><\/li><li><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/1766\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/w3c\/csswg-drafts\/issues\/1766<\/a><\/li><\/ul><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>As of March 2022 new CSS viewport units svh, lvh, dvh, svw, lvw, and dvw are incoming as part of the efforts of Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla to improve the web for developers; as part of a project called Interop 2022. Who had ever thought.Why these new CSS viewport units?These new CSS <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":8541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-8540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...<\/title>\n<meta name=\"description\" content=\"Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...\" \/>\n<meta property=\"og:description\" content=\"Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-04T10:10:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:50:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Incoming: 20 new CSS viewport units: &#8216;svh&#8217;, &#8216;lvh&#8217;, &#8216;dvh&#8217;, &#8216;svw&#8217;, &#8216;lvw&#8217;, &#8216;dvw&#8217;, &#8230;\",\"datePublished\":\"2022-03-04T10:10:55+00:00\",\"dateModified\":\"2025-07-18T14:50:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\"},\"wordCount\":11,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\",\"name\":\"Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png\",\"datePublished\":\"2022-03-04T10:10:55+00:00\",\"dateModified\":\"2025-07-18T14:50:07+00:00\",\"description\":\"Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png\",\"width\":1200,\"height\":676,\"caption\":\"20 New CSS viewport units, svh, lvh, dvh, ...\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...","description":"Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/","og_locale":"en_US","og_type":"article","og_title":"Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...","og_description":"Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2022-03-04T10:10:55+00:00","article_modified_time":"2025-07-18T14:50:07+00:00","og_image":[{"width":1200,"height":676,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png","type":"image\/png"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Incoming: 20 new CSS viewport units: &#8216;svh&#8217;, &#8216;lvh&#8217;, &#8216;dvh&#8217;, &#8216;svw&#8217;, &#8216;lvw&#8217;, &#8216;dvw&#8217;, &#8230;","datePublished":"2022-03-04T10:10:55+00:00","dateModified":"2025-07-18T14:50:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/"},"wordCount":11,"commentCount":4,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png","articleSection":["Blog","CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/","name":"Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png","datePublished":"2022-03-04T10:10:55+00:00","dateModified":"2025-07-18T14:50:07+00:00","description":"Explanation of current viewport units and all 20 incoming new viewport-relative CSS units: svh, lvh, dvh, svw, lvw, dvw, and many more.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/03\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw.png","width":1200,"height":676,"caption":"20 New CSS viewport units, svh, lvh, dvh, ..."},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=8540"}],"version-history":[{"count":2,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8540\/revisions"}],"predecessor-version":[{"id":9080,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/8540\/revisions\/9080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/8541"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=8540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=8540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=8540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}