{"id":295,"date":"2024-12-31T11:00:00","date_gmt":"2024-12-31T12:00:00","guid":{"rendered":"https:\/\/blissfuldebt.com\/?p=295"},"modified":"2025-03-06T17:24:39","modified_gmt":"2025-03-06T17:24:39","slug":"new-front-end-features-for-designers-in-2025","status":"publish","type":"post","link":"https:\/\/blissfuldebt.com\/index.php\/2024\/12\/31\/new-front-end-features-for-designers-in-2025\/","title":{"rendered":"New Front-End Features For Designers In 2025"},"content":{"rendered":"<p>              <title>New Front-End Features For Designers In 2025<\/title><\/p>\n<article>\n<header>\n<h1>New Front-End Features For Designers In 2025<\/h1>\n<address>Cosima Mielke<\/address>\n<p>                  2024-12-31T12:00:00+00:00<br \/>\n                  2025-03-06T17:04:34+00:00<br \/>\n                <\/header>\n<p>Component-specific styling, styling parents based on their children, relative colors \u2014 the web platform is going through <strong>exciting times<\/strong>, and many things that required JavaScript in the past can today be achieved with <strong>one simple line of HTML and CSS<\/strong>.<\/p>\n<p>As we are moving towards 2025, it\u2019s a good time to revisit some of the <strong>incredible new technologies<\/strong> that are broadly available and supported in modern browsers today. Let\u2019s dive right in and explore how they can simplify your day-to-day work and help you build modern UI components.<\/p>\n<h3 id=\"table-of-contents\">Table of Contents<\/h3>\n<p>Below you\u2019ll find quick jumps to topics you may be interested in, or <a href=\"#css-container-queries-and-style-queries\">skip the table of contents<\/a>.<\/p>\n<ul class=\"toc-components\">\n<li><a href=\"#anchor-positioning-for-tooltips-and-popovers\">anchor-positioning<\/a><\/li>\n<li><a href=\"#auto-field-sizing-for-forms\">auto field-sizing<\/a><\/li>\n<li><a href=\"#css-container-queries-and-style-queries\">container queries<\/a><\/li>\n<li><a href=\"#reliable-dialog-and-popover\"><code>&lt;dialog&gt;<\/code><\/a><\/li>\n<li><a href=\"#exclusive-accordions\">exclusive accordions<\/a><\/li>\n<li><a href=\"#making-focus-visible\"><code>:focus-visible<\/code><\/a><\/li>\n<li><a href=\"#styling-parents-based-on-children\"><code>:has<\/code><\/a><\/li>\n<li><a href=\"#making-hidden-content-searchable\"><code>hidden=until-found<\/code><\/a><\/li>\n<li><a href=\"#high-definition-colors-with-oklch-and-oklab\">high-definition colors<\/a><\/li>\n<li><a href=\"#styling-groups-within-select-menus\"><code>&lt;hr&gt;<\/code> in select<\/a><\/li>\n<li><a href=\"#the-right-virtual-keyboard-on-mobile\"><code>inputmode<\/code><\/a><\/li>\n<li><a href=\"#interpolate-between-values-for-type-and-spacing\"><code>min()<\/code>, <code>max()<\/code>, <code>clamp()<\/code><\/a><\/li>\n<li><a href=\"#relative-colors-in-css\">relative colors<\/a><\/li>\n<li><a href=\"#responsive-html-video-and-audio\">responsive videos<\/a><\/li>\n<li><a href=\"#smooth-scrolling-behavior\">scroll behavior<\/a><\/li>\n<li><a href=\"#simpler-snapping-for-scrollable-containers\">scroll snap<\/a><\/li>\n<li><a href=\"#no-more-typographic-orphans-and-widows\"><code>text-wrap: balance<\/code><\/a><\/li>\n<li><a href=\"#live-and-late-validation\"><code>:user-valid<\/code> and <code>:user-invalid<\/code><\/a><\/li>\n<li><a href=\"#smooth-transitions-with-the-view-transitions-api\">View Transitions API<\/a><\/li>\n<\/ul>\n<h2 id=\"css-container-queries-and-style-queries\">CSS Container Queries And Style Queries<\/h2>\n<p><strong>Component-specific styling<\/strong>? What has long sounded like a dream to any developer, is slowly but surely becoming reality. Thanks to container queries, we can now query the width and style of the container in which components live.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/style-queries\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"521\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"CSS Container Queries And Style Queries\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/style-queries-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/style-queries\">Style queries<\/a> give us more logical control of styles in CSS. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/style-queries-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As Una Kravets points out in her <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/style-queries\">introduction to style queries<\/a>, this currently only works with CSS custom property values, but there are already some real-world use cases where style queries shine: They come in particularly handy when you have a <strong>reusable component with multiple variations<\/strong> or when you don\u2019t have control over all of your styles but need to apply changes in certain cases.<\/p>\n<p>If you want to dive deeper into what\u2019s possible with container style queries and the things we can \u2014 maybe \u2014 look forward to in the future, also be sure to take a look at <a href=\"https:\/\/css-tricks.com\/digging-deeper-into-container-style-queries\/\">Geoff Graham\u2019s post<\/a>. He dug deep into the <strong>more nuanced aspects of style queries<\/strong> and summarized the things that stood out to him.<\/p>\n<h2 id=\"no-more-typographic-orphans-and-widows\">No More Typographic Orphans And Widows<\/h2>\n<p>We all know those headlines where the last word breaks onto a new line and stands there alone, breaking the visual and looking, well, odd. Of course, there\u2019s the good ol\u2019 <code>&lt;br&gt;<\/code> to break the text manually or a <code>&lt;span&gt;<\/code> to <strong>divide the content into different parts<\/strong>. But have you heard of <code>text-wrap: balance<\/code> already?<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/ishadeed.com\/article\/css-text-wrap-balance\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"369\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"No More Typographic Orphans And Widows\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/text-wrap-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      No more odd line breaks, thanks to <a href=\"https:\/\/ishadeed.com\/article\/css-text-wrap-balance\/\"><code>text-wrap: balance<\/code><\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/text-wrap-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>By applying the <code>text-wrap: balance<\/code> property, the browser will automatically <strong>calculate the number of words<\/strong> and divide them equally between two lines \u2014 perfect for <strong>page titles<\/strong>, card titles, tooltips, modals, and FAQs, for example. Ahmad Shadeed wrote a helpful <a href=\"https:\/\/ishadeed.com\/article\/css-text-wrap-balance\/\">guide to <code>text-wrap: balance<\/code><\/a> in which he takes a detailed look at the property and how it can help you make your headlines look more consistent.<\/p>\n<p>When dealing with large blocks of text, such as <strong>paragraphs<\/strong>, you might want to look into <code>text-wrap: pretty<\/code> to <a href=\"https:\/\/developer.chrome.com\/blog\/css-text-wrap-pretty\">prevent orphans on the last line<\/a>.<\/p>\n<h2 id=\"auto-field-sizing-for-forms\">Auto Field-Sizing For Forms<\/h2>\n<p>Finding just the right size for an input field usually involves a lot of guesswork \u2014 or JavaScript \u2014 to count characters and increase the field\u2019s height or width as a user enters text. CSS <code>field-sizing<\/code> is here to change that. With field-sizing, we can <strong>auto-grow inputs and text areas<\/strong>, but also auto-shrink short select menus, so the form always fits content size perfectly. All we need to make it happen is one line of CSS.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/css-field-sizing\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"496\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Auto Field-Sizing For Forms\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/auto-field-sizing-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/css-field-sizing\">Auto field-sizing<\/a> allows us to automatically grow or shrink inputs and text areas depending on the content size. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/auto-field-sizing-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Adam Argyle summarized <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/css-field-sizing\">everything you need to know about field-sizing<\/a>, exploring in detail how <code>field-sizing<\/code> affects different <code>&lt;form&gt;<\/code> elements. To prevent your input fields from becoming too small or too large, it is also a good idea to insert some <strong>additional styles<\/strong> that keep them in shape. Adam shares a code snippet that you can copy-and-paste right away.<\/p>\n<h2 id=\"making-hidden-content-searchable\">Making Hidden Content Searchable<\/h2>\n<p>Accordions are a popular UI pattern, but they come with a caveat: The content inside the collapsed sections is impossible to search with <strong>find-in-page search<\/strong>. By using the <code>hidden=until-found<\/code> attribute and the <code>beforematch<\/code> event, we can solve the problem and even make the content accessible to search engines.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/hidden-until-found\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"475\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Making Hidden Content Searchable\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/hidden-until-found-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/hidden-until-found\"><code>hidden=until-found<\/code><\/a> makes hidden content in accordions searchable. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/hidden-until-found-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As Joey Arhar explains in his <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/hidden-until-found\">guide to making collapsed content searchable<\/a>, you can <strong>replace the styles that hide the section<\/strong> with the <code>hidden=until-found<\/code> attribute. If your page also has another state that needs to be kept in sync with whether or not your section is revealed, he recommends adding a <code>beforematch<\/code> event listener. It will be fired on the <code>hidden=until-found<\/code> element right before the element is revealed by the browser.<\/p>\n<h2 id=\"styling-groups-within-select-menus\">Styling Groups Within Select Menus<\/h2>\n<p>It\u2019s a small upgrade for the <code>&lt;select&gt;<\/code> element, but a mighty one: We can now add <code>&lt;hr&gt;<\/code> into the list of select options, and they will <a href=\"https:\/\/developer.chrome.com\/blog\/hr-in-select\">appear as separators<\/a> to help <strong>visually break up the options<\/strong> in the list.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/blog\/hr-in-select\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"565\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Styling Groups Within Select Menus\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/select-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Perfect when your select menu has a lot of options: It\u2019s now possible to <a href=\"https:\/\/developer.chrome.com\/blog\/hr-in-select\">group content<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/select-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>If you want to refine things further, also be sure to take a look at <code>&lt;optgroup&gt;<\/code>. The HTML element lets you <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/optgroup\">group options within a <code>&lt;select&gt;<\/code> element<\/a> by adding a <strong>subheading<\/strong> for each group.<\/p>\n<h2 id=\"simpler-snapping-for-scrollable-containers\">Simpler Snapping For Scrollable Containers<\/h2>\n<p>Sometimes, you need a quick and easy way to make an element a scrollable container. CSS scroll snap makes it possible. The CSS feature enables us to create a <strong>well-controlled scrolling experience<\/strong> that lets users precisely swipe left and right and snap to a specific item in the container. No JavaScript required.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/ishadeed.com\/article\/css-scroll-snap\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"546\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Simpler Snapping For Scalable Containers\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/snapping-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Have you ever wished there was a CSS feature that makes it easy to create a scrollable container? <a href=\"https:\/\/ishadeed.com\/article\/css-scroll-snap\/\">CSS scroll snap<\/a> is here to help. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/snapping-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Ahmad Shadeed wrote a <a href=\"https:\/\/ishadeed.com\/article\/css-scroll-snap\/\">practical guide<\/a> that walks you step by step through the process of setting up a container with scroll snap. You can use it to create <strong>image galleries<\/strong>, avatar lists, or other components where you want a user to scroll and snap through the content, whether it\u2019s horizontally or vertically.<\/p>\n<h2 id=\"anchor-positioning-for-tooltips-and-popovers\">Anchor Positioning For Tooltips And Popovers<\/h2>\n<p>Whether you use it for footnotes, tooltips, connector lines, visual cross-referencing, or dynamic labels in charts, the CSS Anchor Positioning API enables us to <strong>natively position elements relative to other elements<\/strong>, known as <em>anchors<\/em>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/blog\/anchor-positioning-api\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"449\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Anchor Positioning For Tooltips And Popovers\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/anchor-positioning-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/developer.chrome.com\/blog\/anchor-positioning-api\">CSS Anchor Positioning API<\/a> helps us create layered interfaces without any third-party libraries. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/anchor-positioning-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In her <a href=\"https:\/\/developer.chrome.com\/blog\/anchor-positioning-api\">introduction to the CSS Anchor Positioning API<\/a>, Una Kravets summarized in detail how anchor positioning works. She takes a closer look at the mechanism behind anchor positioning, how to tether to one and <strong>multiple anchors<\/strong>, and how to size and position an anchor-positioned element based on the size of its anchor. Browser support is still limited, so you might want to use the API with some precautions. Una\u2019s guide includes what to watch out for.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"high-definition-colors-with-oklch-and-oklab\">High-Definition Colors With OKLCH And OKLAB<\/h2>\n<p>With high-definition colors with LCH, okLCH, LAB, and okLAB that give us access to <strong>50% more colors<\/strong>, the times of RGB\/HSL might be over soon. To get you familiar with the new color spaces, Vitaly wrote a quick <a href=\"https:\/\/www.linkedin.com\/posts\/vitalyfriedman_colors-design-css-activity-7062428890362699776-LdLe\/\">overview of what you need to know<\/a>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.linkedin.com\/posts\/vitalyfriedman_colors-design-css-activity-7062428890362699776-LdLe\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"631\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"High-Definition Colors With OKLCH And OKLAB\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/color-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The times of RGB\/HSL might be over soon. Say hello to <a href=\"https:\/\/www.linkedin.com\/posts\/vitalyfriedman_colors-design-css-activity-7062428890362699776-LdLe\/\">high-definition colors<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/color-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Both OKLCH and OKLAB are based on human perception and can specify any color the human eye can see. While OKLAB works best for rich gradients, OKLCH is a fantastic fit for color palettes in <strong>design systems<\/strong>. OKLCH\/OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera. Figma doesn\u2019t support them yet.<\/p>\n<h2 id=\"relative-colors-in-css\">Relative Colors In CSS<\/h2>\n<p>Let\u2019s say you have a background color and want to reduce its <strong>luminosity<\/strong> by 25%, or you want to use a complementary color without having to calculate it yourself. The relative color syntax (RCS) makes it possible to create a new color based on a given color.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/smashing-freiburg-2024.netlify.app\/24-relative-color\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"483\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Relative Colors In CSS\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/relative-color.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/smashing-freiburg-2024.netlify.app\/24-relative-color\/\">Relative colors<\/a> allow us to automatically calculate a new color based on an existing color. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/relative-color.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To derive and compute a new color, we can use the <code>from<\/code> keyword for color functions (<code>color()<\/code>, <code>hsl()<\/code>, <code>oklch()<\/code>, etc.) to <strong>modify the values of the input color<\/strong>. Adam Argyle shares some <a href=\"https:\/\/smashing-freiburg-2024.netlify.app\/24-relative-color\/\">code snippets<\/a> of what this looks like in practice, or check the <a href=\"https:\/\/drafts.csswg.org\/css-color-5\/#relative-colors\">spec<\/a> for more details.<\/p>\n<h2 id=\"smooth-transitions-with-the-view-transitions-api\">Smooth Transitions With The View Transitions API<\/h2>\n<p>There are a number of use cases where a smooth visual transition can make the user experience more engaging. When a thumbnail image on a product listing page transitions into a full-size image on the product detail page, for example, or when you have a <strong>fixed navigation bar<\/strong> that stays in place as you navigate from one page to another. The View Transitions API helps us create seamless visual transitions between different views on a site.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/docs\/web-platform\/view-transitions\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"506\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smooth Transitions With The View Transitions API\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/view-transitions-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/developer.chrome.com\/docs\/web-platform\/view-transitions\">View Transitions API<\/a> creates seamless visual transitions between different views. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/view-transitions-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>View transitions can be triggered not only on a single document but also <strong>between two different documents<\/strong>. Both rely on the same principle: The browser takes snapshots of the old and new states, the DOM gets updated while rendering is suppressed, and the transitions are powered by CSS Animations. The only difference lies in how you trigger them, as Bramus Van Damme explains in his <a href=\"https:\/\/developer.chrome.com\/docs\/web-platform\/view-transitions\">guide to the View Transitions API<\/a>. A good <a href=\"https:\/\/www.debugbear.com\/blog\/view-transitions-spa-without-framework\">alternative to single page apps<\/a> that often rely on heavy JavaScript frameworks.<\/p>\n<h2 id=\"exclusive-accordions\">Exclusive Accordions<\/h2>\n<p>The \u2018exclusive accordion\u2019 is a variation of the accordion component. It only allows one disclosure widget to be open at the same time, so when a user opens a new one, the one that is already open will be <strong>closed automatically<\/strong> to save space. Thanks to CSS, we can now create the effect without a single line of JavaScript.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/exclusive-accordion\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"495\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Exclusive Accordions\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/exclusive-accordion-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      An <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/exclusive-accordion\">exclusive accordion<\/a> automatically closes a disclosure widget when a new one is opened. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/exclusive-accordion-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To build an exclusive accordion, we need to add a <code>name<\/code> attribute to the <code>&lt;details&gt;<\/code> elements. When this attribute is used, all <code>&lt;details&gt;<\/code> elements that have the same <code>name<\/code> value form a <strong>semantic group<\/strong> and behave as an exclusive accordion. Bramus Van Damme <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/exclusive-accordion\">summarized in detail how it works<\/a>.<\/p>\n<h2 id=\"live-and-late-validation\">Live And Late Validation<\/h2>\n<p>When we use <code>:valid<\/code> and <code>:invalid<\/code> to apply styling based on a user\u2019s input, there\u2019s a downside: a form control that is <strong>required and empty<\/strong> will match <code>:invalid<\/code> even if a user hasn\u2019t started interacting with it yet. To prevent this from happening, we usually had to write stateful code that keeps track of input a user has changed. But not anymore.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/web.dev\/articles\/user-valid-and-user-invalid-pseudo-classes\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"461\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Live And Late Validation\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/validation-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/web.dev\/articles\/user-valid-and-user-invalid-pseudo-classes\"><code>:user-valid<\/code> and <code>:user-invalid<\/code><\/a> improve the user experience of input validation. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/validation-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>With <code>:user-valid<\/code> and <code>:user-invalid<\/code>, we now have a <a href=\"https:\/\/web.dev\/articles\/user-valid-and-user-invalid-pseudo-classes\">native CSS solution that handles all of this automatically<\/a>. Contrary to <code>:valid<\/code> and <code>:invalid<\/code>, the <code>:user-valid<\/code> and <code>:user-invalid<\/code> pseudo-classes give users feedback about mistakes only <strong>after they have changed the input<\/strong>. <code>:user-valid<\/code> and <code>:user-invalid<\/code> work with input, select, and textarea controls.<\/p>\n<h2 id=\"smooth-scrolling-behavior\">Smooth Scrolling Behavior<\/h2>\n<p>Imagine you have a scrolling box and a series of links that <strong>target an anchored position<\/strong> inside the box. When a user clicks on one of the links, it will take them to the content section inside the scrolling box \u2014 with a rather abrupt jump. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-behavior\"><code>scroll-behavior<\/code> property<\/a> makes the scrolling transition a lot smoother, only with CSS.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-behavior\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"419\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smooth Scrolling Behavior\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/scroll-behavior-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-behavior\"><code>scroll-behavior<\/code><\/a> sets the behavior for a scrolling box when scrolling is triggered by the navigation. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/scroll-behavior-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>When setting the <code>scroll-behavior<\/code> value to <code>smooth<\/code>, the scrolling box will scroll in a <strong>smooth fashion<\/strong> using a user-agent-defined easing function over a user-agent-defined period of time. Of course, you can also use <code>scroll-behavior: auto<\/code>, and the scrolling box will scroll instantly.<\/p>\n<h2 id=\"making-focus-visible\">Making Focus Visible<\/h2>\n<p>Focus styles are essential to help keyboard users navigate a page. However, for mouse users, it can be irritating when a focus ring appears around a button or link as they click on it. <code>:focus-visible<\/code> is here to help us create the best experience for both user groups: It displays <strong>focus styles for keyboard users<\/strong> and hides them for mouse users.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:focus-visible\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"379\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Making Focus Visible\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/focus-visible-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:focus-visible\"><code>:focus-visible<\/code><\/a> shows focus styles only when necessary. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/focus-visible-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><code>:focus-visible<\/code> applies while an element matches the <code>:focus<\/code> pseudo-class and the User Agent determines via <strong>heuristics<\/strong> that the focus should be made visible on the element. Curious how it works in practice? MDN Web Docs highlights the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:focus-visible\">differences between <code>:focus<\/code> and <code>:focus-visible<\/code><\/a>, what you need to consider accessibility-wise, and how to provide a fallback for old browser versions that don\u2019t support <code>:focus-visible<\/code>.<\/p>\n<h2 id=\"styling-parents-based-on-children\">Styling Parents Based On Children<\/h2>\n<p>Historically, CSS selectors have worked in a top-down fashion, allowing us to style a child based on its parent. The new CSS pseudo-class <code>:has<\/code> works the other way round: We can now <strong>style a parent based on its children<\/strong>. But that\u2019s not all yet. Josh W. Comeau wrote a fantastic <a href=\"https:\/\/www.joshwcomeau.com\/css\/has\/\">introduction to <code>:has<\/code><\/a> in which he explores real-world use cases that show what the pseudo-class is capable of.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.joshwcomeau.com\/css\/has\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"546\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Styling Parents Based On Children\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/has-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.joshwcomeau.com\/css\/has\/\"><code>:has<\/code><\/a> makes it possible to style one element based on the property or status of any other element. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/has-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><code>:has<\/code> is not limited to parent-child relationships or direct siblings. Instead, it lets us style one element based on the properties or status of any other element in a totally <strong>different container<\/strong>. And it can be used as a sort of global event listener, as Josh shows \u2014 to disable scrolling on a page when a modal is open or to create a JavaScript-free dark mode toggle, for example.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"interpolate-between-values-for-type-and-spacing\">Interpolate Between Values For Type And Spacing<\/h2>\n<p>CSS comparison functions <code>min()<\/code>, <code>max()<\/code>, and <code>clamp()<\/code> are today supported in all major browsers, providing us with an effective way to create dynamic layouts with <strong>fluid type scales<\/strong>, grids, and spacing systems.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/ishadeed.com\/article\/css-min-max-clamp\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"384\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Interpolate Between Values For Type And Spacing\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/comparison-functions-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The future of design is <a href=\"https:\/\/ishadeed.com\/article\/css-min-max-clamp\/\">fluid<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/comparison-functions-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To get you fit for using the functions in your projects right away, Ahmad Shadeed wrote a <a href=\"https:\/\/ishadeed.com\/article\/css-min-max-clamp\/\">comprehensive guide<\/a> in which he explains everything you need to know about <code>min()<\/code>, <code>max()<\/code>, and <code>clamp()<\/code>, with <strong>practical examples<\/strong> and use cases and including all the points of confusion you might encounter.<\/p>\n<p>If you\u2019re looking for a quick and easy way to create fluid scales, the <a href=\"https:\/\/utopia.fyi\/type\/calculator\/\">Fluid Type Scale Calculator<\/a> by Utopia has got your back. All you need to do is define min and max viewport widths and the number of scale steps, and the <strong>calculator<\/strong> provides you with a responsive preview of the scale and the CSS code snippet.<\/p>\n<h2 id=\"reliable-dialog-and-popover\">Reliable Dialog And Popover<\/h2>\n<p>If you\u2019re looking for a quick way to create a modal or popup, the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/dialog\"><code>&lt;dialog&gt;<\/code> HTML element<\/a> finally offers a native (and accessible!) solution to help you get the job done. It represents a <strong>modal or non-modal dialog box<\/strong> or other interactive component, such as a confirmation prompt or a subwindow used to enter data.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/smashing-freiburg-2024.netlify.app\/27-dialog\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"425\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Reliable dialog And Popover\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/dialog.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      We now have accessible <a href=\"https:\/\/smashing-freiburg-2024.netlify.app\/27-dialog\/\"><code>&lt;dialog&gt;<\/code> menus<\/a> for blocking pop-ups and popovers for non-blocking menus. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/dialog.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>While modal dialog boxes interrupt interaction with a page, non-modal dialog boxes <strong>allow interaction<\/strong> with the page while the dialog is open. Adam Argyle published some <a href=\"https:\/\/smashing-freiburg-2024.netlify.app\/27-dialog\/\">code snippets<\/a> that show how <code>&lt;dialog&gt;<\/code> can block pop-ups and popovers for non-blocking menus, out of the box.<\/p>\n<h2 id=\"responsive-html-video-and-audio\">Responsive HTML Video And Audio<\/h2>\n<p>In 2014, media attribute support for HTML video sources was deleted from the HTML standard. Last year, it made a comeback, which means that we can use <strong>media queries<\/strong> for delivering responsive HTML videos.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/scottjehl.com\/posts\/using-responsive-video\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"468\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Responsive HTML Video And Audio\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/video-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/scottjehl.com\/posts\/using-responsive-video\/\">Adjusting video and audio files based on the browser\u2019s viewport<\/a> reduces page payload. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/video-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Scott Jehl summarized <a href=\"https:\/\/scottjehl.com\/posts\/using-responsive-video\/\">how responsive HTML video \u2014 and even audio \u2014 works<\/a>, what you need to consider when writing the markup, and what other types of media queries can be used in combination with HTML video.<\/p>\n<h2 id=\"the-right-virtual-keyboard-on-mobile\">The Right Virtual Keyboard On Mobile<\/h2>\n<p>It\u2019s a small detail, but one that adds to a well-considered user experience: displaying the <strong>most comfortable touchscreen keyboard<\/strong> to help a user enter their information without having to switch back and forth to insert numbers, punctuation, or special characters like an <code>@<\/code> symbol.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/css-tricks.com\/everything-you-ever-wanted-to-know-about-inputmode\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"271\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Right Virtual Keyboards On Mobile\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/mobile-keyboard-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/css-tricks.com\/everything-you-ever-wanted-to-know-about-inputmode\/\">right virtual keyboard<\/a> improves the user experience for mobile users. (<a href=\"https:\/\/files.smashing.media\/articles\/new-front-end-features-for-designers-in-2025\/mobile-keyboard-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To show the right keyboard layout, we can use <code>inputmode<\/code>. It <a href=\"https:\/\/css-tricks.com\/everything-you-ever-wanted-to-know-about-inputmode\/\">instructs the browser which keyboard to display<\/a> and supports values for <strong>numeric<\/strong>, telephone, decimal, <strong>email<\/strong>, <strong>URL<\/strong>, and search keyboards. To further improve the UX, we can add the <code>enterkeyhint<\/code> attribute: it <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/enterkeyhint\">adjusts the text on the Enter key<\/a>. If no <code>enterkeyhint<\/code> is used, the user agent might use contextual information from the <code>inputmode<\/code> attribute.<\/p>\n<h2 id=\"a-look-into-the-future\">A Look Into The Future<\/h2>\n<p>As we are starting to adopt all of these shiny new front-end features in our projects, the web platform is, of course, constantly evolving \u2014 and there are some exciting things on the horizon already! For example, we are very close to getting <strong>masonry layout<\/strong>, fully <strong>customizable drop-downs<\/strong> with <code>&lt;selectmenu&gt;<\/code>, and <strong>text-box trimming<\/strong> for adjusting fonts to be perfectly aligned within the grid. Kudos to all the wonderful people who are working tirelessly to push the web forward! \ud83d\udc4f<\/p>\n<p>In the meantime, we hope you found something helpful in this post that you can apply to your product or application right away. Happy tinkering!<\/p>\n<h2 id=\"smashing-weekly-newsletter\">Smashing Weekly Newsletter<\/h2>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\"><img decoding=\"async\" loading=\"lazy\" style=\"float:right;margin-top:1em;margin-left:1.5em;margin-bottom:1em;border-radius:11px;max-width:50%\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"200\" alt=\"The weekly Smashing Newsletter\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/smashing-cat\/cat-with-slippers.svg\"><\/a>You want to stay on top of what\u2019s happening in the world of front-end and UX? With our <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\">weekly newsletter<\/a>, we aim to bring you <strong>useful, practical tidbits<\/strong> and share some of the helpful things that folks are working on in the web industry. Every issue is curated, written, and edited with love and care. No third-party mailings or hidden advertising.<\/p>\n<p>Also, when you <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\">subscribe<\/a>, you really help us pay the bills. Thank you for your kind support!<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(vf, il)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>New Front-End Features For Designers In 2025 New Front-End Features [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-295","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":1,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/295\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/295\/revisions\/296"}],"wp:attachment":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/media?parent=295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/categories?post=295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/tags?post=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}