Menu

CSS

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…

Three CSS Alternatives to JavaScript Navigation

July 14th, 2020

Hey quick! You’ve gotta create the navigation for the site and you start working on the mobile behavior. What pattern do you choose? If you’re like most folks, it’s probably the “hamburger” menu that, when clicked, uses a little JavaScript to expand a vertical list of navigation links. But that’s not the only option. Depending…

Displaying the Current Step with CSS Counters

July 7th, 2020

Say you have five buttons. Each button is a step. If you click on the fourth button, you’re on step 4 of 5, and you want to display that. This kind of counting and displaying could be hard-coded, but that’s no fun. JavaScript could do this job as well. But CSS? Hmmmm. Can it? CSS…

Fluid Images in a Variable Proportion Layout

July 3rd, 2020

Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let’s say this image is not semantic content, but only decoration. That’s a good use for background-image. And because in this context…