{"id":1122,"date":"2025-12-09T09:00:00","date_gmt":"2025-12-09T10:00:00","guid":{"rendered":"https:\/\/computercoursesonline.com\/?p=1122"},"modified":"2025-12-11T21:12:32","modified_gmt":"2025-12-11T21:12:32","slug":"state-logic-and-native-power-css-wrapped-2025","status":"publish","type":"post","link":"https:\/\/computercoursesonline.com\/index.php\/2025\/12\/09\/state-logic-and-native-power-css-wrapped-2025\/","title":{"rendered":"State, Logic, And Native Power: CSS Wrapped 2025"},"content":{"rendered":"
State, Logic, And Native Power: CSS Wrapped 2025<\/title><\/p>\n<article>\n<header>\n<h1>State, Logic, And Native Power: CSS Wrapped 2025<\/h1>\n<address>Brecht De Ruyte<\/address>\n<p> 2025-12-09T10:00:00+00:00<br \/>\n 2025-12-11T21:02:30+00:00<br \/>\n <\/header>\n<p>If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for <code>border-radius<\/code> to feel like we were living in the future. We are currently living in a moment where the platform is handing us tools that don\u2019t just tweak the visual layer, but fundamentally redefine how we architect interfaces. I thought the number of features announced in 2024 couldn\u2019t be topped. I\u2019ve never been so happily wrong.<\/p>\n<p>The Chrome team\u2019s \u201c<a href=\"https:\/\/chrome.dev\/css-wrapped-2025\/\"><strong>CSS Wrapped 2025<\/strong><\/a>\u201d is not just a list of features; it is a manifesto for a dynamic, native web. As someone who has spent a couple of years documenting these evolutions — from <a href=\"https:\/\/www.smashingmagazine.com\/2024\/08\/css5-era-evolution\/\">defining \u201cCSS5\u201d eras<\/a> to the intricacies of <a href=\"https:\/\/www.smashingmagazine.com\/2024\/05\/modern-css-layouts-no-framework\/\">modern layout utilities<\/a> — I find myself looking at this year\u2019s wrap-up with a huge sense of excitement. We are seeing a shift towards \u201cOptimized Ergonomics\u201d and \u201cNext-gen interactions\u201d that allow us to stop fighting the code and start sculpting interfaces in their natural state.<\/p>\n<p>In this article, you can find <strong>a comprehensive look at the standout features from Chrome\u2019s report<\/strong>, viewed through the lens of my recent experiments and hopes for the future of the platform.<\/p>\n<h2 id=\"the-component-revolution-finally-a-native-customizable-select\">The Component Revolution: Finally, A Native Customizable Select<\/h2>\n<p>For years, we have relied on heavy JavaScript libraries to style dropdowns, a \u201cdecades-old problem\u201d that the platform has finally solved. As I detailed in <a href=\"https:\/\/utilitybend.com\/blog\/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css\">my deep dive into the history of the customizable select<\/a> (and related articles), this has been a long road involving <a href=\"https:\/\/open-ui.org\/\">Open UI<\/a>, bikeshedding names like <code><selectmenu><\/code> and <code><selectlist><\/code>, and finally landing on a solution that re-uses the existing <code><select><\/code> element.<\/p>\n<p>The introduction of <code>appearance: base-select<\/code> is a strong foundation. It allows us to fully customize the <code><select><\/code> element — including the button and the dropdown list (via <code>::picker(select)<\/code>) — using standard CSS. Crucially, this is built with progressive enhancement in mind. By wrapping our styles in a feature query, we ensure a seamless experience across all browsers.<\/p>\n<p>We can opt in to this new behavior without breaking older browsers:<\/p>\n<pre><code class=\"language-css\">select {\n \/* Opt-in for the new customizable select *\/\n @supports (appearance: base-select) {\n &, &::picker(select) {\n appearance: base-select;\n }\n }\n}\n<\/code><\/pre>\n<p>The fantastic addition to allow rich content inside options, such as images or flags, is a lot of fun. We can create all sorts of selects nowadays:<\/p>\n<ul>\n<li><strong>Demo:<\/strong> I created a <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/ByawgNN\">Pok\u00e9-adventure demo<\/a> showing how the new <code><selectedcontent><\/code> element can clone rich content (like a Pok\u00e9ball icon) from an option directly into the button.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"JoXwwoZ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [A customizable select with images inside of the options and the selectedcontent [forked]](https:\/\/codepen.io\/smashingmag\/pen\/JoXwwoZ) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/JoXwwoZ\">A customizable select with images inside of the options and the selectedcontent [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<ul>\n<li><strong>Demo:<\/strong> A comprehensive look at <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/GgRrLWb\">styling the select with only pseudo-elements<\/a>.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"pvyqqJR\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [A customizable select with only pseudo-elements [forked]](https:\/\/codepen.io\/smashingmag\/pen\/pvyqqJR) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/pvyqqJR\">A customizable select with only pseudo-elements [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<ul>\n<li><strong>Demo:<\/strong> Or you can kick it up a notch with this <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/ByoBMBm\">Menu selection demo using optgroups<\/a>.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"myPaaJZ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [An actual Select Menu with optgroups [forked]](https:\/\/codepen.io\/smashingmag\/pen\/myPaaJZ) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/myPaaJZ\">An actual Select Menu with optgroups [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<p>This feature alone signals a massive shift in how we will build forms, reducing dependencies and technical debt.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design & UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops \u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"scroll-markers-and-the-death-of-the-javascript-carousel\">Scroll Markers And The Death Of The JavaScript Carousel<\/h2>\n<p>Creating carousels has historically been a friction point between developers and clients. Clients love them, developers dread the JavaScript required to make them accessible and performant. The arrival of <code>::scroll-marker<\/code> and <code>::scroll-button()<\/code> pseudo-elements changes this dynamic entirely.<\/p>\n<p>These features allow us to create navigation dots and scroll buttons purely with CSS, linked natively to the scroll container. As I wrote on my blog, this was <a href=\"https:\/\/utilitybend.com\/blog\/love-at-first-slide-creating-a-carousel-purely-out-of-css\">Love at first slide<\/a>. The ability to create a fully functional, accessible slider without a single line of JavaScript is not just convenient; it is a triumph for performance. There are some accessibility concerns around this feature, and even though these are valid, there might be a way for us developers to make it work. The good thing is, all these UI changes are making it a lot easier than custom DOM manipulation and dragging around aria tags, but I digress\u2026<\/p>\n<p>We can now group markers automatically using <code>scroll-marker-group<\/code> and style the buttons using anchor positioning to place them exactly where we want.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.carousel {\n overflow-x: auto;\n scroll-marker-group: after; \/* Creates the container for dots *\/\n\n \/* Create the buttons *\/\n &::scroll-button(inline-end),\n &::scroll-button(inline-start) {\n content: \" \";\n position: absolute;\n \/* Use anchor positioning to center them *\/\n position-anchor: --carousel;\n top: anchor(center);\n }\n\n \/* Create the markers on the children *\/\n div {\n &::scroll-marker {\n content: \" \";\n width: 24px;\n border-radius: 50%;\n cursor: pointer;\n }\n \/* Highlight the active marker *\/\n &::scroll-marker:target-current {\n background: white;\n }\n }\n}\n<\/code><\/pre>\n<\/div>\n<ul>\n<li><strong>Demo:<\/strong> My experiment creating a <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/vEBQxNb\">carousel purely out of HTML and CSS<\/a>, using anchor positioning to place the buttons.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ogxJJjQ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Carousel Pure HTML and CSS [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ogxJJjQ) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ogxJJjQ\">Carousel Pure HTML and CSS [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<ul>\n<li><strong>Demo:<\/strong> A <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/bNbXZWb\">Webshop slick slider remake<\/a> using <code>attr()<\/code> to pull background images dynamically into the markers.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"gbrZZPY\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Webshop slick slider remake in CSS [forked]](https:\/\/codepen.io\/smashingmag\/pen\/gbrZZPY) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/gbrZZPY\">Webshop slick slider remake in CSS [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<h2 id=\"state-queries-sticky-thing-stuck-snappy-thing-snapped\">State Queries: Sticky Thing Stuck? Snappy Thing Snapped?<\/h2>\n<p>For a long time, we have lacked the ability to know if a <a href=\"https:\/\/utilitybend.com\/blog\/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css\">\u201csticky thing is stuck\u201d or if a \u201csnappy item is snapped\u201d<\/a> without relying on IntersectionObserver hacks. Chrome 133 introduced scroll-state queries, allowing us to query these states declaratively.<\/p>\n<p>By setting <code>container-type: scroll-state<\/code>, we can now style children based on whether they are stuck, snapped, or overflowing. This is a massive \u201cquality of life\u201d improvement that I have been eagerly waiting for since CSS Day 2023. It has even evolved a lot since we can also see the direction of the scroll, lovely!<\/p>\n<p>For a simple example: we can finally apply a shadow to a header <em>only<\/em> when it is actually sticking to the top of the viewport:<\/p>\n<pre><code class=\"language-css\">.header-container {\n container-type: scroll-state;\n position: sticky;\n top: 0;\n\n header {\n transition: box-shadow 0.5s ease-out;\n \/* The query checks the state of the container *\/\n @container scroll-state(stuck: top) {\n box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;\n }\n }\n}\n<\/code><\/pre>\n<ul>\n<li><strong>Demo:<\/strong> A <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/XWLQPOe\">sticky header<\/a> that only applies a shadow when it is actually stuck.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"raeooxY\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Sticky headers with scroll-state query, checking if the sticky element is stuck [forked]](https:\/\/codepen.io\/smashingmag\/pen\/raeooxY) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/raeooxY\">Sticky headers with scroll-state query, checking if the sticky element is stuck [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<ul>\n<li><strong>Demo:<\/strong> A <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/MWMZoqp\">Pok\u00e9mon-themed list<\/a> that uses scroll-state queries combined with anchor positioning to move a frame over the currently snapped character.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"vEGvvLM\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Scroll-state query to check which item is snapped with CSS, Pokemon version [forked]](https:\/\/codepen.io\/smashingmag\/pen\/vEGvvLM) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/vEGvvLM\">Scroll-state query to check which item is snapped with CSS, Pokemon version [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"optimized-ergonomics-logic-in-css\">Optimized Ergonomics: Logic In CSS<\/h2>\n<p>The \u201cOptimized Ergonomics\u201d section of CSS Wrapped highlights features that make our workflows more intuitive. Three features stand out as transformative for how we write logic:<\/p>\n<ol>\n<li><strong><code>if()<\/code> Statements<\/strong><br \/>\nWe are finally getting conditionals in CSS. The <code>if()<\/code> function acts like a ternary operator for stylesheets, allowing us to apply values based on media, support, or style queries inline. This reduces the need for verbose <code>@media<\/code> blocks for single property changes.<\/li>\n<li><strong><code>@function<\/code> functions<\/strong><br \/>\nWe can finally move some logic to a different place, resulting in some cleaner files, a real quality of life feature.<\/li>\n<li><strong><code>sibling-index()<\/code> and <code>sibling-count()<\/code><\/strong><br \/>\nThese tree-counting functions solve the issue of staggering animations or styling items based on list size. As I explored in <a href=\"https:\/\/utilitybend.com\/blog\/styling-siblings-with-css-has-never-been-easier-experimenting-with-sibling-count-and-sibling-index\">Styling siblings with CSS has never been easier<\/a>, this eliminates the need to hard-code custom properties (like <code>--index: 1<\/code>) in our HTML.<\/li>\n<\/ol>\n<h3 id=\"example-calculating-layouts\">Example: Calculating Layouts<\/h3>\n<p>We can now write concise mathematical formulas. For example, staggering an animation for cards entering the screen becomes trivial:<\/p>\n<pre><code class=\"language-css\">.card-container > * {\n animation: reveal 0.6s ease-out forwards;\n \/* No more manual --index variables! *\/\n animation-delay: calc(sibling-index() * 0.1s);\n}\n<\/code><\/pre>\n<p>I even experimented with using these functions along with trigonometry to place items in a perfect circle without any JavaScript.<\/p>\n<ul>\n<li><strong>Demo:<\/strong> <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/wBKQPLr\">Staggering card animations dynamically<\/a>.<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"RNaEERz\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Stagger cards using sibling-index() [forked]](https:\/\/codepen.io\/smashingmag\/pen\/RNaEERz) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/RNaEERz\">Stagger cards using sibling-index() [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<ul>\n<li><strong>Demo:<\/strong> Placing items in a <a href=\"https:\/\/codepen.io\/utilitybend\/pen\/VYvVXLN\">perfect circle<\/a> using <code>sibling-index<\/code>, <code>sibling-count<\/code>, and the new CSS <code>@function<\/code> feature.<br \/>\n<\/li>\n<\/ul>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"XJdoojZ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [The circle using sibling-index, sibling-count and functions [forked]](https:\/\/codepen.io\/smashingmag\/pen\/XJdoojZ) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/XJdoojZ\">The circle using sibling-index, sibling-count and functions [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<h2 id=\"my-css-to-do-list-features-i-can-t-wait-to-try\">My CSS To-Do List: Features I Can\u2019t Wait To Try<\/h2>\n<p>While I have been busy sculpting selects and transitions, the \u201cCSS Wrapped 2025\u201d report is packed with other goodies that I haven\u2019t had the chance to fire up in CodePen yet. These are high on my list for my next experiments:<\/p>\n<h3 id=\"anchored-container-queries\">Anchored Container Queries<\/h3>\n<p>I used CSS Anchor Positioning for the buttons in my carousel demo, but \u201cCSS Wrapped\u201d highlights an evolution of this: <strong>Anchored Container Queries<\/strong>. This solves a problem we\u2019ve all had with tooltips: if the browser flips the tooltip from top to bottom because of space constraints, the \u201carrow\u201d often stays pointing the wrong way. With anchored container queries (<code>@container anchored(fallback: flip-block)<\/code>), we can style the element based on which fallback position the browser actually chose.<\/p>\n<h3 id=\"nested-view-transition-groups\">Nested View Transition Groups<\/h3>\n<p>View Transitions have been a revolution, but they came with a specific trade-off: they flattened the element tree, which often broke 3D transforms or overflow: clip. I always had a feeling that it was missing something, and this might just be the answer. By using <code>view-transition-group: nearest<\/code>, we can finally nest transition groups within each other.<\/p>\n<p>This allows us to maintain clipping effects or 3D rotations during a transition — something that was previously impossible because the elements were hoisted up to the top level.<\/p>\n<pre><code class=\"language-css\">.card img {\n view-transition-name: photo;\n view-transition-group: nearest; \/* Keep it nested! *\/\n}\n<\/code><\/pre>\n<h3 id=\"typography-and-shapes\">Typography and Shapes<\/h3>\n<p>Finally, the ergonomist in me is itching to try <strong>Text Box Trim<\/strong>, which promises to remove that annoying extra whitespace above and below text content (the leading) to finally achieve perfect vertical alignment. And for the creative side, <code>corner-shape<\/code> and the <code>shape()<\/code> function are opening up non-rectangular layouts, allowing for \u201csquaricles\u201d and complex paths that respond to CSS variables. That being said, I can\u2019t wait to have a design full of squircles!<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"a-hopeful-future\">A Hopeful Future<\/h2>\n<p>We are witnessing a world where <strong>CSS is becoming capable of handling logic, state, and complex interactions that previously belonged to JavaScript<\/strong>. Features like <code>moveBefore<\/code> (preserving DOM state for iframes\/videos) and <code>attr()<\/code> (using types beyond strings for colors and grids) further cement this reality.<\/p>\n<p>While some of these features are currently experimental or specific to Chrome, the momentum is undeniable. We must hope for continued support across all browsers through initiatives like Interop to ensure these capabilities become the baseline. That being said, having browser engines is just as important as having all these awesome features in \u201cChrome first\u201d. These new features need to be discussed, tinkered with, and tested before ever landing in browsers.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aIt%20is%20a%20fantastic%20moment%20to%20get%20into%20CSS.%20We%20are%20no%20longer%20just%20styling%20documents;%20we%20are%20crafting%20dynamic,%20ergonomic,%20and%20robust%20applications%20with%20a%20native%20toolkit%20that%20is%20more%20powerful%20than%20ever.%0a&url=https:\/\/smashingmagazine.com%2f2025%2f12%2fstate-logic-native-power-css-wrapped-2025%2f\"><\/p>\n<p>It is a fantastic moment to get into CSS. We are no longer just styling documents; we are crafting dynamic, ergonomic, and robust applications with a native toolkit that is more powerful than ever.<\/p>\n<p> <\/a>\n <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>Let\u2019s get going with this new era and spread the word.<\/p>\n<p>This is <a href=\"https:\/\/chrome.dev\/css-wrapped-2025\/\">CSS Wrapped<\/a>!<\/p>\n<div class=\"signature\">\n <img 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>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>State, Logic, And Native Power: CSS Wrapped 2025 State, Logic, And Native Power: CSS Wrapped 2025 Brecht De Ruyte 2025-12-09T10:00:00+00:00 2025-12-11T21:02:30+00:00 If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for border-radius to feel like we were living in the future. We are currently…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1122"}],"collection":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=1122"}],"version-history":[{"count":1,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1122\/revisions"}],"predecessor-version":[{"id":1123,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1122\/revisions\/1123"}],"wp:attachment":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=1122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=1122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=1122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}