Interop 2025 - Which browser features to get acquainted with this year and why you should care It’s been a few years since the Interop initiative was set in play. This has historically been one of the key elements in moving the web forward as it aims for a consistent web between browser vendors. In contrast to the “old days browser wars”, we as developers get streamlined features without having to check everything in every browser. The features of Interop 2025 are now known, features to be made stable across browsers by the end of the year. In this article, we’ll take a look at what we should get acquainted with in 2025. Published onMarch 28, 2025frontendcssjsBrecht De RuyteFrontend Developer / DevRelRead more
This was CSS Day 2024 - the 10th edition Another year, another CSS Day. I’m always happy to return to Amsterdam for this occasion, It’s one of the things I look forward to every year. So naturally, I’m happy that iO still allowed me to go there with my training budget, and the least I could do, is write a summary of this event on the tech_hub. Published onJune 27, 2024frontendcsseventsconferenceBrecht De RuyteFrontend Developer / DevRelRead more
Going beyond pixels and (r)ems in CSS - Absolute length units Oh my, usually when writing a series like this, people tend to leave the best for last, but in this case, it seems that the best is behind us. But as I am a completionist, this last part of the CSS Units series will be about absolute units, the units you mostly - absolutely - want to avoid. But can help in certain cases. Published onMarch 22, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Going beyond pixels and (r)ems in CSS - Container query length units In the third part of this series, we’ll look at length units based on the container. Yes, you heard that right, we can finally get some measurements based on a containing element and that just spells awesome in my book. Currently available in all evergreen browsers, these units open up a lot of opportunities to create some smart systems and once again, I will write this up packed with a bunch of demos and cool use cases. Published onFebruary 28, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport In this second part of the series, let’s talk about units based on the viewport also known as "the viewport-percentage length units". A lot of developers know these, but they can create some unexpected behavior, especially in combination with scrollbars and mobile behavior. Based on some articles and videos I picked up on the web from time to time, I'd like to explain some of the common pitfalls when using viewport units. Published onFebruary 8, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Your user doesn’t prefer your design As developers and designers, we make a plethora of design decisions while building a website. We try to cater to everybody, but that is an impossible task. So how can we listen to some of the preferences of our users? Published onFebruary 1, 2024cssfrontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Going beyond pixels and (r)ems in CSS - Relative length units based on font There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples of where they could come in handy. I will create a mini-series out of this and for the first part, let’s start off with relative length units based on font. Published onJanuary 30, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
CSS Relative colors Before the relative color syntax you had to rely on CSS variables or even worse: JavaScript to modify the parameters of a color. Using the from keyword the browser can convert the originating color to different color spaces and change the color properties. Published onDecember 1, 2023frontendCSSLucien ImminkSoftware Architect & Developer AdvocateRead more
Coven of Wisdom - EHV - CSS edition On October 26th, the Coven of Wisdom held its CSS meetup in Eindhoven. To really allow going deep on CSS and Web UIs, we invited 2 heavy hitters regarding these domains, Brecht De Ruyte en Hidde de Vries. Published onOctober 27, 2023frontendcsscoven-of-wisdomMaarten Van HoofDeveloper Advocate & FrontendRead more
Make awesome animated interactions with two lines of code Transform your web app with two lines of code – create seamless animated interactions using the View Transitions API. Published onOctober 18, 2023frontendcssDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
TIL: The CSS order Property Requires Each Grid/Flex Item to be ordered To use order on one element means using order on each of its siblings, too. Published onSeptember 12, 2023cssflexgridRemy ParzinskiFront-end DeveloperRead more
Consistent CSS spacing is hard, but it does not have to be Two simple guidelines is all it takes to prevent rampant spacing issues from turning your expertly crafted project into an endless game of whack-a-mole. Published onAugust 15, 2023frontendcssNiels MatthijsFrontend DeveloperRead more
Tailwind for productivity In general, developers don't find writing CSS the most fun part of software development. Although, in my opinion, Tailwind CSS makes it fun and efficient! Published onJuly 13, 2023TailwindCSSFrontendProductivityDXRonny RookFront-end DeveloperRead more
White labeling in a front-end monorepo: The do's and don'ts. Defining a good structure for your theme, components, and files is key to maintaining code for multiple brands. If you're coding multiple applications within one shared codebase, these guidelines will help you out. Published onJuly 3, 2023FrontendCSSMonorepoDesign-systemWhite-labelingFrontend-ArchitectureZakaria TaissateFull-stack Software Engineer & Team CaptainRead more
Going beyond constants with custom properties If you love CSS, you’ve probably heard of custom properties (a.k.a. CSS variables) before. Still, a lot of people seem to use them as constants for their CSS. In this article, I will try to give you some more insights on how you can use these custom properties to create some smart systems or even use them as booleans in CSS and create easy progressive enhancements. Published onJune 26, 2023frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Why you should be using new CSS features today - part 2 In the previous part of this article, I tried to tickle your brain a bit to unleash your curiosity and drive your determination to try some new CSS features today. That's exactly what I'll be doing in this part, writing some new stuff today so you can slowly polish new CSS skills very sneaky and hidden in the code, like a ninja. Published onDecember 5, 2022frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Why you should be using new CSS features today - part 1 Unless you have no affinity with CSS at all or have been living under a rock for the last year, you should have noticed that new CSS features are skyrocketing like never before. Although this is a good thing, it might get frustrating to get a grasp on all these new playthings because every time you add something new in your styling toolbox, the next best thing is just around the corner. Published onNovember 30, 2022frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
You need CSS Cascade Layers Let’s have a look at how you can better structure your CSS layers with CSS Cascade Layers! Published onNovember 15, 2022frontendcssDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Practical uses of the :has() relational pseudo class The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today. Published onOctober 27, 2022frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
CSS Day 2022: A small recap After a long break because of Covid-19, CSS Day is back. In a new location at the Zuiderkerk in Amsterdam. Once again trying to create the perfect line-up for everything design and CSS, and boy, they delivered just that. Published onJuly 8, 2022frontendcssconferenceBrecht De RuyteFrontend Developer / DevRelRead more
The future of page transitions with Shared Element Transitions The Shared Element Transitions API allows creating page transitions using a browser API that can provide users with a better visual connection between page-a and page-b by transitioning shared elements on both pages. Published onJune 23, 2022frontendcssjsMilan VogelsFrontend DeveloperRead more
Container Queries, the next step towards a truly modular CSS Container queries enables encapsulation of adaptive styling based on the size, style or state of a parent element. This allows responsive component-based architectures, like design systems and component libraries, to provide the most optimal responsive styling within a component itself. Published onJune 15, 2022frontendcssMaarten Van HoofDeveloper Advocate & FrontendRead more
Using best practices to create CSS scroll snapping tabs How should scroll snapping tabs behave when using keys? By reading some best practices, I believe I found an elegant solution. Published onMarch 31, 2022frontendcssa11yBrecht De RuyteFrontend Developer / DevRelRead more