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

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

I can’t contain my excitement while writing the first few words for this article. Ladies and gentlemen, CSS container queries are finally here! Yes, you read that right. They’re currently supported in Google Chrome (105) and soon in Safari 16. This is a huge milestone for web development. For me, I see it just like when we started building responsive websites via media queries, which is a game cha

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

👋 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

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

My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web. He can’t decide when to use grid or flexbox. For example, he used CSS grid to layout a website header and mentioned that the process wasn’t smooth as he played with grid-column and

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

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

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

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent as a front-end developer. The prototype of container queries is now available behind a flag in Chrome Canary. Thanks to efforts from smart people like Miriam Suzanne and other folks. I remember seeing a lot of jokes about the support for CSS container queries, but they are finally there. In this article, I wil

The support for CSS logical properties is getting better by time. However, I still struggle to memorize them each time I want to use them in a project. What does start mean? And what does end mean? It’s a bit tricky to grasp all the details without trial and error. In this article, I aim to get you up and running to use logical properties today with a solid understanding from the perspective of a

@shadeed9 Understanding Z-Index in CSS A visual guide on how z-index and stacking contexts work in CSS. What is Z-Index?The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than static. The duck and the ring are within the same parent (the water). Can you guess which will come in front of the other? <div class="water"> <d

Oftentimes, we want to limit the width of an element relative to its parent, and at the same time, to make it dynamic. So having a base width or height with the ability to make it extend based on the available space. Let’s say, for example, that we have a button that should have a minimum width, where it shouldn’t go below it. This is where the maximum and minimum properties become handy. In this