I’ve been excited by the potential of text-box-trim, text-edge and text-box for a while. They’re in draft status at the moment, but when more browser support is available, this capability will open up some exciting possibilities for improving typesetting in the browser, as well as giving us more control of alignment and internal spacing in our components, such as a button.Daniel Schwarz wrote a great deep dive into the current proposal for these two CSS properties, but in this article I’d like to give you an even more solid understanding of the problem this new CSS capability is solving.Aligning text on the web has historically involved a level of compromise. Much of this is down to how fonts render in the browser, and inconsistencies in how different fonts take up space within their text box.This diagram shows the text box for Moderat Extrabold, the headline font we use for Piccalilli. The box is cropped pretty tight horizontally, but vertically there’s a lot of space above and below,

The obvious lack of diversity (and respondents versus last year 😬) applies of course, but there’s some interesting stuff in here still. The “other front-end frameworks” section specifically.Astro, Ember, Remix and jQuery have all grown in usage vs last year, but Next.js has stagnated somewhat. I guess that’s why the Vercel CEO is currently posting through it (warning, Twitter link).All I’ll say about that data is to remember how low Next.js’ share is — even in the favourably non-diverse respondent data from this year — whenever someone tells you it is “the most popular framework”. The (extremely) loud minority applies.I’m really happy to see Astro growing too. It powers this site and allows us to render very little JS, even though our front-end is built with React components. Astro’s SSR system is working wonders for the CSS course too.Check it out!

I like this a lot. Thomas has not only given plenty of detail on how to make outline look nice, but they’ve provided useful breakdowns of problems that could be happening for you and how to fix those problems.Keyboard focus styles are so important to get right, not just for accessibility, but for overall quality UX. One tip from me though is if you use box shadows (like one of the examples of a double outline), they won’t show up in high contrast mode. Transparency is a handy trick there though.I like to set each property separately so it’s more readable☝️ of all the pro tips in the article, I’d say this is the most important one. No code is self-documenting, but breaking things out into separate properties, rather than using shorthands is a good way to make your code more maintainable.Check it out!

I’ve been keeping half an eye on popovers and anchor positioning. I see the latter as a requirement for the former though, so I’ve been waiting not just for browser support, but also, for a deeper dive into how to apply these in the real world.Ryan’s here with exactly what I was looking for. This is a fantastic article with loads of useful demos and code samples. All we have to do now is wait a bit for browsers to catch up because this stuff is hard to progressively enhance, as I see it.Check it out!

It’s that time of year again and our inboxes are riddled with emails. To (hopefully) help with that, we’ve collated some deals from independent authors and publishers who are offering some great discounts for you to enhance your skillset.Josh ComeauJosh is doing a bundle of their two excellent courses, CSS for JavaScript Developers and The Joy of React. I’ve done both and the quality is outstanding.https://www.joyforjs.com/Julia EvansJulia’s Zines are so good, especially the git one.Use WIZARDPDF to get 50% off PDFs and WIZARDPRINT to get 30% off print, only today.https://wizardzines.com/Remy SharpSave 80% off the master package of Remy's great terminal training course. Outrageous value!https://terminal.training/Ahmad ShadeedThere’s no one better to teach you how to debug CSS and Ahmad has put their Debugging CSS course down to $19.99 which is a steal.https://debuggingcss.com/Adam JohnsonAdam’s provided some really generous deals on their fantastic Django books.https://adamj.eu/tech/20