A stylesheet for when you’re nostalgic for the old Mac OS.
The algorithm I’m going after is pretty simple: If the grid of items has an odd number of items, then make the first item full-width. But CSS can’t do logic… right? Well… hold my proverbial beer.
Prompted by my recent post about using native
button elements, Trys puts forward a simple explanation for why someone would choose to use a
The one common feature between every codebase I’ve encountered on that doesn’t use
buttons well, is a bad CSS reset. Developers try to use a
button, and find that it still looks like a native browser button, so they grab a plain old, blank canvas
div, and build from there.
Occam’s Razor makes Trys’s explanation the most likely one.
I love this kind of spelunking into the history of why things are they way they are on the web!
Here, Detective Chief Inspector Suzanne tries to get to the bottom of why every browser has eight pixels of margin applied to the
body element in the user-agent stylesheet.
This is such a great clear explanation from Lynn on how to add some tasteful parallax depth to scrolling pages.
I love these notes on my recent talk!
Some thoughts—and kind words—prompted by my recent talk, In And Out Of Style.
Here’s the video of my opening talk at this year’s CSS Day, which I thoroughly enjoyed!
It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!
A stylesheet to imitate paper—perfect for low-fidelity prototypes that you want to test.
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.
This is kind of a Utopia lite: pop in your minimum and maximum font sizes along with a modular scale and it spits out some custom properties for
To complement her talk at Beyond Tellerrand, Stephanie goes through some of the powerful CSS features that enable intrinsic web design. These are all great tools for the declarative design approach I was talking about:
Robin adds a long-zoom perspective on my recent post:
This is a great little tip from Eric for those situations when you want an element to be centred but you want the content inside that element to remain uncentred:
max-inline-size: max-content; margin-inline: auto;
And I completely concur with his closing thoughts on CSS today:
It’s a nice little example of the quiet revolution that’s been happening in CSS of late. Hard things are becoming easy, and more than easy, simple. Simple in the sense of “direct and not complex”, not in the sense of “obvious and basic”. There’s a sense of growing maturity in the language, and I’m really happy to see it.
Give the browser some solid rules and hints, then let it make the right decisions for the people that visit it, based on their device, connection quality and capabilities. This is how they will get a genuinely great user experience, rather than a fragmented, broken one.
I can see myself almost certainly needing to use this clever technique at some point so I’m going to squirrel it away now for future me.
Some thoughts on CSS, media queries, and fluid type prompted by Utopia:
We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?
In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.
Josh is great at explaining tricky concepts and here he’s really set himself a challenge: explaining layout modes in CSS.
Excellent advice from Jeremy who wants us to build fast, reliable, resilient websites …even if the technologies involved in doing that don’t feel exciting.
Central to that endeavor is recognizing that the browser gives you a ton of stuff for free. Relying on those freebies requires a willingness to not