- Advanced scrolling techniques: carousels, scroll affordances, scroll-driven animations.
- Scrollbar demos aligned with box padding.
- Resources: nerdy.dev/cssday-2025
- Talk: A Dao of CSS
- A philosophical journey on the timeless power of CSS and the open web.
- Encouraged devs to embrace the resilience, universality, and grace of the web.
- Quote:
“We lost our way as we envied native apps. The web is more resilient.”
- From SASS to CSS: native nesting, mixins, and @functions
- Upcoming CSS features inspired by Sass (but not exactly Sass).
- Quote:
"If you thought CSS was programming, it still is. If you didn’t, it still isn’t."
- Warning: complexity is moving, not disappearing.
- Creative use of view transitions:
- Smooth filtering transitions: fade-out removed items, auto-reposition remaining ones
- Reusing transition classes across elements
- Pushed CSS-only transitions beyond single-page apps
- Deep dive into customizing select dropdowns
- Add a
buttoninside<select>for styling - Use
anchor-positioningto build radial select menus - Showed
@starting-style,scroll-state(), andappearance: base-select - Memorable demos: dim sum menu, radial buttons, etc.
- Topics covered:
- Multicol, fragmentation
- CSS gap decorations
- Exclusions, Regions
- Why printing from browsers still sucks
- Encouraged devs to share their use cases on csswg-drafts GitHub
- Quote:
“Printing isn't sexy, but it's useful and necessary.”
- Topic: Design Tokens and Design Systems
- Focus on building core reusable UI parts across brands and products.
- Open UI Community Group mentioned as a possible solution for built-in components.
- Emphasis on portability and consistency across multiple platforms.
- Topic: Scope in CSS
- Problem: multiple people using
.cardclass, leading to conflicts. @scopeallows for local scoping of styles within a selector tree.- Tools like CSS Modules (still relevant after 10 years) help add unique hashes to class names.
- Talk on smart layouts:
- Using
anchor-positioningfor tooltips and overlays. - CSS functions like
sibling-count()andsibling-index() - Zones instead of breakpoints: toward intrinsic layout
- Emphasis on layout that reacts to content, not just viewport.
- Styling native form controls like checkboxes:
- Nike replaces
checkboxwithbutton+divfor more control - Warning: using
display: noneon checkbox and styling the label is no longer best practice - New values for
appearance:auto,none,textfield,base-select,primitive, etc. - Showed how
:has()can help style form controls more flexibly
- Talk: Building a Computer with CSS
- Wild demos of logic gates, displays, calculators — all with pure CSS.
- Pushed the boundaries of what's possible without JS.
- Not practical, but an unforgettable showcase of CSS as a creative language.
- Talk: Refactoring CSS
- Tactics for dealing with messy stylesheets and legacy CSS debt.
- Emphasis on commenting intent, small steps, and deleting unused code.
- Made the case for clean, maintainable CSS as a daily practice.
- Talk: display: green; – Applying the Web Sustainability Guidelines
- Discussed carbon footprint of websites and how CSS can help reduce it.
- Introduced concepts like
prefers-reduced-data, asset budgets, and performance as sustainability. - Encouraged a mindset shift toward environmentally conscious development.
- Talk: The goose and the common
- A poetic ode to accessibility and the open web.
- Connected historical common rights with the need to protect the digital commons.
- Argued that inclusive design is a moral and social responsibility.
- “We lost our way as we envied native apps. The web is more resilient.” — John Allsopp
- “deepPink goes harder.” — Miriam Suzanne
- “If you thought CSS was programming, it still is. If you didn’t, it still isn’t.” — Miriam Suzanne
- “Don’t fight the browser — give it constraints and let it do its thing.” — CSS Day ethos
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;@function --rounded(--d) { result: clamp(0px, calc(100vw - var(--d) - 100%) * 9999, var(--border-radius)); }select::picker { background: white; border-radius: 8px; }::view-transition-old(*) { opacity: 0; transform: scale(0.95); }