They’re out! Like many of you, I look forward to these coming out each year. I don’t put much stock in surveys but they can be insightful and give a snapshot of the CSS zeitgeist. There are a few little nuggets in this year’s results that I find interesting. But before I get there, you’ll […]
State of CSS 2024 Results Read More »
Every generation is different in very unique ways, with different habits, views, standards, and expectations. So when designing for Gen Z, what do we need to keep in mind? Let’s take a closer look at Gen Z, how they use tech, and why it might be a good idea to ignore common design advice and
Designing For Gen Z: Expectations And UX Guidelines Read More »
In this article, I try to summarize the best practices mentioned by various accessibility experts and their work (like this, this, and this) into a single article that’s easy to read, understand, and apply. Let’s begin. What are tooltips? Tooltips are used to provide simple text hints for UI controls. Think of them as tips
Tooltip Best Practices Read More »
Welcome to our roundup of the best new fonts we’ve found online in the last four weeks. In this month’s selection we have a mixture of different styles, from highly practical serifs, to experimental display typefaces. Enjoy!
15 Best New Fonts, October 2024 Read More »
GT Flaire GT Flaire aims to translate the bold expressive curves of calligraphy into digital form. It blends profesionalism with a lively, playful style to bridge the gap between business and creativity. It’s an excellent choice for corporations hoping to create a more relaxed brand image. Paramount Rounded Paramount Rounded is a humanist-geometric typeface blending
15 Best New Fonts, October 2024 Read More »
You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s
Come to the light-dark() Side Read More »
A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was time to update that and do the subject justice. Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed
Left Half and Right Half Layout – Many Different Ways Read More »
Terence Eden on using text-wrap: balance for more than headings: But the name is, I think, slightly misleading. It doesn’t only work on text. It will work on any content. For example – I have a row of icons at the bottom of this page. If the viewport is too narrow, a single icon might drop to the next
You can use text-wrap: balance; on icons Read More »
The difference between Popovers (i.e., the popover attribute) and Dialogs (i.e., both the <dialog> element and the dialog accessible role) is incredibly confusing — so much that many articles (like this, this, and this) have tried to shed some light on the issue. If you’re still feeling confused, I hope this one clears up that
Clarifying the Relationship Between Popovers and Dialogs Read More »
There’s a lot of math behind fluid typography. CSS does make the math a lot easier these days, but even if you’re comfortable with that, writing the full declaration can be verbose and tough to remember. I know I often have to look it back up, despite having written it maybe a hundred times. Silvestar
Clamp it! VS Code extension Read More »
