Tim Brown: CSS forces

Some interesting thoughts from Tim here. What if CSS could “displace” design decisions from one area to another?

For example, a flexible line spacing value in one container could influence margins that surround the text block. That change in spaciousness may mean that nearby headings need size or spacing adjustments to stay feeling connected.

This feels like the complete opposite way that most people approach design systems—modular, componentised, and discrete—but very in-line with the way that CSS has been designed—interconnected, relational and cascading.

Tagged with

Related links

Knowing CSS is mastery to Frontend Development — Anselm Hannemann

Anselm isn’t talking about becoming a CSS wizard, but simply having an understanding of what CSS can do. I have had similar experiences to this:

In the past years I had various situations where TypeScript developers (they called themselves) approached me and asked whether I could help them out with CSS. I expected to solve a complex problem but for me — knowing CSS very well — it was always a simple, straightforward solution or code snippet.

Let’s face it, “full stack” usually means “JavaScript”—HTML and CSS aren’t considered worthy of consideration. Their loss.

Tagged with

My Modern CSS Reset | jakelazaroff.com

I like the approach here: logical properties and sensible default type and spacing.

Tagged with

Hyper-responsive web components | Trys Mudford

Trys describes exactly the situation where you really do need to use the Shadow DOM in a web component—as opposed to just sticking to HTML web components—, and that’s when the component is going to be distributed and you have no idea where:

This component needed to be incredibly portable, looking great on any third-party website, in any position, at any viewport, with any amount of content. It had to be a “hyper-responsive” component.

Tagged with

It’s about time I tried to explain what progressive enhancement actually is - Piccalilli

Progressive enhancement is a design and development principle where we build in layers which automatically turn themselves on based on the browser’s capabilities.

The idea of progressive enhancement is that everyone gets the perfect experience for them, rather than a pre-determined “perfect” experience from a design and development team.

Tagged with

New magic for animations in CSS | Chase McCoy

Hallelujah! We’re finally getting our two wishes for CSS animations and transitions:

  1. Animating to and from display: none; for the sake of enter/exit animations.
  2. Animating to and from the intrinsic size of an element (such as height: auto;).

Tagged with

Related posts

Making the website for Research By The Sea

Having fun with view transitions and scroll-driven animations.

content-visibility in Safari

Safari 18 supports `content-visibility: auto` …but there’s a very niche little bug in the implementation.

Schooltijd

Going back to school in Amsterdam.

Speedier tunes

Improving performance with containment.

Faulty logic

CSS logical properties here, they just aren’t evenly distributed yet.