profile

That HTML Blog

That HTML Blog #17: Superpowered Style Queries, Rejiggering Jamstack

Published 2 months ago • 1 min read

Friday, March 8, 2014

In a World

…Where No Selectors Can Be Applied Based on a Single Variable Value…

…One Specification Emerges…One Which Will Change Everything…

…And That Specification Is…

Container Style Queries. 💥

All right, well maybe this doesn't rise to the excitement level of an 80s action movie, but I think it's pretty amazing. Read below to learn how you can add superpowers to your CSS variables. I also talk about a fresh look at the question of if "Jamstack" can be rehabilitated as a term and some of my recent appearances on CloudCannon's channels concerning this very topic. Plus a conversation about rallying around requestSubmit() instead of the button click hack.

There's a lot of activity still around popovers and invokers which I'm excited about, but that'll have to wait for another day.

I hope you enjoy this week's That HTML Blog Digest. Share it with your friends!

Jared


Add Superpowers to Your CSS Variables with Style Queries

We’re on the verge of yet another CSS revolution with the arrival of style queries. If you’ve ever thought:

Yeah, variables are cool and all, but it’s a bummer I can only use them to set one property at a time

or

Wow, I wish I could style this whole layout differently based on a CSS variable I set with a media query

…then your dreams are about to come true!

Style container queries were first added to Chromium browsers last year, and now they’re landing in Safari with the arrival of Safari Technology Preview 190.

Read on the web...


Rejiggering the Jamstack for Sustainability

Back in mid-2023, I wrote My Journey Away from the JAMstack over at The Spicy Web. I was feeling, well, spicy about how the marketing term “Jamstack” (née JAMstack) had been handled by its originator, Netlify.

Well, I’m happy to report it looks like rumors of the death of Jamstack were greatly exaggerated!

Read on the web...


It’s Probably Time to Embrace requestSubmit()

For a long long time, JavaScript developers would need to query for a submit button inside of a form—or create one if need be!—and then call click() on the button in order to programmatically submit a form with the same lifecycle that a user submission would get—validation, triggering a submit event, etc.

To solve this, a new method was added to the Form API: requestSubmit().

Read on the web...


That HTML Blog
Made with ❤️ in Portland, Oregon

See also our sibling publication The Spicy Web + Discord
Follow The Spicy Web on Mastodon!

That HTML Blog

That HTML Blog is the fresh place to be for posts about developing websites & applications using “vanilla” & standards-adjacent web technologies.

Get this: a weekly digest of thrilling links sent right to your inbox. w00t! 🙌

Read more from That HTML Blog

Friday, April 19, 2024 Here in Portland, spring is in full bloom 🌸, and what is also in full bloom is the effort to (see what I did there?) equalize the rollout of awesome new web specs across all browsers. I am of course talking about Interop 2024, and who better to discuss these exciting developments for #WebDev with than my good friend Ayush. That's right my friends, Just a Spec is back! 👏 And in 🎙️ Episode 14 of Just a Spec, we pulled out some of our favorite focus areas from the Interop...

about 1 month ago • 1 min read

Friday, March 29, 2024 Hello Web friends! I've been a busy beaver this month. We kicked off the version 2 development cycle of Bridgetown, a site generator & fullstack framework I help maintain, and I've been deep in the throes of that effort. In addition, I launched (rebooted in a way) a new general fediverse-friendly tech blog called The Internet Review. It draws from various archives I have stretching all the way back to 1996! (gawd I feel old now. 😋) But you're here to talk #WebDev, so...

about 2 months ago • 2 min read

Friday, February 23, 2024 Web development news seemed sluggish earlier this month (plus I spent the better part of February very sick!), but now I'm seeing things picking up again—not the least of which is that Firefox 123 is out which finally offers native support for Declarative Shadow DOM (DSD)! Now we can state with confidence that all modern browsers support DSD, and the days of reaching for a polyfill are numbered. 🎉 There's also been a ton of content and conversation floating about...

3 months ago • 2 min read
Share this post