Blog
-
Improving card patterns with anchor positioning
Digging into anchor positioning and coming out the other side with a better Card pattern? Yes please.
Read the whole post Improving card patterns with anchor positioning
-
CSS Specificity as semantic versioning
When thinking about CSS specificity, it can be tricky at first to understand how one selector beats another. It just occurred to me that semantic versioning could be a good way to explain it – provided you already know how the versioning scheme works.
-
Custom properties for breakpoint debugging
Yesterday, I stumbled across Eric Meyer’s post on displaying CSS breakpoint information with generated content. It reminded me of a solution to a related problem that Jeremy Keith blogged about way back in 2012 – how to conditionally load content (via JavaScript) when a certain breakpoint is active. I realized that the technique could be improved using custom properties.
Read the whole post Custom properties for breakpoint debugging
-
Progressive Web Apps behind Basic Auth
When adding a service worker and Web App Manifest to a staging site recently, I ran into some small issues with HTTP Basic Auth. Here's how I solved them.
-
Smart borders between flex items – the dumb way
How to emulate a direction-independent border inbetween two flex-items, regardless of whether they wrap or not. Caution: it's the dumb.
Read the whole post Smart borders between flex items – the dumb way
-
Fixing fieldsets
The fieldset element is a really useful one. It creates a grouping of related form fields, giving them a label in the shape of a legend element. Sadly, it's a pain to style, but I think browser makers and spec writers have a unique opportunity to fix it.
-
Enquire Within Upon @media
When dealing with advanced layout features, it makes sense to place all of your CSS inside of a feature query, including media queries for the advanced layout. However, Chrome (currently) drops the ball on that last part. TL;DR: You currently can't quite nest media queries inside feature queries in Chrome, but the other way around is fine. This bug has since been fixed, and should go away in upcoming versions of Chrome.
-
Revisiting the Float Label pattern with CSS
The float label pattern is a slick pattern that designers seem to love. I'm not sure that I'm 100% in love with it, but I couldn't resist cooking up a quick demo implementation. This version uses a few nice form-styling tricks using modern CSS that I've seen recently, particularly the
::placeholder-shownselector.Read the whole post Revisiting the Float Label pattern with CSS
-
Grid Tidbits part 3: grid track sizing
In this Grid Tidbit, we’re going to get into sizing the grid tracks – which means the rows and columns of a grid container. There’s all sorts of special functions and tricks that help us do so in a flexible way.
-
Grid Tidbits part 2: terminology and basics
A walk-through of the basics of defining grid containers, what they're made of and how to place items inside them. This is the second part of my series on the CSS Grid Layout specification, "Grid Tidbits".
Read the whole post Grid Tidbits part 2: terminology and basics