I remember the days of HTML 3.2 but I do not miss them. These days I am more impressed with all the things that can be achieved with just HTML and CSS.

I remember writing web pages in notepad++, using tables and frames for layout. Links actually took you to a different page, and you could right click to open in a new window.

Everything has been downhill since.

Including 'Headline' is very confusing to me.

The 4 Hs of HTML, but it's not actual HTML, it's editorial. This breaks the whole premise.

It's not structure like the headlines, but - and the article doesn't say this (explicitly) - you want to use headlines and deliberate structuring for the heading too.

Thanks, I hate it indeed

Could you achieve the same thing with media queries?

Not always. Suppose you wanted different sets of colors (per source) on mobile vs desktop where the screen/media size was irrelevant, you'd need a way to attach classes to individual source elements, but they don't accept classes.

it depends if you have users with very old browsers or devices

I was more mentioning that because of developers not always using the latest browser features.

You can't style the sources differently, but you can with img tags.

Could you achieve the same thing with media queries?

Also the picture element is less than ten years old.

According to caniuse, since March 2016 it works across the latest devices and major browser versions. So it depends if you have users with very old browsers or devices.

Thanks for the TLDR! That looks very clean and handy. I like how HTML is slowly evolving to do more of the simple stuff we need.

You accidentally replaced the alt with another arc. I bet it’ll still work, to be honest. HTML parsing is so widely lax.

You can't style the sources differently, but you can with img tags.

Also the picture element is less than ten years old.

We had an agency rebuild our website and discovered that they had both a mobile and desktop version of our entire product page in the dom that flipped via media queries. That was a huge issue for SEO and performance. I cant tell if they were just being lazy or didn’t know about grid templates. I’m guessing both, though I know most of it was vibe-coded. Fun stuff to clean up. At least they (over) leveraged picture elements

tldr…

Don’t use this:

<div class="image-wrapper">
  <img class="image--desktop"
    src="/image-desktop.jpg" 
    width="1200" height="400"
    alt="Super descriptive text">
  <img class="image--mobile" 
    src="/image-mobile.jpg" 
    width="600" height="800"
    alt="Super descriptive text">
</div>

and:

.image--desktop {
  display: none;
}
@media (min-width: 1200px) {
  .image--mobile {
    display: none;
  }
  .image--desktop {
    display: block;
  }
}

Instead of all that duplicate HTML and unnecessary CSS, all you need is this [HTML and no CSS or JavaSctipt]

<div class="image-wrapper">
  <picture>
    <source 
      src="/desktop-image.jpg" 
      width="1200" height="400"
      media="min-width: 1200px">
    <source
      src="/mobile-image.jpg" 
      width="600" height="800"
      media="max-width: 1199px">
    <img src alt="Super descriptive text">
  </picture>
</div>

It uses the local time format, not the one of the content language. At least on my PC with Windows 11, Google Chrome and Firefox.

Lemme guess: it uses Swatch Time?

Oh you're going to love the time picker

Firefox shows me the worst date format. In other places it uses my Windows date format; I know because I tried using yyyy-MM-dd, which worked for display, but broke editing. I guess it uses the content language for the date picker? What a mess.

Amazing things. I don't know how they could be of use but I'll bookmark them.

I agree with the previous commenters but fwiw there's a CSS community:

!css@programming.dev

And the possibilities of CSS are getting wilder and wilder.

You can always form submit and do server side processing on the input values. I've seen some complicated things with CSS, but I would just do a form submissions if the goal was no JS.

My own site had no JS at all for like a year, and even now only uses it for optional things. I keep JS disabled by default on sites i don't trust, i shouldn't expect anyone else to be more trusting about it.

If it's just a number, you could probably use , with some CSS to make the "increase" button take up the entire visible space. Maybe make that button transparent so you can see the displayed number behind it but can't click it to type a number. But, like TragicNotCute said, it would reset when the page reloads.

I suspect you can do some cool CSS tricks to adjust other things based on this number, but i have yet to figure stuff like that out. I also am only pretty sure it's possible to style parts of an like that. I still have not got around to styling any of the inputs on my site.

No legitimate reason, it’s just I avoided it for the rest of the site and would be sad to lose my own challenge.

You could do some wacky shit with CSS, but it wouldn’t persist on a refresh of the page. You should use JS for this. I’m wondering why you don’t want to?

Hmm. I wonder if fixing this could be as easy as applying the same styling to the as to the . Not that it matters now.

It seems there's no CSS equivalent to noscript, but what i can do is put the CSS version of a page inside a , and the non-CSS version in a . But this doubles the size of a page so i don't like doing it.

Good grief. It's like pretending that progressive enhancement was never a thing. 🙄

"WHY WON'T YOU LET ME EXECUTE ARBITRARY CODE ON YOUR MACHINE!? Are you some sort of Luddite?"

Yes, but the core ingredient in question is a food additive which may be necessary in industrial food, but has no place in a homemade pie recipe.