--- title: Do It With Style: Rethinking CSS - Dylan Beattie - NDC... description: This NDC Oslo talk by Dylan Beattie argues CSS deserves a second look because modern browsers now handle things once requiring JavaScript. He demos building an... canonical: https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Do It With Style: Rethinking CSS - Dylan Beattie - NDC Oslo 2026 | daily.dev og:description: This NDC Oslo talk by Dylan Beattie argues CSS deserves a second look because modern browsers now handle things once requiring JavaScript. He demos building an... og:url: https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2 og:image: https://api.daily.dev/og/posts/EZQtT61T2.png og:image:alt: Do It With Style: Rethinking CSS - Dylan Beattie - NDC Oslo 2026 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. # Do It With Style: Rethinking CSS - Dylan Beattie - NDC Oslo 2026 **[NDC Conferences](https://daily.dev/sources/ndc)** · 60 min read · 2 upvotes · 0 comments ## Summary This NDC Oslo talk by Dylan Beattie argues CSS deserves a second look because modern browsers now handle things once requiring JavaScript. He demos building an accordion with native HTML 'details' and 'summary' elements, including mutually exclusive accordions (baseline since 2024) and smooth height animations using 'interpolate-size: allow-keywords' and 'transition-behavior: allow-discrete'. He covers modern color syntax like OKLCH and CSS variables for procedural color palettes, and styling native select dropdowns, though Safari and Firefox don't support dropdown styling yet. He notes 'interpolate-size' still lacks Firefox and Safari support, and traces how web color names originated from a 1970s paint catalog digitized into Netscape's RGB.ext file. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### how do I animate an accordion's height from auto in CSS without JavaScript Use the 'interpolate-size: allow-keywords' property on the root element combined with a transition on height going to 'auto', plus 'transition-behavior: allow-discrete' so the collapsing animation plays before the element disappears. This fixed a long-standing browser limitation where height could not interpolate to or from an unknown 'auto' value, resolved after roughly nine years of discussion in a Google issue. _Developers building these effects can track browser support changes like this one on daily.dev before shipping._ ### can I create mutually exclusive accordions using only HTML details and summary elements Yes, giving multiple 'details' elements the same 'name' attribute makes them mutually exclusive, so opening one closes the others. This behavior reached baseline support only around 2024, about two years before being considered production-ready, even though the 'details' and 'summary' elements themselves have existed in browsers since roughly 2012. _Anyone picking UI patterns can follow baseline support updates like this on daily.dev before committing._ ### why can't I style HTML select dropdown lists with CSS Dropdown lists historically were rendered by the operating system rather than the browser, going back to Windows 3.1 and Windows 95, so the browser could not apply styles to them. New syntax now lets developers opt in with 'appearance' and style the picker, option, and checkmark pseudo-elements, but as of this discussion Safari and Firefox still lack support for styling select lists. _Teams deciding when to adopt new CSS styling capabilities can watch cross-browser support on daily.dev._ ## Similar posts on daily.dev - [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 - [This was CSS Day 2026 - a dive in CSS geekism](https://daily.dev/posts/this-was-css-day-2026---a-dive-in-css-geekism-ad462ribm) · iO tech\_hub · 23 upvotes · 0 comments - [The Future of CSS ✨ • Josh W. Comeau](https://daily.dev/posts/the-future-of-css-josh-w-comeau-tim2jg6fu) · Josh W Comeau · 91 upvotes · 1 comments - [Wanna see a CSS magic trick?](https://daily.dev/posts/wanna-see-a-css-magic-trick--wta2tfzuo) · Stack Overflow Blog · 76 upvotes · 4 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#web-animation](https://daily.dev/tags/web-animation) [View this post on daily.dev](https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2) ```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":"Do It With Style: Rethinking CSS - Dylan Beattie - NDC Oslo 2026","url":"https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2"},"datePublished":"2026-11-03T10:44:49.400Z","dateModified":"2026-11-03T10:45:22.540Z","description":"This NDC Oslo talk by Dylan Beattie argues CSS deserves a second look because modern browsers now handle things once requiring JavaScript. He demos building an...","image":"https://i.ytimg.com/vi/W7FApS-s_L8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/W7FApS-s_L8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"NDC Conferences","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":"Organization","name":"NDC Conferences","logo":"https://media.daily.dev/image/upload/s--SiIyojEj--/f_auto/v1748760369/logos/ndc","url":"https://daily.dev/sources/ndc"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,html,web-animation","timeRequired":"PT60M","video":{"@type":"VideoObject","name":"Do It With Style: Rethinking CSS - Dylan Beattie - NDC Oslo 2026","description":"This NDC Oslo talk by Dylan Beattie argues CSS deserves a second look because modern browsers now handle things once requiring JavaScript. He demos building an...","thumbnailUrl":"https://i.ytimg.com/vi/W7FApS-s_L8/sddefault.jpg","uploadDate":"2026-11-03T10:44:49.400Z","duration":"PT60M","url":"https://api.daily.dev/r/EZQtT61T2","embedUrl":"https://www.youtube.com/embed/W7FApS-s_L8"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"NDC Conferences","item":"https://daily.dev/sources/ndc"},{"@type":"ListItem","position":3,"name":"Do It With Style: Rethinking CSS - Dylan Beattie - NDC Oslo 2026"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/do-it-with-style-rethinking-css---dylan-beattie---ndc-oslo-2026-ezqtt61t2#faq","mainEntity":[{"@type":"Question","name":"how do I animate an accordion's height from auto in CSS without JavaScript","acceptedAnswer":{"@type":"Answer","text":"Use the 'interpolate-size: allow-keywords' property on the root element combined with a transition on height going to 'auto', plus 'transition-behavior: allow-discrete' so the collapsing animation plays before the element disappears. This fixed a long-standing browser limitation where height could not interpolate to or from an unknown 'auto' value, resolved after roughly nine years of discussion in a Google issue. Developers building these effects can track browser support changes like this one on daily.dev before shipping."}},{"@type":"Question","name":"can I create mutually exclusive accordions using only HTML details and summary elements","acceptedAnswer":{"@type":"Answer","text":"Yes, giving multiple 'details' elements the same 'name' attribute makes them mutually exclusive, so opening one closes the others. This behavior reached baseline support only around 2024, about two years before being considered production-ready, even though the 'details' and 'summary' elements themselves have existed in browsers since roughly 2012. Anyone picking UI patterns can follow baseline support updates like this on daily.dev before committing."}},{"@type":"Question","name":"why can't I style HTML select dropdown lists with CSS","acceptedAnswer":{"@type":"Answer","text":"Dropdown lists historically were rendered by the operating system rather than the browser, going back to Windows 3.1 and Windows 95, so the browser could not apply styles to them. New syntax now lets developers opt in with 'appearance' and style the picker, option, and checkmark pseudo-elements, but as of this discussion Safari and Firefox still lack support for styling select lists. Teams deciding when to adopt new CSS styling capabilities can watch cross-browser support on daily.dev."}}]} ```