This is an interesting looking proposal for CSS grid to be ever so slightly extended to enable Masonry-style auto placement—something’s that tantalisingly close right now, but still requires some JavaScript to do calculations.
Everyone wants it, but it sure seems like no one is actively working on it.
Zach traces the earliest inklings of container queries to an old blog post of Andy’s—back when he was at Clearleft—called Responsive Containers:
For fun, here’s some made-up syntax (which Jeremy has dubbed ‘selector queries’)…
Chris makes the valid observation that JavaScript programmers who bemoan the “global scope” of CSS are handily forgetting that JavaScript also has global scope by default.
JS is also global by default. We use IIFEs and wrapper functions to add scope.
And for all this talk about CSS being global, you can actually scope styles when you need to. It’s more-or-less the same way you do it in JavaScript.
This is superbly in-depth and easy-to-follow article from Cassie—everything you need to know about motion paths in SVG and CSS! It’s worth reading just for the wonderful examples.
Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!
This is such a great way to explain a technology! Chris talks through his thought process when using flexbox for layout.
A series of really nice CSS grid demos based on two-page magazine spreads.
I’m really enjoying this end-of-the-year round-up from people speaking their brains. It’s not over yet, but there’s already a lot of thoughtful stuff to read through.
There are optimistic hopeful thoughts from Sam and from Ire:
Only a few years ago, I would need a whole team of developers to accomplish what can now be done with just a few amazing tools.
And I like this zinger from Geoff:
HTML, CSS, and JavaScript: it’s still the best cocktail in town.
Then there are more cautious prognostications from Dave and from Robin:
The true beauty of web design is that you can pick up HTML, CSS, and the basics of JavaScript within a dedicated week or two. But over the past year, I’ve come to the conclusion that building a truly great website doesn’t require much skill and it certainly doesn’t require years to figure out how to perform the coding equivalent of a backflip.
What you need to build a great website is restraint.
HTML lets you create the structure of a website.
CSS lets you make the website look nice.
JavaScript lets you change HTML and CSS. Because it lets you change HTML and CSS, it can do tons of things.
Six steps that everyone can do to catch accessibility gotchas:
- Check image descriptions
- Disable all styles
- Validate HTML
- Check the document outline
- Grayscale mode
- Use the keyboard
With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.
Also with Progressive Enhancement, it’s incredibly likely that your IE11 user, or your user on a low-powered device, or even your user on a poor connection won’t notice that they’re experiencing a “minor” experience because it’ll just work for them. This is the magic, right there. Everyone’s a winner.
A deep dive info focus styles with this conclusion:
The default focus ring works. There are problems with it, but it can be good enough, especially if you can’t dedicate time and energy to create a custom focus ring.
Some very smart ideas in here for resetting default browser styles, like only resetting lists that have classes applied to them:
ul[class],
ol[class] {
padding: 0;
}
I select only lists that do have a
classattribute because if a plain ol’<ul>or<ol>gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that.
I don’t know about “perfect” but this pretty much matches how I go about implementing responsive navigation (but only if there are too many links to show—visible navigation is almost always preferable).
The transcript of Andy’s talk from this year’s State Of The Browser conference.
I don’t think using scale as an excuse for over-engineering stuff—especially CSS—is acceptable, even for huge teams that work on huge products.
This is such a great little web book from Chris Ferdinandi that you can read online for free.
This is why we need an nth-letter selector in CSS .
What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!
Also: Cassie is on the indie web now, writing on her own website—yay!
Scott re-examines the browser support for loading everything-but-the-critical-CSS asynchronously and finds that it might now be as straightforward as this one declaration:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
I love the fact the Filament Group are actively looking at how deprecate their loadCSS polyfill—exactly the right attitude for polyfills in general.
When min() gets better support (it’s currently in Safari), we’ll be able to create container queryish declarations like this:
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));