Menu

CSS

Computed Values: More Than Meets the Eye

August 5th, 2020

Browser DevTools are indispensable for us front end developers. In this article, we’ll take a look at the Computed tab, a small corner of the DevTools panel that shows us big things, like how relative CSS values are resolved. We’ll also see how inheritance fits into the browser’s style computation process. The “Computed” tab is generally located…

A Lightweight Masonry Solution

August 3rd, 2020

Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how…

Getting the Most Out of Variable Fonts on Google Fonts

July 30th, 2020

I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts! Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google Fonts (but you…

style9: build-time CSS-in-JS

July 29th, 2020

In April of last year, Facebook revealed its big new redesign. An ambitious project, it was a rebuild of a large site with a massive amount of users. To accomplish this, they used several technologies they have created and open-sourced, such as React, GraphQL, Relay, and a new CSS-in-JS library called stylex. This new library…

Want to get better at code? Teach someone CSS.

July 28th, 2020

A friend of mine recently asked me to teach her to code. She was an absolute beginner, having no idea what coding really involves. I decided to start where I started: HTML and CSS. Using CodePen, we started forking Pens and altering them. Soon, a learning path started to unravel. The aim of this article…

Bold on Hover… Without the Layout Shift

July 27th, 2020

When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because the bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of links where the wider/bolder text doesn’t push anything anyway. Sometimes it does matter, like…

Using Flexbox and text ellipsis together

July 21st, 2020

You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want to truncate content in the middle? Leonardo Faria details good use cases for this, like…

Levels of Fix

July 20th, 2020

On the web, we have the opportunity to do work that fixes things for people. It’s fascinating to me how different the scope of those fixes can be. Consider the media query prefers-reduced-motion. Eric wrote: I think it’s also worth pointing out the true value prefers-reduced-motion represents: Not attracting buzzword-hungry recruiters on LinkedIn, but improving the quality…

CSS Painting Order

July 17th, 2020

Usually, when I see terms like “painting order” or “stacking context” my brain will start to shut off and my eyes will gloss over. Not that my brain doesn’t normally shut off more often than not, but that’s another topic for another time. Martin Robinson over at Igalia touches on these concepts using an example…

Backdrop Filter effect with CSS

July 16th, 2020

I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter. The approach? Easy peasy: .container { backdrop-filter: blur(10px); } The comments in the post are worth looking into…