CSS-Tricks*'s Avatar

CSS-Tricks*

@css-tricks.com

* A website about making websites. https://css-tricks.com

4,710
Followers
220
Following
285
Posts
30.10.2024
Joined
Posts Following

Latest posts by CSS-Tricks* @css-tricks.com

Preview
The Different Ways to Select <html> in CSS | CSS-Tricks Sure, we can select the <html> element in CSS with, you know, a simple element selector, html. But what other (trivial and perhaps useless) ways can we do it?

How many ways can you select <html> in CSS? @dxnny.fun says “challenge accepted” building off an exercise @css-only.dev did a little while back.

css-tricks.com/the-differen...

css-tip.com/root-selecto...

05.03.2026 14:05 👍 10 🔁 2 💬 0 📌 0
Preview
Yet Another Way to Center an (Absolute) Element | CSS-Tricks TL;DR: We can center absolute-positioned elements in three lines of CSS. And it works on all browsers!

A little gem @monknow.bsky.social stumbled into when working on something... we can center an absolutely positioned element with justify-self:

.element {
position: absolute;
place-self: center;
inset: 0;
}

He explains it nicely here:

css-tricks.com/yet-another-...

27.02.2026 14:42 👍 11 🔁 1 💬 0 📌 0
Preview
A Complete Guide to Bookmarklets | CSS-Tricks Browsers don't just let you bookmark web pages. You can also bookmark JavaScript, allowing you to do so much more than merely save pages.

A Complete Guide to Bookmarklets, by @vale.rocks (@csstricks@mastodon.social):

https://css-tricks.com/a-complete-guide-to-bookmarklets/

#guides #bookmarklets #javascript #linklists

26.02.2026 20:30 👍 4 🔁 2 💬 0 📌 0
Preview
An Exploit ... in CSS?! | CSS-Tricks Read an explanation of the recent CVE-2026-2441 vulnerability that was labeled a "CSS exploit" that "allowed a remote attacker to execute arbitrary code inside a sandbox via a crafted HTML page."

An Exploit... in CSS?!

Lee Meyer's sane, thoroughly reported, and well-grokked explanation of the recent CVE-2026-2441 vulnerability that was labeled a "CSS exploit" that "allowed a remote attacker to execute arbitrary code inside a sandbox via a crafted HTML page."

css-tricks.com/an-exploit-i...

25.02.2026 21:37 👍 3 🔁 0 💬 0 📌 0

Firefox 148 makes shape() available without a flag, aligning with Chrome and Safari:

developer.mozilla.org/en-US/docs/M...

25.02.2026 16:46 👍 8 🔁 1 💬 0 📌 0

All the magazines are saying it. Bookmarklets are so in right now.

You may consider them obsolete in the face of shinier tools, but they prove themselves a solid, stable staple of any developer's toolbox.

Fast, stable, time-proven. What isn't to love?

#WebDev #FrontEndDevelopment

25.02.2026 15:42 👍 16 🔁 1 💬 2 📌 0
Preview
A Complete Guide to Bookmarklets | CSS-Tricks Browsers don't just let you bookmark web pages. You can also bookmark JavaScript, allowing you to do so much more than merely save pages.

Making your own bookmarklets doesn't have to be all that difficult, and @vale.rocks shows you how, step-by-step.

css-tricks.com/a-complete-g...

25.02.2026 14:52 👍 11 🔁 4 💬 2 📌 2
Preview
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design | CSS-Tricks Let’s get nuanced in this article and discuss the capabilities of both SVG and raster imaged so that you can make informed decisions in your own work.

SVG or raster? The short answer to that question is: there’s almost no difference at all if you are working on something very small and specific.

But it's more nuanced than that, and @holasvg.com has all the nerdy details you need.

css-tricks.com/loading-smar...

23.02.2026 15:02 👍 14 🔁 2 💬 0 📌 0
Video thumbnail

Here's @dxnny.fun poking at a new proposal that would allow an element to match an element when the pointer gets :near() it by a certain amount.

css-tricks.com/potentially-...

20.02.2026 15:39 👍 7 🔁 1 💬 0 📌 0

A few recent additions to the ol' Almanac to distract you on this lovely Friday:

❋ The sign() function
css-tricks.com/almanac/func...

❋ The progress() function
css-tricks.com/almanac/func...

❋ The abs() Function
css-tricks.com/almanac/func...

That progress() one... just wild.

20.02.2026 14:58 👍 4 🔁 2 💬 0 📌 0
Preview
Distinguishing "Components" and "Utilities" in Tailwind | CSS-Tricks The distinction between "components" and "utilities" seems clear at first glance, but gets a little blurred when working with them in Tailwind.

Tailwind utilities can be thought of as components. But there's really a difference between the two and it's helpful to know it. That's where @zellwk.bsky.social has an excellent way to distinguish the two.

css-tricks.com/distinguishi...

18.02.2026 16:27 👍 1 🔁 0 💬 1 📌 0
Preview
Interop 2026 | CSS-Tricks Interop 2026 is officially a thing and there's plenty of new (and even old) CSS features that we can look forward to being cross-browser compatible and consistent!

Interop 2026 is officially a thing and there's plenty of new (and even old) CSS features that we can look forward to being cross-browser compatible and consistent!

css-tricks.com/interop-2026/

17.02.2026 16:23 👍 7 🔁 1 💬 0 📌 0
Video thumbnail

Split the text (to experiment, not to ship), rotate and scale it, and translate the individual characters on scroll.

Phew, definitely not for the faint of heart but it's a super cool effect!

css-tricks.com/spiral-scrol...

17.02.2026 15:40 👍 6 🔁 0 💬 0 📌 0

I thought this was like A WHOLE THING. "The boss level of accessibility tasks" and all that. News to me.

We just converted a non-<dialog> modal to <dialog> just to get the trapping, and I'm keeping it because it actually fixes a little bug I saw where a late-loading editor steals focus out.

16.02.2026 00:04 👍 36 🔁 4 💬 2 📌 0
Preview
What’s !important #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and More | CSS-Tricks This issue of What’s !important is dedicated to our friends in the UK, who are currently experiencing a very miserable 43-day rain streak. Presenting: the five most interesting things to read about CS...

The last two weeks have been super nuts and I haven't hit my RSS reader in days (which is ages for me). But I love @dxnny.fun's round-ups for all that "ain't got no time for this" stuff.

css-tricks.com/whats-import...

13.02.2026 18:01 👍 15 🔁 4 💬 2 📌 1

Exactly 5 years ago, I released my first CSS article. I was "trying" something new, and since then, I never stopped.

Today, I count around 140 articles, a lot of cool CSS websites, and countless demos 😄

Don't miss my latest article with a bunch of modern CSS stuff 👇

13.02.2026 10:44 👍 21 🔁 6 💬 0 📌 2
Video thumbnail

Geez, @css-only.dev is really on a roll! Not only is he rocking a new article on @frontendmasters.com, but he's got another banger today on responsive pyramidal grids. 🔥

css-tricks.com/making-a-res...

12.02.2026 15:51 👍 9 🔁 3 💬 1 📌 1
CSS converting the oklch() function to an RGB color with color-mix() that takes a color variable and makes a calculation that returns white or black.

CSS converting the oklch() function to an RGB color with color-mix() that takes a color variable and makes a calculation that returns white or black.

Here's a pretty clever, albeit super math-y, way to approximate the contrast-color() function while we're waiting for full support.

css-tricks.com/approximatin...

11.02.2026 15:07 👍 29 🔁 5 💬 0 📌 0
Preview
Smashing Meets — Friendly, inclusive, practical event for web designers and developers. — Meets Design Systems 2026 — February 11, 2026 Wednesday, February 11, 2026, 8–11am PDT / 5–8pm CET, we are hosting a new edition of our online community event Smashing Meets. In this Meets we're talking about Design Systems in 2026. We'll go into...

Almost at 1000 attendees for Meets Design Systems 2026! If you’re thinking, “Should I be attendee #999 or #1000?“, now is the time to register.
No rewards. Pure emotional satisfaction. :-D

Your ticket is free, it’s happening Tomorrow, Feb 11, 2026 (8–11 am PT). 💘
smashingconf.com/meets-design...

10.02.2026 15:45 👍 5 🔁 3 💬 0 📌 0

I have a new article up trying to make the perfect pie chart in CSS! There is probably a lot to improve, so a little feedback would be much appreciated

09.02.2026 22:18 👍 3 🔁 2 💬 0 📌 0
Video thumbnail

The progress() function is sorta like clamp() but returns 1 or 0. Combine it with calc() and you can get weird with it.

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

10.02.2026 15:01 👍 24 🔁 2 💬 0 📌 0
Preview
Trying to Make the Perfect Pie Chart in CSS | CSS-Tricks Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.

Can we make pie chart that's semantic, written with flexible markup, and avoids using expensive JavaScript libraries? @monknow.bsky.social takes a noble shot at it. 🥧

css-tricks.com/trying-to-ma...

09.02.2026 17:37 👍 7 🔁 1 💬 0 📌 1
Preview
The CSS Selection - 2026 Edition - Project Wallace The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.

Announcing The CSS Selection!

📰 www.projectwallace.com/the-css-sele...

📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters

The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!

06.02.2026 10:08 👍 87 🔁 37 💬 6 📌 5
Preview
CSS Bar Charts Using Modern Functions | CSS-Tricks CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

@preethisam.bsky.social pokes at it with several examples.

css-tricks.com/css-bar-char...

05.02.2026 15:17 👍 16 🔁 0 💬 0 📌 0
Preview
Using Custom Property "Stacks" to Tame the Cascade | CSS-Tricks Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we've had

taking another look at @miriam.codes's article on @css-tricks.bsky.social

Using Custom Property “Stacks” to Tame the Cascade

css-tricks.com/using-custom...

03.02.2026 16:59 👍 10 🔁 2 💬 0 📌 0

Ooo, really nice! I hope you're saving a deep tutorial for us.

03.02.2026 16:00 👍 5 🔁 0 💬 1 📌 0
Preview
view-timeline-inset | CSS-Tricks The CSS view-timeline-inset property allows you to more finely control where an element’s animation begins and/or ends when scrolled into view. It can be used

A couple new additions to the ol' CSS-Tricks Almanac all about scroll-driven animations:

view-timeline-axis (set scroll direction):

css-tricks.com/almanac/prop...

view-timeline-inset (adjust where things start and end):

css-tricks.com/almanac/prop...

Kudos to @undeadinstitute.bsky.social! 🧡

29.01.2026 15:15 👍 9 🔁 1 💬 0 📌 0
Video thumbnail

By default, the new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that. (via @dxnny.fun )

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

28.01.2026 15:15 👍 4 🔁 2 💬 0 📌 0

📝 New CSS article!

First one of the year, and as usual, plenty of modern CSS features.

If you want to have an overview of how "programming with CSS" looks in 2026, read it 👇

23.01.2026 19:31 👍 15 🔁 4 💬 0 📌 0
Preview
hue-rotate() | CSS-Tricks The hue-rotate() function rotates the color of an element and its content to a specified hue on the color wheel.

It's easy to forget that the CSS hue-rotate() function not only works on background colors, but also text color, background images, and even box shadows!

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

27.01.2026 16:04 👍 7 🔁 0 💬 0 📌 0