Daniel Schwarz
@dxnny.fun
Designer / dev / editor / writer, currently @css-tricks.com and @logrocket.bsky.social
Reposted by Daniel Schwarz
🎂 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-...
chrome.dev/css-wrapped-...
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 17, 2025 at 12:33 PM
🎂 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-...
chrome.dev/css-wrapped-...
Reposted by Daniel Schwarz
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)
(using scroll-driven animations, so support may still be spotty)
December 17, 2025 at 3:16 PM
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)
(using scroll-driven animations, so support may still be spotty)
Reposted by Daniel Schwarz
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.
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
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.
frontendmasters.com
December 17, 2025 at 8:39 AM
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.
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
Reposted by Daniel Schwarz
Wrote a piece for the @zeroheight.com blog on annotating design system components for accessibility: zeroheight.com/blog/how-to-... #a11y
How to annotate design system components for accessibility - zeroheight
Geri Reid shares how accessibility annotations for design systems help teams document components, create reusable specs, and build inclusive products.
zeroheight.com
December 16, 2025 at 3:36 AM
Wrote a piece for the @zeroheight.com blog on annotating design system components for accessibility: zeroheight.com/blog/how-to-... #a11y
Reposted by Daniel Schwarz
Thank you to all who work very hard to expand and push the boundaries of what we can do with CSS. You've made my work and the work of millions of others so much easier.
You're not unnoticed, and I do hope you're having an amazing day.💛
You're not unnoticed, and I do hope you're having an amazing day.💛
December 17, 2025 at 12:26 PM
Thank you to all who work very hard to expand and push the boundaries of what we can do with CSS. You've made my work and the work of millions of others so much easier.
You're not unnoticed, and I do hope you're having an amazing day.💛
You're not unnoticed, and I do hope you're having an amazing day.💛
Reposted by Daniel Schwarz
Animation libraries like GSAP are great, but discovering truly inspiring examples can be hard. GSAP have fixed that with this glorious collection.
demos.gsap.com
demos.gsap.com
GSAP Demo Hub
A growing collection of interactive demos and examples. Learn, explore, and see what’s possible with GSAP.
demos.gsap.com
December 17, 2025 at 2:02 PM
Animation libraries like GSAP are great, but discovering truly inspiring examples can be hard. GSAP have fixed that with this glorious collection.
demos.gsap.com
demos.gsap.com
Reposted by Daniel Schwarz
Mozilla’s new CEO is doubling down on an AI future for Firefox
Mozilla’s new CEO is doubling down on an AI future for Firefox
Anthony Enzor-DeMeo is taking charge of one of the internet’s most important — and most complicated — companies.
buff.ly
December 16, 2025 at 1:20 PM
Mozilla’s new CEO is doubling down on an AI future for Firefox
Reposted by Daniel Schwarz
Lots of ways to arrange elements around a circle! But how do you allow the images to overlap each other and reveal an actively hovered one?
@css-only.dev has a way:
css-tricks.com/responsive-l...
@css-only.dev has a way:
css-tricks.com/responsive-l...
Responsive List of Avatars Using Modern CSS (Part 2) | CSS-Tricks
In this article, we follow up the work we did to create responsive rows of circular images in a previous article by arranging the images around a circle with a clean hover effect.
css-tricks.com
December 17, 2025 at 3:24 PM
Lots of ways to arrange elements around a circle! But how do you allow the images to overlap each other and reveal an actively hovered one?
@css-only.dev has a way:
css-tricks.com/responsive-l...
@css-only.dev has a way:
css-tricks.com/responsive-l...
You won't want to miss this 👀 #css
We're kicking off a new ongoing series for all those "Ain't got time for all that" stories that pop up.
Check out the first installment of "What's !important" by @dxnny.fun!
css-tricks.com/whats-import...
Check out the first installment of "What's !important" by @dxnny.fun!
css-tricks.com/whats-import...
What’s !important #1: Advent Calendars, CSS Wrapped, Web Platform Updates, and More | CSS-Tricks
The best CSS news from around the web from the last two weeks. In this edition: advent calendars, CSS Wrapped 2025, and the latest Web Platform Updates.
css-tricks.com
December 16, 2025 at 5:14 PM
You won't want to miss this 👀 #css
Reposted by Daniel Schwarz
Spotted in the @smashingmagazine.com newsletter ... congrats @kilianvalkhof.com; Well deserved! 👏
December 16, 2025 at 4:00 PM
Spotted in the @smashingmagazine.com newsletter ... congrats @kilianvalkhof.com; Well deserved! 👏
Reposted by Daniel Schwarz
The 2025 State of HTML survey is out
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
December 16, 2025 at 9:26 AM
The 2025 State of HTML survey is out
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
2025.stateofhtml.com
And I love the opening stat — Lazy Loading FTW!
Built-in, simple to use, attributes and elements are HTML's super power. And you can see that reflect in other attributes with the largest increase (details/summary, dialog, fetchpriority!)
Reposted by Daniel Schwarz
What if an AI could open your design file and actually understand it? Refactor components, align tokens, and generate real code?
Penpot, the open-source design tool, is making this real with its MCP server, building that AI future in the open, with the community: tympanus.net/codrops/?p=1...
Penpot, the open-source design tool, is making this real with its MCP server, building that AI future in the open, with the community: tympanus.net/codrops/?p=1...
December 16, 2025 at 10:40 AM
What if an AI could open your design file and actually understand it? Refactor components, align tokens, and generate real code?
Penpot, the open-source design tool, is making this real with its MCP server, building that AI future in the open, with the community: tympanus.net/codrops/?p=1...
Penpot, the open-source design tool, is making this real with its MCP server, building that AI future in the open, with the community: tympanus.net/codrops/?p=1...
Reposted by Daniel Schwarz
Trying to redo my website and remain surprised that in the face of all this innovation, writing simple HTML+CSS still seems easier. As it did 30 years ago when I first dabbled in HTML.
No one needs CI deploy strategies and node.js for five static pages.
No one needs CI deploy strategies and node.js for five static pages.
December 14, 2025 at 9:02 PM
Trying to redo my website and remain surprised that in the face of all this innovation, writing simple HTML+CSS still seems easier. As it did 30 years ago when I first dabbled in HTML.
No one needs CI deploy strategies and node.js for five static pages.
No one needs CI deploy strategies and node.js for five static pages.
Reposted by Daniel Schwarz
The Internet was never perfect but it used to be usable, functional. I know how we got here and I want the old Internet back. I want forums back. I want personal sites. I want stuff not written by a machine. I just want shit to work again.
December 15, 2025 at 12:31 AM
The Internet was never perfect but it used to be usable, functional. I know how we got here and I want the old Internet back. I want forums back. I want personal sites. I want stuff not written by a machine. I just want shit to work again.
Reposted by Daniel Schwarz
It’s so cool that every website is just Like This now. We used to send guys to the chair for putting pop-up ads on their sites. Now if I want to read something I have to read single lines between autoplaying video ads that use so much RAM they force the browser to reload every 5 seconds.
December 15, 2025 at 12:27 AM
It’s so cool that every website is just Like This now. We used to send guys to the chair for putting pop-up ads on their sites. Now if I want to read something I have to read single lines between autoplaying video ads that use so much RAM they force the browser to reload every 5 seconds.
Reposted by Daniel Schwarz
What Else Could Container Queries… Query?, by @dxnny.fun (@csstricks@mastodon.social):
https://css-tricks.com/what-else-could-container-queries-query/
#css #containerqueries
https://css-tricks.com/what-else-could-container-queries-query/
#css #containerqueries
What Else Could Container Queries... Query? | CSS-Tricks
How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?
css-tricks.com
December 13, 2025 at 5:30 PM
What Else Could Container Queries… Query?, by @dxnny.fun (@csstricks@mastodon.social):
https://css-tricks.com/what-else-could-container-queries-query/
#css #containerqueries
https://css-tricks.com/what-else-could-container-queries-query/
#css #containerqueries
Reposted by Daniel Schwarz
Want smooth fade-in animations when your `<dialog>` opens? The `@starting-style` CSS rule defines the initial state when an element first appears—no JavaScript needed.
December 12, 2025 at 12:03 PM
Want smooth fade-in animations when your `<dialog>` opens? The `@starting-style` CSS rule defines the initial state when an element first appears—no JavaScript needed.
I've changed my mind about container queries. They're actually pretty awesome and improving every day. Some thoughts 👇
When container queries first shipped, they were all about querying a container's size. But now they can query scroll states and anchored positions...
What else could container queries *query*? @dxnny.fun has notes and a few ideas.
css-tricks.com/what-else-co...
What else could container queries *query*? @dxnny.fun has notes and a few ideas.
css-tricks.com/what-else-co...
What Else Could Container Queries... Query? | CSS-Tricks
How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?
css-tricks.com
December 12, 2025 at 4:55 PM
I've changed my mind about container queries. They're actually pretty awesome and improving every day. Some thoughts 👇
Reposted by Daniel Schwarz
Just today, I tried asking GitHub Copilot to fix a non-existing bug in a Hugo website (so, HTML, CSS, toml: no archaic file formats).
It happily hallucinated not recognizing that there was nog bug, proposing CSS changes that didn’t do anything useful (because no bug, remember!).
#genaigoinggreat
It happily hallucinated not recognizing that there was nog bug, proposing CSS changes that didn’t do anything useful (because no bug, remember!).
#genaigoinggreat
December 11, 2025 at 12:41 PM
Just today, I tried asking GitHub Copilot to fix a non-existing bug in a Hugo website (so, HTML, CSS, toml: no archaic file formats).
It happily hallucinated not recognizing that there was nog bug, proposing CSS changes that didn’t do anything useful (because no bug, remember!).
#genaigoinggreat
It happily hallucinated not recognizing that there was nog bug, proposing CSS changes that didn’t do anything useful (because no bug, remember!).
#genaigoinggreat
Reposted by Daniel Schwarz
Native CSS nesting doesn't feel nearly as solid as I remember it with Sass.
This doesn't work:
li {
&::scroll-marker {
&:target-current {
background-color: red;
}
}
}
but this does:
li::scroll-marker:target-current {
background-color: red;
}
Seems pseudo nesting is a nono.
This doesn't work:
li {
&::scroll-marker {
&:target-current {
background-color: red;
}
}
}
but this does:
li::scroll-marker:target-current {
background-color: red;
}
Seems pseudo nesting is a nono.
December 10, 2025 at 3:56 PM
Native CSS nesting doesn't feel nearly as solid as I remember it with Sass.
This doesn't work:
li {
&::scroll-marker {
&:target-current {
background-color: red;
}
}
}
but this does:
li::scroll-marker:target-current {
background-color: red;
}
Seems pseudo nesting is a nono.
This doesn't work:
li {
&::scroll-marker {
&:target-current {
background-color: red;
}
}
}
but this does:
li::scroll-marker:target-current {
background-color: red;
}
Seems pseudo nesting is a nono.
Reposted by Daniel Schwarz
I just realised I’m a CSS dinosaur still using RGB and HEX to define colours 🦖
Meanwhile modern CSS has levelled up:
• name
• rgb()
• rgba()
• hex
• hex + alpha
• hsl()
• hsla()
• hwb()
• lab()
• lch()
• color()
• color-mix()
• oklab()
• oklch()
What’s the best option?
#buildinpublic #webdesign
Meanwhile modern CSS has levelled up:
• name
• rgb()
• rgba()
• hex
• hex + alpha
• hsl()
• hsla()
• hwb()
• lab()
• lch()
• color()
• color-mix()
• oklab()
• oklch()
What’s the best option?
#buildinpublic #webdesign
December 11, 2025 at 1:50 PM
I just realised I’m a CSS dinosaur still using RGB and HEX to define colours 🦖
Meanwhile modern CSS has levelled up:
• name
• rgb()
• rgba()
• hex
• hex + alpha
• hsl()
• hsla()
• hwb()
• lab()
• lch()
• color()
• color-mix()
• oklab()
• oklch()
What’s the best option?
#buildinpublic #webdesign
Meanwhile modern CSS has levelled up:
• name
• rgb()
• rgba()
• hex
• hex + alpha
• hsl()
• hsla()
• hwb()
• lab()
• lch()
• color()
• color-mix()
• oklab()
• oklch()
What’s the best option?
#buildinpublic #webdesign
Check out #MyYearOnXbox via @TrueAchievements www.trueachievements.com/MyYearOnXbox...
Schwarzio's #MyYearOnXbox
Check out Schwarzio's 2025 Xbox stats
www.trueachievements.com
December 10, 2025 at 9:13 PM
Check out #MyYearOnXbox via @TrueAchievements www.trueachievements.com/MyYearOnXbox...
Reposted by Daniel Schwarz
I wish you could set more detailed `hyphens` rules in CSS. `hyphens: auto` can be too aggressive. Yes, you can manually set hyphenation markers in HTML, but that’s a pain and doesn’t really work with content publishing flows.
December 7, 2025 at 6:30 PM
I wish you could set more detailed `hyphens` rules in CSS. `hyphens: auto` can be too aggressive. Yes, you can manually set hyphenation markers in HTML, but that’s a pain and doesn’t really work with content publishing flows.