I want a program that looks over an #HTML document and its #CSS stylesheets, and applies the stylesheets' rules as `style` attributes on the HTML elements in the document.
Meaning this:
<html>
<style>p:first-child { margin-top: 0 }</style>
<p>First paragraph</p>
<p>Second paragraph</p>
</html>
Translates into this:
<html>
<p style="margin-top: 0">First paragraph</p>
<p>Second paragraph</p>
</html>
Is that a thing?
CSS Working Group resolved to allow range syntax in style queries. We can compare with a container variable:
@ container style(--var < 5em)
But can also compare normal values:
style(1em < 20px)
style(sibling-count() > 3)
This style function can also be used for conditions of inline if()
oh I didn't know #CSS now supports alt text for content added by the style. And it's well supported in browsers
.has-before-content::before {
content: url("cat.jpg") / "A cute cat";
}
I know that I am a little bit late to the party and everyone else has read and published their responses about it, but hey! Sharing is caring!
This iteration of the hot debate between two competing specs for CSS masonry layout finally sounds convincing to me. Do you remember when the `gap` property all of a sudden became available inside flex containers? I have the same kind of vibe by reading this.
Geat explainer @jensimmons
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
Visualising Data with JavaScript Complete Bundle https://leanpub.com/b/visualising-data-with-javascript-complete-bundle by Peter Cook is the featured bundle of ebooks 
on the Leanpub homepage! https://leanpub.com #Graphics #D3Js #Javascript #WebDevelopment #DataScience #NodeJs #React #Html #Css
CSS Working Group resolved to add an nth-item() function, for selecting a value from multiple options. That could be useful in a lot of situations, but i'm excited to combine with sibling-index():
nth-item(sibling-index(), red, orange, yellow, green, …)
"The Jedi use the cascade for knowledge and defense, never for attack."
— @mia
New Kitten release
• Minor fix: Styles automatically gathered and de-duplicated from the body into the head are now placed _after_ other items in the <head> slot. Since you would expect styles added to the body of the page to override ones in the head, this now brings Kitten’s behaviour in-line with authoring expectations.
Enjoy!
Not a joke: CSSWG has resolved to start working on fit-to-width text in css-fonts-5!
https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2769621512
“Item Flow, Part 1: A new unified concept for layout” by @jensimmons, Saron Yitbarek, Elika Etemad and Brandon Stewart
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
> As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious home. Things seemed to click together elegantly. New capabilities emerged
This is really an exciting…
️ https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/
How NRK uses scroll-driven animations to bring stories to life https://lobste.rs/s/qlkulp #css #web
https://developer.chrome.com/blog/nrk-casestudy
New Kitten update
• 
Kitten HTML templates and kitten.Component render functions can now be async.
This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.
So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)
I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.
The kitten.Component version also has a refresh button that streams a different three to the page.
For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.
Enjoy!
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
The <select> element can now be customized with CSS via @matheusrich https://lobste.rs/s/bocapp #css #web
https://developer.chrome.com/blog/a-customizable-select
The <select> element can now be customized with CSS
Link: https://developer.chrome.com/blog/a-customizable-select
Discussion: https://news.ycombinator.com/item?id=43532830
Especially useful for designers is when they realise that a lot of the fancy visual effects from Figma etc. can be recreated with CSS.
Even more, when realising that those can become reusable CSS styles for building things faster in the future. That way designers can build their own visual toolkit.
I'm thinking of font features that could mess with calculating the width of a string of text.
The most obvious is optical sizing. This changes the width of glyphs at certain font sizes, so a text at font-size:16px might be 100px wide, but that doesn't mean it'll be 200px wide at font-size:32px.
Another could be `rand`, when supported: if you get different glyphs on your virtual canvas than on screen, calculations get borked.
Anything else? 
Looking for CMS advice
Hey Web devs!
Do you have any suggestions, tips, opinions, dos, don’ts about headless CMSes?
I have a growing list of small/mid non-profits and collectives asking for my help to (re)make their website. I totally want to help, but I don’t have much time, especially considering that they generally have little or no funding—I would most definitely point them to @VillageOneCoop, otherwise.
Therefore, I want a super simple and replicable solution where I can copy-paste most of the code, while providing them with a stable, fast, and modern solution. I had a look at the Headless CMS section in the Jamstack website, but I need opinions from people who actually used some of that software already.
Needs
Nice to have
Absolutely not
Please, boost this and ask around! Links to videos, tutorials, and resources are welcome.
People whose perspective I would really value: @zachleat @harryfk @deno_land @jaredwhite @vanillaweb @stefan @mxbck @WeirdWriter @deadsuperhero (Sorry if I am spamming you!)
Oh no, my blog shows up in the Dillo like a 
Looks like it's time to edit the CSS 
