Daniel Schwarz
@dxnny.fun
Designer / dev / editor / writer, currently @css-tricks.com and @logrocket.bsky.social
My latest blog post: Adding Dark Mode to my Blog mikecoats.com/dark-mode/ I've finally caved; against my better judgement, I've added a dark colour scheme to my blog. In 2026, with modern CSS, this is easier than you might imagine.
Adding Dark Mode to my Blog
I've finally caved; against my better judgement, I've added a dark colour scheme to my blog. In 2026, with modern CSS, this is easier than you might imagine.
mikecoats.com
TIL CSS comments are allowed inside declarations 👀 .card { color/* wait */:/* what */red; }
The LH unit in CSS is cool! In my new article, I wrote about it and shared my favorite demos. ishadeed.com/article/lh-u...
🚨 Attn #CSS folks, this will nerd snipe you 😅 It always bothered me how skeleton UIs are basically parallel versions of existing templates, swapped in and out. To me, this is fundamentally a style, and should be doable with a class. Images are easy, but I couldn't figure out a solution for text…
2026.stateofcss.com/en-US/conclu... State of CSS 2026 is out! Guess who wrote this year's conclusion? 😅
State of CSS 2026: Conclusion
2026.stateofcss.com
I got into the idea that conic-gradient() is pretty cool for drawing triangles. master.dev/blog/when-yo...
I’m very excited for this one! (Knowing that @kevinbcmu.bsky.social is involved, I know it is gonna be gooooood)
IntentToShip@intenttoship.dev · 3w agoBlink: Intent to Prototype: CSS mixins
Headings (<h1> to <h6>) are a structural map, not a font-size picker. Screen reader users skim pages by jumping headings. Skipping from <h1> to <h3> breaks that map. Keep headings sequential. If you need an <h2> to look smaller, style it with CSS, not an <h4>. 🗺️
💡 CSS Tip! After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons. css-tip.com/rounded-shap... You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners!
The 2026 State of CSS Survey results are out: 2026.stateofcss.com Unsurprised color features in CSS are most hated, despite last year’s survey’s odd focus on them. CSS carousels also fitting given they encode WCAG violations, break Separation of Concerns. #CSS
Building a paid browser for developers by yourself is a huge uphill battle every day. But some days you open the state of CSS survey results and see "I use Arc as my primary browser but Polypane is goated for development." as the first comment ❤️ 2026.stateofcss.com/en-US/other-...
State of CSS 2026: Other Tools
2026.stateofcss.com
Alternatives to the !important Keyword | CSS-Tricks
Alternatives to the !important Keyword | CSS-Tricks
Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain…
buff.ly
👀 github.com/WebKit/WebKi... “Implement at-rule function for use with @supports” See brm.us/at-rule for the details on this one.
Detect at-rule support in CSS with @supports at-rule(@keyword)
Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional R...
brm.us
Imagine showing this to a front-end dev 5 years ago.
Kilian Valkhof@kilianvalkhof.com · 7d agoThis article is pretty fun. I'd solve it with a bunch of stacked links, then have a registered custom property that uses random() to set an int between 0 and number-of-links, then use that in an if() function to display:block one link (matching the randomly chosen int) master.dev/blog/a-butto...
CSS-Dodos 1 Aug 2/6 🟩🟨⬛⬛🟨🟨⬛⬛⬛🟨⬛⬛ 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 Clean run Can you beat the Fairman? css-questions.com/css-dodos #css #cssdodos #cssquestions #web
Snap! That's What I Thought
ALT: Snap! That's What I Thought
static.klipy.com
What’s !important #16: “sibling-index()” Animations, Use Cases for the Infinity Keyword, Container Stuck Queries, and More, by @dxnny.fun (@csstricks@mastodon.social): https://css-tricks.com/whats-important-16/?ref=frontenddogma.com #retrospectives #css #functions #lazyloading #containerqueries
What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More | CSS-Tricks
The soon-Baseline sibling-index() function for animations, CSS and the 2026 FIFA World Cup, use cases for the infinity keyword, container "stuck" queries, and more.
css-tricks.com
CSS-Dodos 31 Jul 5/5 ⬛⬛🟩⬛🟨⬛🟨🟩⬛⬛🟩 ⬛⬛🟩⬛🟨⬛⬛⬛⬛🟨⬛ 🟨⬛🟩⬛🟨⬛🟨⬛⬛🟨🟩 ⬛⬛🟨⬛⬛🟨⬛⬛🟩⬛⬛ 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 Can you beat the Fairman? css-questions.com/css-dodos #css #cssdodos #cssquestions #web
CSS-Dodos - Daily CSS Guessing Game
Play CSS-Dodos, a daily CSS feature guessing game where developers solve a CSS feature in six tries or less.
css-questions.com
As always, the dev community has been busy 👀 css-tricks.com/whats-import...
What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More | CSS-Tricks
In What’s !important #16, see how the soon-Baseline sibling-index() function can be used for animations, revisit the 2026 FIFA World Cup with CSS, explore the use cases for the infinity keyword, learn...
css-tricks.com
CSS-Dodos 28 Jul 3/5 ⬛⬛🟨⬛🟨⬛ ⬛🟩🟨⬛⬛⬛ 🟩🟩🟩🟩🟩🟩 Can you beat the Fairman? css-questions.com/css-dodos #css #cssdodos #cssquestions #web
CSS-Dodos - Daily CSS Guessing Game
Play CSS-Dodos, a daily CSS feature guessing game where developers solve a CSS feature in six tries or less.
css-questions.com
CSS-Dodos 24 Jul 4/6 ⬛⬛⬛🟨⬛⬛⬛⬛🟩🟨🟨⬛ ⬛⬛⬛⬛⬛⬛🟨⬛🟩🟨⬛🟨 ⬛⬛⬛🟩⬛⬛⬛🟨⬛🟨⬛⬛ 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 Clean run Can you beat the Fairman? css-questions.com/css-dodos #css #cssdodos #cssquestions #web
CSS-Dodos - Daily CSS Guessing Game
Play CSS-Dodos, a daily CSS feature guessing game where developers solve a CSS feature in six tries or less.
css-questions.com
CSS-Dodos 23 Jul 4/6 🟨🟨⬛🟨⬛🟩⬛⬛ ⬛🟨⬛🟨⬛🟨⬛⬛ 🟨⬛⬛⬛🟩🟨⬛⬛ 🟩🟩🟩🟩🟩🟩🟩🟩 Clean run Can you beat the Fairman? css-questions.com/css-dodos #CSS #CSSGame
CSS-Dodos - Daily CSS Guessing Game
Play CSS-Dodos, a daily CSS feature guessing game where developers solve a CSS feature in six tries or less.
css-questions.com
A long, long, long road, but `clip-path` animations are about to be GPU accelerated in Chromium: issues.chromium.org/issues/40503...
Chromium
issues.chromium.org
Learn how to create a hand-drawn text reveal for header text with CSS and some clip-path magic in this week's blog posts: mostlynerdless.de/blog/2026/07...
mostlynerdless.de
I wrote about how to build a sport standings layout with grid and subgrid. If you haven't learned subgrid yet, this might be a good use case to see how it works! ✨ ishadeed.com/article/fifa...
Ahmad Shadeed@ishadeed.com · 2w ago✍️ New Article: Rebuilding FIFA Standings Layout with CSS Subgrid I rebuilt FIFA’s standings layout with CSS Grid and subgrid. It starts with the layout problem, then moves into the final solution, with interactive examples along the way, as usual! 🔗 ishadeed.com/article/fifa...
I love that we have focusgroup in Chrome… but again similar to invoker commands… there’s no good way to use it as a progressive enhancement without JS for feature detection.
In-n-Out Animation Using “sibling-index()”, by @css@front-end.social (@frontendmasters.com): https://master.dev/blog/in-n-out-animation-using-sibling-index/?ref=frontenddogma.com #css #animations #functions
In-N-Out Animation using sibling-index()
Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!
master.dev
