The scrollbar-gutter property provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it "reserving space for the scrollbar" and that makes sense since that's what a gutter ultimately is: a container that reserves space for whatever is in it and separates it from other elements.… Read article
Oh hey, so tomorrow (tomorrow!) is Election Day here in the United States. We're not in the business of making political endorsements or anything like that at CSS-Tricks, though we do endorse that everyone exercise their right to vote.
I did exactly that two years ago and posted a CSS rendition of the "I Voted" sticker that came with my California mail-in ballot.
Fast forward to today, and I received a new sticker in the ballot sporting a fresh design.
I have a little time, so I'm going to try to re-create this sticker in CSS and walk through my thought process as I do it. Feel free to follow along if you'd like!
I came clean about my long-running and ongoing battle with chronic depression last year in a blog post on my personal site. But don't worry, things are no worse than they were then and this post is about something else. This post is about designing empathetic user experiences.… Read article
A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.
But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.… Read article
The web has grown bigger. Both in expansiveness and weight. Nick Heer's "The Bullshit Web":
The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we’re simply occupying that extra bandwidth with more stuff.
Nick clearly explains what he means by bullshit, and one can see a connection to Brad Frost's similarly framed … Read article
Styling and accessibility are often at odds with each other. Scott O'Hara has this repo that shows how the two can work really well together in the context of form controls.
The trade-offs between native and styled controls remind me of Eric Bailey's case study on focus styles:
… Read articleA common misconception is that the focus style can only use the outline property. It’s worth noting that
:focusis a selector like any other, meaning that it accepts the full
Like many, many others, I'm in the pool of leveling up my JavaScript skills and learning how to put React to use. That's why Brad Frost resonated with me when he posted My Struggle to Learn React."… Read article
The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow. In fact, both properties make up the line-clamp property, which is a shorthand for combining them.… Read article
The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property.… Read article
The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path.
That's kinda wordy, so let's break that down a bit.… Read article