Daniel Schwarz
@dxnny.fun
📤 162
📥 102
📝 355
Designer / dev / editor / writer, currently
@css-tricks.com
and
@logrocket.bsky.social
I can't stop thinking about Rekindle (the website in the image) and e-ink optimization. I think it's because, honestly, it'd just be awesome if all websites looked like that (with color of course). Simplicity and web perf FTW! Anyway, go read What's !important #10! 🤘
add a skeleton here at some point
about 12 hours ago
0
1
0
reposted by
Daniel Schwarz
Set.Studio
4 days ago
Although we've done so much great stuff with clients over the years, our proudest achievement here in the studio is
@piccalil.li
by a long shot
set.studio
1
14
3
reposted by
Daniel Schwarz
Anne S. Katzeff
3 days ago
Wrapping my brain around @layer! Somehow I missed this "new" CSS rule (introduced in 2022).
0
0
1
reposted by
Daniel Schwarz
CSS Basics
4 days ago
Alternatives to the !important Keyword: "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 to your future self."
#CSS
css-tricks.com/alternatives...
loading . . .
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…
https://css-tricks.com/alternatives-to-the-important-keyword/
1
2
1
reposted by
Daniel Schwarz
CSS by T. Afif
3 days ago
And since sign() has a good support you can replace your first clamp() with: --cmp: sign(var(--left) - var(--right));
1
2
1
reposted by
Daniel Schwarz
ppk 🇪🇺
4 days ago
And is it even possible for CSS if() to compare two numbers? Seems not. color: if(sibling-count() <= var(--comp): red); (--comp is a number)
3
3
1
reposted by
Daniel Schwarz
emilia
2 days ago
Using CSS to accomplish weird outcomes is fun. 😎
0
1
1
reposted by
Daniel Schwarz
Jane Ori
2 days ago
100% CSS repeat() function
codepen.io/propjockey/p...
Repeat anything, strings, sets of animation properties to help manage parallel array properties, calc() partials, polygon partials, shape partials, text-shadows, anything!
loading . . .
100% CSS repeat() function!
...
https://codepen.io/propjockey/pen/XJNWYqQ??editors=0100
1
17
4
reposted by
Daniel Schwarz
George Rodier
1 day ago
I'm not a CSS expert, but expert CSS educators are my favorite. Their design skills, ability to take full advantage of the web platform, AND general enthusiasm for building for the web is unmatched by other types of developers!
0
9
1
reposted by
Daniel Schwarz
CSS by T. Afif
1 day ago
Now it's lazy and bouncy! 😆 Demo:
codepen.io/t_afif/full/...
via
@codepen.io
Too much bouncing? Well, drag it slowly! 🫠 cc
@bram.us
add a skeleton here at some point
4
28
8
reposted by
Daniel Schwarz
Álvaro Montoro
1 day ago
CSS random() and random-item() are almost here. In this
@css-tricks.com
's article, I explore the challenges of achieving randomness in CSS, the evolution of solutions over time, and the significance of the new native random functions. Just a random article to read 😅
css-tricks.com/the-importan...
loading . . .
The Importance of Native Randomness in CSS | CSS-Tricks
We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.
https://css-tricks.com/the-importance-of-native-randomness-in-css/
1
19
3
reposted by
Daniel Schwarz
Friday Front-End
about 12 hours ago
Today's lunch video is "Dos & Don’ts of Anchor Positioning" - "New resources to make
#CSS
Anchor Positioning easier, and some demos to help you understand how anchor positioning works. We'll also look at what new capabilities are in the pipeline."
www.youtube.com/watch?v=OEvV...
loading . . .
Dos & Don’ts of Anchor Positioning
CSS Anchor Positioning isn't baseline yet, and there's good reason for that. You can use it, but it comes with some caveats. On April 16 James, Stacy, and Miriam will cover new resources to make…
https://www.youtube.com/watch?v=OEvVW4wQUII
0
3
2
reposted by
Daniel Schwarz
Ben Schwarz
10 days ago
🆕 On the blog: How I built
@calibreapp.com
's new dynamic hexagonal world map, in just 10kb.
calibreapp.com/blog/buildin...
4
39
4
reposted by
Daniel Schwarz
Florens Verschelde
5 days ago
CSS tip: make sure that selected text remains readable. Style `::selection` to at least disable text effects like drop shadows, gradient fills, etc. A decent chunk of your users treat text selection as a reading aid, highlighting words or paragraphs to keep track of their position in the text.
1
16
4
reposted by
Daniel Schwarz
Firefox for Web Developers
5 days ago
CSS's light-dark() now accepts images, making it simpler to define alternate values for a dark color scheme. Here's how it works:
loading . . .
1
53
16
reposted by
Daniel Schwarz
Naomi "Strings"
8 days ago
2 things about
@kevinpowell.co
's new CSS Demystified course. 1. I was terrified of layers and the course gives a great intro. No longer terrified. 2. His joy and excitement are contagious -- an instant mood lifter every lesson. For anyone learning CSS:
courses.thecascade.dev
loading . . .
The Cascade - Courses
https://courses.thecascade.dev/
0
14
5
reposted by
Daniel Schwarz
Jon
12 days ago
TIL! Who knew you could change the "src" of an
#html
<img> using
#css
: img { content: url(whatever.png) } NO PSEUDOS!
https://codepen.io/jon/pen/MYjRQje
Seems to work in all current browsers too. How did I miss this?
1
17
2
reposted by
Daniel Schwarz
Stefan Judis
11 days ago
Web Weekly 190 just went out! 🥂 This one covers `image-set` for backgrounds, Wakamai Fondue v1.0, `field-sizing` for textareas, selects and input fields, CSS quirks in the shadow DOM, and container style queries in Firefox Nightly. Read it online:
https://webweekly.email/...
1
19
6
reposted by
Daniel Schwarz
Firefox for Web Developers
11 days ago
Firefox 150 just landed & includes new web platform features like: 🎉 sizes="auto" on images 🎉 light-dark() image support 🎉 CSS revert-rule 🎉 ariaNotify() 🎉 Media pseudo-classes like :playing None of these are baseline yet, so check MDN for support.
developer.mozilla.org/en-US/docs/M...
loading . . .
Firefox 150 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 150 that affect developers. Firefox 150 was released on April 21, 2026.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150
2
103
17
reposted by
Daniel Schwarz
Lynn Zero | PlayNeoNeuro.neocities.org
11 days ago
Genuinely what the internet used to be! We need more of this! I'm doing the same with my site, I've gone back to hand-coding the entire thing using only HTML and CSS, it feels really nice.
1
3
1
Yeah idk what happened but I just learned about this yesterday.
add a skeleton here at some point
9 days ago
0
0
0
reposted by
Daniel Schwarz
Diversify Tech
10 days ago
Josh W. Comeau shows how his blog's sticky header effect works using pure CSS blocker elements, no JavaScript needed.
loading . . .
Sneaky Header Blocker Trick • Josh W. Comeau
There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog…
https://buff.ly/vV7MKv6
0
3
1
reposted by
Daniel Schwarz
Schalk Neethling
10 days ago
@firefox.com
150 release notes for developers (Stable) 🎉 sizes="auto" on images 🎉 light-dark() image support 🎉 CSS revert-rule 🎉 ariaNotify() 🎉 Media pseudo-classes like :playing I also have a polyfill for the last one :)
github.com/schalkneethl...
developer.mozilla.org/en-US/docs/M...
loading . . .
Firefox 150 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 150 that affect developers. Firefox 150 was released on April 21, 2026.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150
0
12
2
reposted by
Daniel Schwarz
Stefan Judis
15 days ago
Responsive images are tough and often implemented incorrectly. With sizes=auto the browser will figure things out. Chromium supports it, Firefox 150 in two weeks, Webkit in tech preview. I can't wait for this!
https://developer.mozill...
3
60
7
The best of the best from the last two weeks, right here 👇
add a skeleton here at some point
15 days ago
0
0
0
reposted by
Daniel Schwarz
Victor
16 days ago
light-dark() isn't just for colors anymore. It now handles: 1. Images 2. Gradients 3. Image-sets And even more. ATTENTION: this is a super new, experimental feature that is not widely supported.
1
1
1
reposted by
Daniel Schwarz
Rebecca Watson
15 days ago
sorry everyone but the bsky outage made me spend the day on Xitter, Mastodon, and Threads so now instead of being a progressive in an echo chamber I'm a Nazi Linux evangelist in a parasocial relationship with a Taco Bell marketing intern.
29
562
52
reposted by
Daniel Schwarz
Nathan Knowler
15 days ago
CSS nesting and `:has()` are two months away from being Baseline Widely Available (i.e. available in Chrome/Edge/Firefox/Safari for 30 months).
2
88
16
www.trading212.com/invite/4Dqdx...
loading . . .
Learn. Trade. Invest. - Trading 212
Invest in Stocks and ETFs with zero commission. Trade Gold, Oil, Currencies and more. Trusted and secure.
https://www.trading212.com/invite/4Dqdx7aG38M
16 days ago
0
0
0
reposted by
Daniel Schwarz
Stefan Judis
17 days ago
The yearly WebAIM report is out and the overall accessibility state of the web is getting worse again. "Home pages with ARIA present had significantly more errors (59.1 on average) than pages without ARIA (42 on average)" Man, this makes me sad.
https://webaim.org/proje...
4
11
7
reposted by
Daniel Schwarz
Chrome for Developers
16 days ago
Catch the latest updates in Chrome 147 →
goo.gle/4twxerO
Learn how to build non-rectangular borders with the CSS border-shape property and nest ongoing view transitions.
loading . . .
0
12
2
reposted by
Daniel Schwarz
Ricky
19 days ago
A new way to style gaps in CSS | Blog | Chrome for Developers
#css
#frontend
loading . . .
A new way to style gaps in CSS | Blog | Chrome for Developers
Say goodbye to border and pseudo-element hacks.
https://developer.chrome.com/blog/gap-decorations?ref=web-design-weekly.com
0
2
2
reposted by
Daniel Schwarz
Christian Alder
18 days ago
Drag and drop added, this time with a bit of random rotate on the picked up elements ☺️
loading . . .
2
10
1
reposted by
Daniel Schwarz
CSS-Tricks*
18 days ago
Managing two states in
#CSS
(a la the Checkbox Hack) is great and all, but using radio buttons for multiple states opens up a bunch more options. Oodles of examples from
@amitsheen.bsky.social
:
css-tricks.com/the-radio-st...
loading . . .
0
18
6
reposted by
Daniel Schwarz
Firefox for Web Developers
18 days ago
CSS contrast-color is newly baseline, but it falls short in some areas. Here's how it works, and what to look out for:
loading . . .
3
96
19
reposted by
Daniel Schwarz
Scott Riley
19 days ago
designers please learn to code. i promise it is not hard unless you try learning it from one of those weird youtube people who make it exponentially more difficult than it needs to be for absolutely no reason. start with basic html and css and you can make your own cool shit in a matter of hours.
add a skeleton here at some point
4
27
4
github.com/w3c/csswg-dr...
loading . . .
[css-shapes] add additional corner-shapes options to inset() etc · Issue #8946 · w3c/csswg-drafts
https://drafts.csswg.org/css-shapes/#supported-basic-shapes Currently inset(), xywh() and rect() allow an optional border-radius like syntax for rounding the corners of the rectangle. I'm proposing...
https://github.com/w3c/csswg-drafts/issues/8946
19 days ago
0
1
0
reposted by
Daniel Schwarz
Eric Portis
22 days ago
Will this help me in my quest to make a six-way triforce switch for image comparison? Maybe...
add a skeleton here at some point
3
4
1
reposted by
Daniel Schwarz
Ricky
21 days ago
Poking at the CSS if() Function a Little More: Conditional Color Theming | CSS-Tricks
#css
#frontend
loading . . .
Poking at the CSS if() Function a Little More: Conditional Color Theming | CSS-Tricks
The CSS if() function enables us to use values conditionally, but what exactly does if() do? Let's look at a possible real-world use case.
https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/?ref=web-design-weekly.com
0
3
2
reposted by
Daniel Schwarz
Chris Coyier
25 days ago
ok hear me out. If we put a unique `container-name` on the root of all of our components... that's... perfect scoping, via: @container unique-name { button {} .whatever {} } That's platform-level CSS modules. That's the scoping we need!
frontendmasters.com/blog/name-on...
loading . . .
Name-Only Containers: The Scoping We Needed
If we give a `container-name` to the root of all our unique components, we can scope styles to them with a simple @container query.
https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/
9
110
17
reposted by
Daniel Schwarz
CSS by T. Afif
23 days ago
After shape() and border-shape, another great feature in the CSS Shape world is on the way. I will be missing all the hacky-gradients-math-stuff I was doing 😅
add a skeleton here at some point
2
21
2
reposted by
Daniel Schwarz
Brendan Hayward
22 days ago
#css
capable of more and more every year. things that were real headaches keep entering the "worth doing and won't cost your sanity" zone of ui ux
add a skeleton here at some point
0
4
1
reposted by
Daniel Schwarz
Jonas Pelzer
22 days ago
Just had an enlightenment about CSS View transitions. They are much more powerful than I thought AND much easier to use! You really only have to give your element a unique view-transition-name. This has to be consistent across all pages the element appears on. That’s it!
1
10
1
reposted by
Daniel Schwarz
CSS Weekly
21 days ago
Frontend News #22 ❤️ Detect at-rule support in CSS 👉 pointer-box-offset property 🦄 Creative ways are to select the HTML element 😍 x86 CPU architecture in CSS Featuring
@bram.us
,
@robinrendle.bsky.social
,
@tylersticka.com
,
@dxnny.fun
,
@rebane2001.bsky.social
. 🙏
cssw.io/frontend-new...
loading . . .
Frontend News #22: x86 CPU in CSS, pointer-box-offset Property, Detecting at-rule Support
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
https://cssw.io/frontend-news-22
1
7
6
patrickbrosset.com/articles/202...
loading . . .
Patrick - Using CSS animations as state machines to remember focus and hover states with CSS only
I discovered this CSS-only trick to store the past <code>:focus</code> or <code>:hover</code> state of any element. Without JavaScript, you can style elements depending on whether they were ever focused or hovered. Here's how it works.
https://patrickbrosset.com/articles/2026-03-09-using-css-animations-as-state-machines-to-remember-focus-and-hover-states-with-css-only/
21 days ago
0
1
0
reposted by
Daniel Schwarz
Philip J Fulcher
28 days ago
YES. The more CSS and design people I add to the feed, the better it gets. The vibes are immaculate.
0
12
1
reposted by
Daniel Schwarz
Annie Sexton
28 days ago
bless the CSS people. my tech news feed is all AI but the CSS people are still styling and just doing their thing because its fun and they love it and they make neat things. my heroes.
3
176
14
www.tempertemper.net/blog/theres-...
loading . . .
There’s no need to include ‘navigation’ in your navigation labels
Marking up navigation is pretty straightforward, but here’s a nice reminder on how the aria-label should be written.
https://www.tempertemper.net/blog/theres-no-need-to-include-navigation-in-your-navigation-labels?utm_source=the-index&utm_medium=newsletter
28 days ago
0
0
0
css-tricks.com/css-olfactiv...
loading . . .
Sniffing Out the CSS Olfactive API | CSS-Tricks
A deep sniff of the new CSS Olfactive API, a set of proposed features for immersive user experiences using smell.
https://css-tricks.com/css-olfactive-api/
about 1 month ago
0
0
0
reposted by
Daniel Schwarz
Victor
about 1 month ago
Your CSS specificity wars are over. @ layer lets you control the cascade without !important hacks. The problem with CSS: Specificity decides what wins.
1
10
2
Load more
feeds!
log in