はてなブックマーク

CapUnitA look at how I solved a design problem with CSS cap unit. Introduction While I was working on a recent article on the gap property, I needed to place a box between two words and keep it aligned. I thought about a way to size the box to be equal to the capital letter height. After some research, I found the cap unit and it worked as expected. In this article, I will demonstrate the problem

CSS :has() Interactive GuideAn extensive guide to CSS :has() selector. Intro We always wanted a way in CSS to style an element based on its descendants. It wasn’t possible until CSS :has() became supported in all major browsers. In this article, I will explore the problem and shed the light on some of the interesting use cases for CSS :has(). The problem Say we have a <figure> and we want to style

Intro As a user, you need to interact with clickable UI elements like buttons, links, cards, and more. If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake. Let’s take a look at the following example.

A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more. Photoshop was the first professional design app that I learned when I was 14 years old. It was one of the reasons that I became a designer, and eventually a front-end developer. Because of that, I thought it would be interesting to see how

In this new article about my rebuilding a layout, I’m exploring TechCrunch. I had a quick look at it and thought it would be interesting to dive in and see how modern CSS can make things better. First, I will analyze the layout and think aloud with you about the decisions that the team made. Once that is finished, it will be the time to dive in and share my thoughts and ideas on how to approach th

When I encounter a new product, one of the first things that comes to mind is how they implemented the CSS. This was no different when I came across Threads by Meta. I quickly explored the mobile app and noticed that I could preview public posts on the web. This presented an opportunity for me to dig deeper. I came across a few interesting findings, which I will discuss in this article. Let’s dive

Wait, what? Yes, you heard that right. The Chromium team is experimenting with a new type of query, which is called State Query. Last year, size container queries got supported in all major browsers. They let us query a container based on its width. .card-wrapper { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: flex; align-items: center;

As a part of my curious UI inspection, I thought about why not to look at popular websites and see how they implemented the comment component layout. At first, I thought this will be an easy task, but it wasn’t. I spent a lot of time trying to understand how this works and how we can do it better with modern CSS like :has, size container queries, and style queries. In this article, I will walk you

Looking at a layout at first glance might imply that it’s easy and straightforward to build. The moment you start building the initial layout, you will face challenges that you didn’t think about in your initial look at the design. In this article, I will rethink how to build the featured news section on Vox.com and try to see if modern CSS will be helpful or not. For example, do we need to use co

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI. Such a thing can make the UI you’re working on feels unbalanced, or missing something. Here is what I mean: The highlighted word is a single word that lives on its line

In the design world, masking is a popular technique to achieve unique design effects. As a designer, I’ve used it many times, but my usage of it on the web is rare. I think that the reason that kept me from not using a CSS mask is the browser support, they are partially supported in blink browsers (Chrome and Edge) and fully supported in Safari and Firefox. The great news is that CSS masking will

When you think about building fluid layouts these days isn’t about having fixed-width breakpoints anymore. Instead, the layouts we build today need to work on nearly any device size. To my surprise, I still see websites follow the adaptive design pattern, where it has a container that gets a new max-width value as per the viewport width. The term “responsive” means a lot of things now. We have med

I like to think of CSS as a conditional design language. Over the years, CSS was known as a way to style web pages. Now, however, CSS has evolved a lot to the point you can see conditional rules. The interesting bit is that those CSS rules aren’t direct (i.e: there is still no if/else in CSS), but the way features in CSS work is conditional. Design tools like Figma, Sketch, and Adobe XD made a hug

For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it’s just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I’m sure we agree that this is exciting, isn’t it? Recently, the Chrome team released experimental support for a new proposed CSS spec, style

While learning how to build a Figma plugin, I stumbled upon a few interesting usages of Flexbox and Grid in Figma. When I found them, I just got distracted and couldn’t resist digging more. Flexbox and Grid have been providing us web developers with lots of new capabilities to build new layouts, and what I will show you in this article is just that. To move along with this article, you don’t need

I have always wanted a native CSS way to crop an image and position it in any direction I need. This has been possible by using an additional HTML element combined with different CSS properties that I will explain later. In this article, I will walk you through the new CSS property object-view-box that was suggested by Jake Archibald early this year. It allows us to crop or resize replaced HTML el

Even though CSS grid is one of the greatest additions to CSS, it was lacking one important thing, which is to make an element inherit the columns or rows from its parent. CSS subgrid can help us in doing that. It has been requested for years and now that both Firefox and Safari Technology Preview support it, I thought about giving it a chance. In this article, I will try to highlight the problem t

Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things. In this article, I will explain the probl

One of the most common causes of confusion in CSS is facing specificity while writing styles. For example, changing the display value for an element never works because another element in the cascade overrides it due to having a higher specificity. Or when another element has !important That usually happens when the codebase is growing and we’re not organizing CSS in a way that prevents (or reduce

👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or

Let’s suppose that we have an element with position: fixed. If it has scrolling, you will notice that when you reach the bottom boundary of the element, the browser will continue scrolling on the body element. It’s an unwanted and confusing effect. Thankfully, we can fix that with CSS. In this article, we’ll go through the overscroll-behavior CSS property, what’s the problem it solves, how it work

A while ago, I was inspecting facebook.com home page feed to learn and see how they build things out. I’m always curious to see how people write CSS. I noticed a very, very interesting border-radius value for the card component in the main feed. I shared the following tweet about this little discovery. Then, I received this reply from Miriam Suzanne: is it always 8px? That math looks like a toggle

A few days ago, I saw a tweet by Miriam Suzanne about CSS query units being supported. This was originally proposed by Una Kravets on Github. I couldn’t resist experimenting with them and see how we can get even more benefit from CSS container queries. I will try my best to explain how each unit works, and where we can use a unit(s) to enhance how a component should react to its parent width. If y

Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary? I started to notice a few use-cases where using position: absolute isn’t needed. I found this interesting and I thought about documenting the use-cases that I usually came through while working on front-end projects. In this article, I will explore a few use-cases that using absolute positioning

The other day, I got a question about how to build a responsive stepper component and how to take care of the separator lines. The demo I got from the developer was a bit complex and have lots of unnecessary CSS stuff. As a result, I got the idea of writing about it. In this article, I will explore different designs for a stepping component and see the best way to implement each one in HTML and CS

Have you often thought about whether to implement a mobile-first or a desktop-first approach? Recently, I shared a Twitter poll about how many uses mobile-first vs desktop-first, and the results were interesting. The total number of votes is 648, and here are the stats: Mobile-first: 33.3% Desktop first: 21.9% Mix of both: 24.7% In this article, I will explore with you what each method means, and

At some time in the past, you were given a design mockup to implement. The designer used a new cool font, and it looks perfect in the design. Once you import it and use it in CSS, you will notice additional spacing around the font. What is that? And why the designer did pick such a font in the first place? Well, this issue is related to the font itself. Each font has a different line-height and th