--- title: Modern CSS in 2026: Delete the JavaScript | daily.dev description: Modern CSS in 2026 has reached a point where many JavaScript patterns for UI behavior can be deleted entirely. Key features covered include: `:has()` (100%... canonical: https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Modern CSS in 2026: Delete the JavaScript | daily.dev og:description: Modern CSS in 2026 has reached a point where many JavaScript patterns for UI behavior can be deleted entirely. Key features covered include: `:has()` (100%... og:url: https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98 og:image: https://api.daily.dev/og/posts/7te0CFx98.png og:image:alt: Modern CSS in 2026: Delete the JavaScript og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Modern CSS in 2026: Delete the JavaScript **[Alex CloudStar](https://daily.dev/sources/alexcloudstar)** · [@alexcloudstar](https://daily.dev/alexcloudstar) · 13 min read · 25 upvotes · 3 comments ## Summary Modern CSS in 2026 has reached a point where many JavaScript patterns for UI behavior can be deleted entirely. Key features covered include: `:has()` (100% browser support) replacing DOM observation and class-toggling; container queries (~92% support) enabling truly portable component-level responsive design; the View Transitions API for smooth same-document animations without JS libraries; CSS Anchor Positioning for tooltip/popover geometry without dependencies (still needs fallbacks); and scroll-driven animations that run off the main thread with no scroll listeners. Smaller quality-of-life additions like native nesting, cascade layers, `@scope`, `oklch()`, `text-wrap`, and `field-sizing` further reduce reliance on preprocessors and JavaScript. A practical adoption tier is provided: ship `:has()`, container queries, and nesting today; use view transitions and scroll animations as progressive enhancement; and use `@supports` fallbacks for anchor positioning and cross-document transitions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Is the CSS :has() selector safe to use in production without a JavaScript fallback? Yes, :has() has 100 percent support across all major browsers, making it safe to use in production without a fallback. It functions as a parent selector, letting you style an element based on its descendants, such as form:has(:invalid) to style a form when any field is invalid, replacing JavaScript that previously listened for input events and toggled classes manually. _Developers weighing which CSS features are safe to ship track browser support changes like this on daily.dev._ ### What is the difference in browser support between same-document and cross-document view transitions? Same-document view transitions, which animate between UI state changes within a single page, reached Baseline and are safe to ship now. Cross-document view transitions, which animate between full page navigations in a multi-page site, are newer with browsers still landing consistent implementations, so they should be treated as progressive enhancement rather than a guaranteed feature. _Anyone deciding when to adopt view transitions can follow support milestones like this on daily.dev._ ### Is CSS anchor positioning ready to use without a fallback? No, CSS anchor positioning shipped in Chromium first and browser support remains uneven, so it is not at the safe-everywhere level of features like :has() or container queries. A sensible fallback is needed for unsupported browsers, typically implemented with an @supports (anchor-name: --x) feature query wrapping a manually positioned fallback. _Teams deciding whether to adopt anchor positioning now can track browser support shifts on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@theosoti** · 1 upvotes > Yes exactly, modern CSS is amazing at replacing Javascript. > I even wrote a book on this subject: [https://theosoti.com/you-dont-need-js/](https://theosoti.com/you-dont-need-js/) **@agustinbarrientos** · 0 upvotes > Keep the `@supports` fallback for anchor positioning and delete the other JavaScript. ## Similar posts on daily.dev - [Stop Using JS for Everything: Harnessing the Power of Pure CSS in 2026](https://daily.dev/posts/stop-using-js-for-everything-harnessing-the-power-of-pure-css-in-2026-jql9shws1) · Ruby Flow · 6 upvotes · 0 comments - [CSS in 2026: The new features reshaping frontend development](https://daily.dev/posts/css-in-2026-the-new-features-reshaping-frontend-development-rhaxhc6ob) · LogRocket · 7 upvotes · 0 comments - [CSS Features That Are Safe to Ship Without a Fallback](https://daily.dev/posts/css-features-that-are-safe-to-ship-without-a-fallback-4qejdvj37) · Medium · 1 upvotes · 0 comments - [CSS Recently In All Browsers · April 26, 2026](https://daily.dev/posts/css-recently-in-all-browsers-april-26-2026-kepfatjko) · Adam Argyle · 57 upvotes · 4 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#view-transitions](https://daily.dev/tags/view-transitions) [View this post on daily.dev](https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Modern CSS in 2026: Delete the JavaScript","url":"https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98"},"datePublished":"2026-07-09T07:49:49.438Z","dateModified":"2026-09-14T07:00:22.599Z","description":"Modern CSS in 2026 has reached a point where many JavaScript patterns for UI behavior can be deleted entirely. Key features covered include: `:has()` (100%...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ea68f1a17996febc0be17840afe57072?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ea68f1a17996febc0be17840afe57072?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Alex CloudStar","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Alex Cloudstar","url":"https://daily.dev/alexcloudstar","image":"https://media.daily.dev/image/upload/s--xA-1aKK7--/f_auto/v1767564650/avatars/avatar_ZUjetzkwG7V5behQOpH0X?_a=BAMAK+ZW0","description":"Hi there! 👋🏻 I'm a Senior Full-Stack Developer oriented on Javascript","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":990}},"commentCount":3,"discussionUrl":"https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":25},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"javascript,css,view-transitions","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Alex CloudStar","item":"https://daily.dev/sources/alexcloudstar"},{"@type":"ListItem","position":3,"name":"Modern CSS in 2026: Delete the JavaScript"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98","comment":[{"@type":"Comment","text":"Yes exactly, modern CSS is amazing at replacing Javascript.\nI even wrote a book on this subject: https://theosoti.com/you-dont-need-js/","datePublished":"2026-07-13T10:33:56.036Z","url":"https://daily.dev/posts/7te0CFx98#c-f58C03IJy","author":{"@type":"Person","name":"Theo Soti","url":"https://daily.dev/theosoti","image":"https://lh3.googleusercontent.com/a/ACg8ocILhfTM6-ti-OI4-YY2zEzjSYtSuzmmgyZuf4FJQZmlnNkEfCV4=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Keep the @supports fallback for anchor positioning and delete the other JavaScript.","datePublished":"2026-08-01T20:32:54.691Z","url":"https://daily.dev/posts/7te0CFx98#c-bg14iRDbG","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/modern-css-in-2026-delete-the-javascript-7te0cfx98#faq","mainEntity":[{"@type":"Question","name":"Is the CSS :has() selector safe to use in production without a JavaScript fallback?","acceptedAnswer":{"@type":"Answer","text":"Yes, :has() has 100 percent support across all major browsers, making it safe to use in production without a fallback. It functions as a parent selector, letting you style an element based on its descendants, such as form:has(:invalid) to style a form when any field is invalid, replacing JavaScript that previously listened for input events and toggled classes manually. Developers weighing which CSS features are safe to ship track browser support changes like this on daily.dev."}},{"@type":"Question","name":"What is the difference in browser support between same-document and cross-document view transitions?","acceptedAnswer":{"@type":"Answer","text":"Same-document view transitions, which animate between UI state changes within a single page, reached Baseline and are safe to ship now. Cross-document view transitions, which animate between full page navigations in a multi-page site, are newer with browsers still landing consistent implementations, so they should be treated as progressive enhancement rather than a guaranteed feature. Anyone deciding when to adopt view transitions can follow support milestones like this on daily.dev."}},{"@type":"Question","name":"Is CSS anchor positioning ready to use without a fallback?","acceptedAnswer":{"@type":"Answer","text":"No, CSS anchor positioning shipped in Chromium first and browser support remains uneven, so it is not at the safe-everywhere level of features like :has() or container queries. A sensible fallback is needed for unsupported browsers, typically implemented with an @supports (anchor-name: --x) feature query wrapping a manually positioned fallback. Teams deciding whether to adopt anchor positioning now can track browser support shifts on daily.dev."}}]} ```