Jonathan Dallas

@doctype_jon
115 Followers
220 Following
1.2K Posts
UI/UX #CSS farmer
websitehttps://jwdallas.com/

$100 reward to anyone who can render a $1 bill on a webpage at actual size (as measured on the screen) without knowing the device. Serious.

(This is a revival of an identical challenge I posed back in 2013 that still remains unsolved.)

@anatudor as others have already pointed out, the font definitely matters. Like websites, modern font files allow for a wide range of capability but not every author uses them.
You know you’re allowed to just attach shadow roots to any element that supports it.

💡 CSS Tip!

An old design pattern solved by a modern CSS feature.

https://css-tip.com/responsive-separator/

Learn how Gap Decorations makes it easy to add a separator between items using simple code with no hacks.

It works with different alignment settings, and you can easily adjust the shape as well.

#CSS #HTML

Excited to attend @Typographics tomorrow! 📚

Took advantage of the occasion to finally fully incorporate the gorgeous Name Mono by @arrowtype into the code examples on my site

It seems like this printer is not only sleeping but having vivid dreams…
@Wilto Lisa Melton recently posted on Mastodon https://mastodon.social/@lisamelton/116811886049264408

Twenty five years ago today I started the #Safari and #WebKit projects at #Apple Computer.

Which means Safari is now old enough to rent itself a car. But let's not speculate about my age.

I'm still sad I can't use Safari on my Windows PC. Alas, I lost the battle to keep it there. But at least WebKit's DNA seeded or influenced most browsers we use today.

And I'm proud of that impact. Along with the wonderful team I built who made it all happen. Here's to another 25, friends.

Cheers. 🥂😊💖

@Kilian there is a pretty interesting hack to let you get a lot of this functionality today that @kizu came up with a little while back https://kizu.dev/svg-linked-parameters-workaround/
Passing Data into SVG: Linked Parameters Workaround

Twelve years ago, I started a draft for an article. I never published it: there were a few cross-browser issues, and the idea was raw and unpolished. I have many drafts like this in my archives. Sometimes, something new interacts with one of these older ideas and leads to something interesting. This article is about one such case: a hacky technique that allows us to pass some data from CSS to SVG and use it to adjust colors or almost anything else.

I think I'll start using #css scope in production. The key (for now) is:

- Global styles provide a solid baseline
- Scoped styles enhance

Which forces the question: how simple can a baseline be? How much can we do with global patterns? How many styles can be optional? Different projects will draw different lines, but I like forcing the question.

Progressive enhancement is only difficult when we decide *everything is always essential* because design has become a static target.