I was watching this video from the Google IO on all the new web UI features that are coming to the web platform and I was blown away by how many of these features are already available in modern browsers. In this article, I want to highlight 7 of these features that I think are game-changing and that you can start using today (of course, in some of the modern browsers). CSS Text Box CSS Scrollspy Contrast Color The hidey bar using @scroll-state query Gap Decorations The light-dark() function The linear() function CSS Text Box A new property called text-box is coming to the web platforms that…
A look at how a design system shipped major changes without breaking the world. The post Improving site performance by shipping more CSS appeared first on The GitHub Blog.
When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated.
The always-evolving challenges of OLX create a rich environment for innovation, experimentation, and knowledge sharing. In our 2026 Frontend Masterclass, we have three sessions that will shed light on our current development flow.Join us on March 3rd, 2026, from 6:00 pm to 9:00 pm at our OLX Offices in Poznań!Do you want to join us and know what’s trending in the latest frontend technology? Check the event information and join here!Can’t join it in person? Sign in to this form to receive the online recording of the session!Our AgendaWith a broad schedule, our speakers will deliver a mix of…
So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.
When a webpage’s content exceeds the viewport height, browsers typically introduce a vertical scrollbar. This can lead to layout shifts, especially when navigating between pages or toggling content visibility, as the presence or absence of the scrollbar alters the available width for content.
It’s quite a common design requirement to have a border on some states of an element but not others. For example a set of tabs where the currently active tab is highlighted with a top border, or a button where a border is added on hover. The problem is that if you add a border to an element, that changes its size, so if you add a border on one state of a component, then the size will change when the state changes, as you can see from these examples: One simple and elegant solution is to use a transparent border on the other versions of that element, and only change the border colour when the…
Managing z-index is a classic challenge for front-end developers. As a project grows, display conflicts and bugs related to z-index can quickly turn into serious headaches.I recently took some time to clean up the z-indexes in one of our projects.In this article, I’ll share the approach I used for this cleanup (while also laying the foundation for keeping things manageable in the long run).1. Analyzing the existing z-indexesThe first step was to perform a thorough audit of all the z-index declarations in the project. This gave me an overview of how many z-indexes we had and what values were…
Maybe use just a CSS clip-path If you have a simple shape -- like a rectangle or circle -- you can use a simple CSS clip-path attribute. It's fast and easy. But what if you want to create something more complicated like a custom shape, with a bezier curve? clip-path by itself does not handle curves, just fixed points. Curves in SVG Clip Paths SVG to the rescue! SVG has a clipPath element that will help us out. The clipPath element will contain the shapes or paths that you write in SVG crypto codes (not explained here) that create the clipping path shape of your choice. For instance, we could…
CSS Modules are das bombe, but you're still stuck in a land where the traditional CSS stylesheet exists, you may have to load both. Here's a pattern that could potentially work for you. Importing CSS Webpack is a tool for loading many different kinds of assets as modules into JavaScript. This means, for instance, that you can import CSS into your JavaScript. If you import a CSS module in this way, it'll allow you to use that module on a UI component that is built using JavaScript (eg, React): import css from './my-component.css' import React from 'react' const MyComponent = _ => <div…
With few exceptions, it seems that when a developer puts a iframe on his page, he wants it to be seamless on his page. In other words, he doesn't want the viewer to know that it's actually an iframe. To that end, there are a couple of things you can do to make the iframe virtually invisible. The main reason this is such a pain is the main reason for most of the pains in web developer: browsers don't treat things the same way. And specifically, you guessed it, Internet Explorer is very inconsistent compared to the other players. We could do many comparisons on what attributes are needed in…
Optional Google Analytics helps us understand visits. Microsoft Clarity records masked interactions to improve the site. Optional tools stay off unless you choose them. Privacy details.