Better Defaults for Popovers, by @[email protected]: https://www.matuzo.at/blog/2026/better-defaults-for-popovers #popovers #css #resets

A few noteworthy new additions to the CSS Almanac... animation-range: css-tricks.com/almanac/prop... view-transition-class: css-tricks.com/almanac/prop... superellipse(): css-tricks.com/almanac/func... Props to @undeadinstitute.bsky.social, @sunkanmifafowora.bsky.social and Saleh Mubasher!

What's the craziest place you've coded? I've got a few, but Ngong Ping in Hong Kong comes to mind. That's where the big Buddha is, high up on the peak after a cable car ride. To be fair, there's a Starbucks and it's really easy to get there on the metro.

A different type of connectors pattern in another @codepen.io demo: codepen.io/thebabydino/... Can you figure out how I did this before checking the code? #CSS #gradients #patterns

Our posh new OG images are live too. I said I would do more actual coding this year and this is the first little thing piccalil.li/blog/date-is...

How to “@ scope” CSS Now That It’s Baseline, by @dxnny.fun (@frontendmasters.com): https://frontendmasters.com/blog/how-to-scope-css-now-that-its-baseline/ #css #scope #examples

What? Style an element *while* it's being dragged? @sunkanmifafowora.bsky.social explains how it could become a thing in the future with :drag and ::dragged pseudos. css-tricks.com/future-css-d...

Did you know you can get your GitHub profile pic by adding .png to your profile page? It's super handy! github.com/cassidoo.png

I absolutely love this (and iA Writer!) 💛

How to @​scope CSS now that it’s Baseline. @dxnny.fun notes that Firefox 146 has joined Chrome and Safari in supporting the @​scope at-rule, a new feature that simplifies selectors and improves CSS structure. #css #baseline frontendmasters.com/blog/how-to-...

A fantastic addition to the base game. The story is moody & captivating. Furthermore, the gameplay is smooth & enjoyable. If you want a little bit of alien Hollywood, get this game. 9.5/10 moviesgamesandtech.com/2026/01/05/r... @Ubisoft #review #writer #gamer #xbox #ubisoft #Avatar

You can use @​scope now. I'll show you how 🤗 frontendmasters.com/blog/how-to-...

This is a brilliant take down of Tahoe. tonsky.me/blog/tahoe-i...

New year, new @penpot.app template: Typography design tokens starter kit! penpot.app/penpothub/li... Including 29 tokens, documentation, tips for use, and set up for a proportional typographic scale. #penpot

A hot take after seeing yet another fancy tabs design: the classic "tab component" is over-engineered for 90% of use cases. You probably don't need it...

How 2026 was depicted in the sci-fi classic 'Metropolis' (1927)

Announcing Engramma’s new logo, drawn entirely with HTML and CSS.

The new #css `corner-shape: squircle` is fun, but: it is slightly frustrating that a regular border-radius fallback should be around twice as small (or — the squircled border-radius should be twice as large as the usual one). Probably something to abstract as a `--border-radius` token(s) that […]

Hey Kier Starmer. You know, people would think a lot better of you if you just condemned Trump and told him to fuck off.

Who's ready for tomorrow?

🤔 2026 finally the year of JS-in-CSS ❔

one of my favorite new features of css is the ability to nest selectors without the need for postcss/less/sass/scss/etc

AI, generate aspirations for me

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: codepen.io/t_afif/full/... via @codepen.io ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

Next year is going to be a big change for me; and I'm starting already! I'm going to be focusing more on my personal art, learning web design, HTML and CSS so that I can change careers! Whilst doing all this I'd love to have a cool site to host all the lore and art from my stuff! I'm comin' 2026!

What’s !important: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More, by @dxnny.fun (@[email protected]): https://css-tricks.com/whats-important-2/ #css #retrospectives

#XboxSeriesX #XboxShare #BatmanArkhamKnight Welcome to Gotham…The city of fear.

CSS text-decoration-inset landed in Firefox 146! Here's how it works:

Another split & offset text without any duplication whatsoever. Contenteditable. No JS. All with the power of #SVG #filter magic! 🪄✨ Live demo on @codepen.io: codepen.io/thebabydino/...

Plain HTML and CSS can be beautiful. Stay tuned 👀

🦖 Random MDN: Detecting device orientation 🦖 https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation Increasingly, web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their … #webdev

I can't explain it but #:~:text= text fragment URLs are the modem noises of the 2020s

We’re so excited about our MCP server! 🚀 Do you know what it is and why it’s so important? Don’t miss all the details in our community post 👇 community.penpot.app/t/penpot-mcp...

I personally love displacement maps. When they work, they can do really cool stuff, not just shrinking/ expansion, but also rotation (codepen.io/thebabydino/...), 3D effects (codepen.io/thebabydino/...), the bubbling lens effect (codepen.io/thebabydino/...). None of these duplicate/ split text.

What's everyone's problem? I'm really liking it #StrangerThings

More holiday cheer. For those of you asking about Safari’s “stable” Interop 2025 score…

Me, explaining the different panels on CodePen to my six year old: "This is one is for the content, this one is for the styles, this one is for… well, we don't need that one."

Scrollytelling on Steroids With Scroll-State Queries, by @[email protected]: https://css-tricks.com/scrollytelling-on-steroids-with-scroll-state-queries/ #css #scrolling

Just found out you can include stroke in Auto Layout’s total dimensions to match CSS box model. I’ll turn in my @Figma expert card on the way out.

A friend shared this with me and it made me chuckle: fuckyouiwontusetailwind.com My hot take is people coming from bad CSS code bases love Tailwind and people coming from good CSS code bases hate Tailwind #WebDev #CSS

On the timeline today: Two uses of CSS for hiding text, with drastically different intentions

A great review. Geoff and crew have done so much to keep an absolute pillar of our industry alive and flourishing. Hate the see how damaging Google “AI summaries” have been, but love to see how much is being invested in the CSS Almanac. It’s one of my favourite resources on the internet!

I'll be danged if looking back on the past year doesn't make me proud as heck of what's happening over at @css-tricks.bsky.social. css-tricks.com/thank-you-20...

Quite possibly the worst wrapped ever. Inaccurate, and poor execution. www.airasia.com/data/share/1...

“text-decoration-inset” Is Like Padding for Text Decorations, by @dxnny.fun (@[email protected]): https://css-tricks.com/text-decoration-inset-is-like-padding-for-text-decorations/ #css

A smol preview of what text-decoration-inset can do (yes, native CSS) 🥳

🎂 29yrs ago today, the WWW was introduced to Cascading Style Sheets, or best known as CSS. Modern CSS today feels like the 8th Wonder of the World (wide web) with so much possible which wasn't before. Sharing this CSS WRAPPED for a taste of it. #HBDCSS chrome.dev/css-wrapped-...

Here's a little pure #CSS demo I made on @codepen.io a while back: clip element on #scroll codepen.io/thebabydino/... (using scroll-driven animations, so support may still be spotty)

Different Page Transitions For Different Circumstances In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.