CSS-Tricks*

A Few Things About the Anchor Element’s href You Might Not Have Known | CSS-Tricks It's easy to take URL superpowers for granted, even if you already have these patterns under your belt.

It's easy to take URL superpowers for granted, even if you already have these patterns under your belt.

@jim-nielsen.com has excellent notes with tons of references... including a neat experiment with JavaScript’s URL constructor.

css-tricks.com/a-few-things...

Covering hidden=until-found | CSS-Tricks Short story: Slapping hidden=until-found on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.

I missed the whole hidden=until-found deal until it landed in Firefox 139, and even more recently, Safari Technology Preview 125.

Totally one of those things that looks simple, but gets wayyy more nuanced as you dig in.

css-tricks.com/covering-hid...

had a CSS challenge that would have been GNARLY yesterday and then remembered CSS layers exist now and solved it in +3 lines and no !important hacks

CSS is so good now 💜💜 @miriam.codes @tabatkins.com fantasai thank you for your work on the layers spec

You're spoiling the re-brand!

a man in a suit and tie is sitting at a table with a microphone in front of him . Alt: David Letterman at his desk pointing finger guns at the audience with a glib smile.

CSS-Stupid-Animal-Tricks

On Accessibility Conformance, Design Systems, and CSS "Base" Units | CSS-Tricks My brain can't help but try to make connections between seemingly disparate ideas. And that's what happened yesterday when I read:

On Accessibility Conformance, Design Systems, and CSS “Base” Units

css-tricks.com/on-accessibi...

We Might Need Something Between Root and Relative CSS Units for "Base Elements" | CSS-Tricks I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.

Here's a wild idea from @zellwk.bsky.social: a "base" unit in CSS for inheriting font-related property values between components.

css-tricks.com/we-might-nee...

CSS-Questions | CSS-Tricks CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions.

OK, what's your score?

css-tricks.com/css-questions/

(Great work, @sunkanmifafowora.bsky.social!)

Stuff & Nonsense Practical Layout Workshop | CSS-Tricks Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.

Layout may seem like a solved thing, but how creative can you get with it? How do you make it tell a story?

@allthatmalarkey.bsky.social has a two-hour workshop coming up. And if you've been following his recent work on CSS-Tricks, you know it's worth your time!

css-tricks.com/stuff-nonsen...

Getting Creative With Quotes | CSS-Tricks How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote m...

Mr. @allthatmalarkey.bsky.social on how there are no rules about how long a quote should be, how big it should look, or even how it’s styled.

So, how do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story?

css-tricks.com/getting-crea...

How to Prepare for CSS-Specific Interview Questions | CSS-Tricks Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.

The most likely CSS-related questions you’ll get in a front-end interview may not exactly be the *best* ones.

css-tricks.com/how-to-prepa...

YouTube video by Winging It There's a new stretch keyword in CSS?

The other day @davatron5000.bsky.social shared a link to the new `stretch` keyword in CSS – and I saw a lot of questions about how it's different from 100% (or 100vh when doing full-screen layouts). So I made a quick video to show how these all work! #CSS

youtu.be/iZZXOuLxagE

Bringing Back Parallax With Scroll-Driven CSS Animations | CSS-Tricks Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have sc...

Bringing Back Parallax With Scroll-Driven CSS Animations by Blake Lundquist

css-tricks.com/bringing-bac...

“There are only two words you have to remember.

Just two words.

Sufficient contrast.

And you’re set for accessibility (design-wise, at least).

That’s it.”

Thinking Deeply About Theming and Color Naming | CSS-Tricks Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

From @zellwk.bsky.social:

“Colors create differentiation; differentiation creates distinction; distinction creates identity.”

css-tricks.com/thinking-dee...

radial-gradient() | CSS-Tricks The radial-gradient() functions creates a circular or elliptical color gradient starting from a center point and spreading outward.

Everything you ever wanted, or needed, to know about radial gradients, courtesy of @monknow.bsky.social — even digging into those tricky hue interpolation and radial-extent keywords.

css-tricks.com/almanac/func...

css-tricks.com/almanac/func...

Keeping Article Demos Alive When Third-Party APIs Die | CSS-Tricks Is there a way to build demos that do not break when the services they rely on fail? How can we ensure educational demos stay available for as long as possible?

This isn’t exactly a “fun” thing but is definitely one of those considerations you run into when relying on third-party services.

css-tricks.com/keeping-arti...

How to Discover a CSS Trick | CSS-Tricks Do we invent or discover CSS tricks? Lee Meyer discusses how creative limitations, recursive thinking, and unexpected combinations lead to his most interesting ideas.

Love this line:

“Being asked ‘Why would you do that in CSS when you could just use JavaScript?’ is like if you asked me: ‘Why would you write a poem when it’s easier to write prose?’

css-tricks.com/how-to-disco...

Atomic Design Certification Course | CSS-Tricks Brad Frost introduced the "Atomic Design" concept wayyyy back in 2013. He even wrote a book on it. And we all took notice, because that term has been part of

I've preordered @bradfrost.com's Atomic Design course and know it's going to be just plain awesome.

css-tricks.com/atomic-desig...

Heck yeah for `animation-composition: add`

A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more infor...

A First Look at the Interest Invoker API (for Hover-Triggered Popovers) by @dxnny.fun

css-tricks.com/a-first-look...

Frontend Developers:
Do you have a higher education degree?

Is it related to Frontend?

A Primer on Focus Trapping | CSS-Tricks Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly bec...

A Primer on Focus Trapping by @zellwk.bsky.social

css-tricks.com/a-primer-on-...

Finally just gonna be brave and release this openly: splendidlabz.com/solutions/la...

Getting Creative With Versal Letters | CSS-Tricks A versal letters is a typographic flourish found in illuminated manuscripts and traditional book design, where it adds visual interest and helps guide a reader’s eye to where they should begin.

"Getting Creative With Versal Letters" by @allthatmalarkey.bsky.social

I had to look up "versal" when I saw it in Andy's draft. 🤓

css-tricks.com/getting-crea...

Getting Clarity on Apple's Liquid Glass | CSS-Tricks Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the co...

Getting Clarity on Apple’s Liquid Glass

A set of notes getting into the origins, documentation, opinions, and experiments of Liquid Glass.

css-tricks.com/getting-clar...

I spent hours and hours trawling through the sites of some of the world's best web developers, and despite the horrors I regularly experience in my daily work in Big JavaScript Territory, what I saw left me hopeful:

infrequently.org/2025/07/links/

What I Took From the State of Dev 2025 Survey | CSS-Tricks State of Devs 2025 survey results are out! Sunkanmi Fafowora highlights a few key results about diversity, health, and salaries.

What I Took From the State of Dev 2025 Survey by @sunkanmifafowora.bsky.social

css-tricks.com/what-i-took-...

inset() | CSS-Tricks The CSS inset() function allows you to create rectangles to use with the shape-outside, clip-path, and offset-path properties.

A couple of CSS shape functions have been added to the ol’ Almanac, thanks to some heavy lifting from @undeadinstitute.bsky.social:

First up, inset():
css-tricks.com/almanac/func...

Aaaaaand there’s also xywh():
css-tricks.com/almanac/func...