Spyke

Syndicated from the fediverse. Read and engage on the original instance.

View original on programming.dev

6 replies

Zachariah
lemmy.world

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>
17
refaloreply
programming.dev

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

Also the picture element is less than ten years old.

4
codeinaboxreply
programming.dev

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.

2
refaloreply
programming.dev

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.

1
nebekerreply
programming.dev

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.

3
Hayduke
lemmy.world

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

8

You reached the end

This "double HTML" pattern must stop! | Spyke