avatar

Brecht De Ruyte

Software Engineer / Google Developer Expert / DevRel

Articles by Brecht De Ruyte

Talks by Brecht De Ruyte

  • CSS State Machine

    For years, managing UI state on the web usually meant reaching for JavaScript. But CSS has quietly become a state machine of its own. Pseudo-classes track interaction. Media queries read the environment and user preferences. :has() observes the DOM tree. Container queries respond to size, style, scroll position, and even anchor placement. Scroll-driven and scroll-triggered animations react to where the user is on the page. And with sibling state, CSS can now respond to what's happening next door. A practical tour of the CSS features that let you keep and respond to state — from things you can ship today to the cutting-edge stuff landing in browsers right now.

  • Engineering CSS - From type to function

    Is CSS a programming language? And if so, how do you program in it? Learn how to create solid engineered systems in CSS — from 4 fully styled buttons in just 22 lines of code, to flexible adaptive grids. Dive into @property for upgraded debugging and animation skills, and finish with a glimpse at newly adopted CSSWG features such as functions, mixins, and conditionals.

  • I can has() timeline UI?

    In this fast-paced presentation packed with demos, We will be taking a bit of a deeper dive into the has() relational pseudo class, moving on to animating things based on scroll with animation-timeline and finally ending with a short introduction on Open-ui and the anchoring API.

  • Pop it, Invoke it, Select it

    How do you create UI elements that are controllable, accessible, and styleable? What about performance? With the work being done at Open UI, we are getting many new web standards — popovers, invokers, customizable select elements, and more. A practical walk-through of easy wins by relying on web standards, with background on Open UI and new CSS features such as anchor positioning and interest-delay. Packed with practical examples and some over-the-top eye-candy to back it up.

  • Select it! - Styling new HTML UI capabilities

    We are getting spoiled with increased UI capabilities, partially thanks to the efforts from the W3C community group Open UI. One of those features is the customizable select, which loves new CSS features — and that love is mutual. A love letter to W3C community groups, new UI capabilities, and CSS, showing how to combine anchor positioning, CSS transitions, scroll snapping, scroll-markers, :has() and much more to create fun, progressively enhanced, customized select elements.

  • The future of UI is "open"

    When dealing with more advanced UI elements there are a lot of things that go wrong. They impact performance, accessibility and have the tendency to create frustrations along the way. In this talk, I will be introducing you to the W3C community around Open UI, while also taking a little detour with the Anchoring API. By combining these future specs we'll take a peek at the future of styling custom UI by only using HTML and CSS, giving you less frustration, performance boosts and basic accessibility out of the box.

Workshops by Brecht De Ruyte

  • What's new in webUI? The workshop!

    How do you create UI elements that are controllable, accessible, and styleable? With the work being done at Open UI, we are introducing many new web standards — popovers, invokers, customizable select elements, and more. A hands-on workshop covering how to achieve easy wins by relying on web standards, with new CSS features such as anchor positioning, @starting-style, and interpolate-size. By the end, you will know new HTML and CSS standards, with sometimes a touch of JS, giving you practical wins for your current and next projects.