{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreig2xgttkynalk2wok7hqsofnyfw5wphwhpvsrkn3tpl3fqfexn3cq",
    "uri": "at://did:plc:2mg4c2y4wiwzddlc5tjat7oc/app.bsky.feed.post/3mkevrfi7dzf2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreiaybdhoubsbdwmvswiliktoqfoqv4xounnzthcnlsr5hnluiz5iii"
    },
    "mimeType": "image/jpeg",
    "size": 67609
  },
  "path": "/CSS-recently-in-all-browsers?utm_source=rss",
  "publishedAt": "2026-04-26T01:32:25.000Z",
  "site": "https://nerdy.dev",
  "tags": [
    "blog",
    "css",
    "Tab's",
    "Anchor Positioning",
    "CSS Day 2025",
    "@scope",
    "\"donut\"",
    "Scope In CSS",
    "@container",
    "26.4",
    "Chris",
    "FrontEnd Masters",
    "Temani",
    "\"complex\" post CSS-Tricks",
    "xywh()",
    "rect()",
    "Chrome 150 (soon)",
    "pretext",
    "view-transition-class",
    "JS View Transition Types"
  ],
  "textContent": "Here's some rad CSS that just hit baseline between October 2025 - April 2026.\n\nAt this point with the following features, the \"I can't use it\" vibe can shed away.\n\n##  Anchor Positioning #\n\nAnchor positioning lets you natively tether components to target elements without adjusting DOM semantics or crowding the main thread.\n\nThis widget doesn't show green across the board as of writing this, there are sub features that aren't all supported, but the general featureset is ready.\n\nCheckout Tab's talk about `anchor` called \nAnchor Positioning at CSS Day 2025.\n\nCheckout my post on AIM if you missed it, neat anchor technique for FLIP-like transitions with anchor.\n\n##  @scope #\n\nCSS **selector** scoping, not _style_ scoping; a common misconception.\n\nHowever! With @scope we can simplify naming conventions or robobarf classnames just to avoid global cascade collisions.\n\nThe \"donut\" feature is very special, it can limit styles from cascading into nested components by setting an end to the selector (a donut hole 🍩).\n\nChris gave a talk about `@scope` called Scope In CSS at CSS Day 2025.\n\n##  Name Only Container Queries #\n\n@container no longer requires a size condition.\n\nYou can now conditionally style elements just by name:\n\n\n    .sidebar {\n      container-name: sidebar;\n    }\n\n    .card {\n      display: grid;\n\n      @container sidebar {\n        grid-auto-flow: column;\n      }\n    }\n\n`\n\n  * Chrome 149\n  * Safari 26.4\n  * Firefox 148\n\n\n\nChris wrote a good post about it over on FrontEnd Masters.\n\n##  shape() #\n\nResponsive, native CSS geometry.\n\nDraw complex clipping paths using standard CSS syntax and dynamic units (like `rem` or `calc()`) instead of being locked into rigid SVG pixel coordinates.\n\nTemani wrote a rad post about it over on FrontEnd Masters and a \"complex\" post CSS-Tricks.\n\n##  shape-outside with xywh() and rect() #\n\nWrap inline text around precise geometric boundaries with xywh() and rect().\n\nTypographical control over floating text flows without relying on images or clip-paths.\n\n  * Chrome 150 (soon)\n  * Safari 18\n  * Firefox 149\n\n\n\nStill no pretext, but also still coo.\n\n##  view-transition-class and Types #\n\nSPA-like routing animations.\n\nWith view-transition-class you can target massive collections of DOM nodes with a single animation rule, while JS View Transition Types let you programmatically direct \"forward\" or \"backward\" contextual motion.\n\n##  rcap, rch, rex, ric #\n\nEven more typographic precision.\n\nI wrote about these here.",
  "title": "CSS Recently In All Browsers"
}