Menu

CSS

Google Fonts + Variable Fonts

March 7th, 2020

I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference really, except it’s blue instead of red and this one pretty rad checkbox: Show only variable fonts. An option to only show variable fonts is a pretty bold…

Currying in CSS

March 6th, 2020

Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don’t fully understand) and I came across some CSS they show off that looked like this: :root { –fluid-max-negative: (1 / var(–fluid-max-ratio) / var(–fluid-max-ratio)); –fluid-min-negative: (1 / var(–fluid-min-ratio) / var(–fluid-min-ratio));…

Animating CSS Width and Height Without the Squish Effect

March 5th, 2020

The first rule of animating on the web: don’t animate width and height. It forces the browser to recalculate a bunch of stuff and it’s slow (or “expensive” as they say). If you can get away with it, animating any transform property is faster (and “cheaper”). Butttt, transform can be tricky. Check out how complex…

When CSS Blocks

February 27th, 2020

Tim Kadlec: One particular pattern [for loading non-critical CSS] I’ve seen is the preload/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their onload events to change them back to a stylesheet once the browser has them ready. So you’re trying to make your stylesheet more async, but it causes two…

Let’s Say You Were Going to Write a Blog Post About Dark Mode

February 26th, 2020

This is not that blog post. I’m saying let’s say you were. This is not a knock any other blog posts out there about Dark Mode. There are lots of good ones, and I’m a fan of any information-sharing blog post. This is more of a thought exercise on what I think it would take…

Responsive Grid Magazine Layout in Just 20 Lines of CSS

February 25th, 2020

I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar. The easy part was grabbing a list of posts with excerpts from our…

Inspiring high school students with HTML and CSS

February 21st, 2020

Here’s a heartwarming post from Stephanie Stimac on her experience teaching kids the very basics of web development: […] the response from that class of high school students delighted me and grounded me in a way I haven’t experienced before. What I view as a simple code was absolute magic to them. And for all…

Animate SVG Path Changes in CSS

February 20th, 2020

Every once in a while I’m motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q…

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

February 18th, 2020

Andrew Welch had a little CSS challenge the other day to make an ordinary div: • centered vertically + horizontally • scales to fit the viewport w/ a margin around it • maintains an arbitrary aspect ratio • No JS There’s a video in that tweet if it helps you visualize the challenge. I saw…

Helping Browsers Optimize With The CSS Contain Property

February 10th, 2020

There is a growing number of things that we have to do to help the browser achieve peak performance. Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors. Regular images…