サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
ishadeed.com
A fresh look at the CSS grid template areas and how to take advantage of its full potential today. Jul 20, 2024 CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature. It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this intera
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
While working on a UI, I needed to add a line separator between two sections. Here it is: On smaller viewports, the line will become horizontal: Let’s take a look at the HTML. <section class="section"> <div class="section__item section__item--start"> <!-- Content --> </div> <div class="section__item section__item--end"> <!-- Content --> </div> </section> We have a section, with two main child item
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
次のページ
このページを最初にブックマークしてみませんか?
『Ahmad Shadeed』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く